如何将刷新按钮添加到 jqgrid 工具栏？答案

【问题标题】：how to add refresh button to jqgrid toolbar?如何将刷新按钮添加到 jqgrid 工具栏？
【发布时间】：2013-12-17 14:59:10
【问题描述】：

我正在研究 jqgrid。我想在 jqgrid 工具栏上添加刷新按钮来刷新网格。

这是我的js代码：

    jQuery(document).ready(function () {


        var grid = jQuery("#gridemp");

        grid.jqGrid({
            url: '/Admin/GetTimeInOut_ForAdmin',
            datatype: 'json',
            mtype: 'Post',
            height: '100%',
            multipleSearch: false,
            rownumbers: true,
            //formatCell: emptyText,
            colNames: ['User', 'Date', 'TimeIn', 'TimeOut'],
            colModel: [

                { name: 'User', index: 'User', align: "center", sorttype: 'text', resizable: true, editable: false },
                { name: 'Date', index: 'Date', align: "center", sorttype: 'text', resizable: true, editable: false, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'mm/dd/yy' }).change(function () { $('#gridemp')[0].triggerToolbar(); }); } } },
                { name: 'TimeIn', index: 'TimeIn', align: "center", sorttype: 'text', resizable: true, editable: false },
                { name: 'TimeOut', index: 'TimeOut', align: "center", sort:false, resizable: true, editable: false }
            ],
            //shrinkToFit: true,     

            // loadonce: false,
            //ignoreCase: true,

            width: '690',
            pager: '#emppager',
            caption: 'Employee Time IN/OUT',
            rowNum: 10,
            rowList: [10, 20, 50, 100],           

            viewrecords: true,
            hidegrid: false,


        }

        );
        grid.jqGrid('filterToolbar',{ stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
        grid.jqGrid('navGrid', '#emppager',
       { resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' }

   ).jqGrid('navButtonAdd', '#pager');


    });

实际上我需要 2 个刷新按钮，一个用于在不刷新 jqgrid 的情况下清除搜索栏文本框，另一个用于刷新整个网格。如果它对我有用，我会标记你的答案。提前致谢。快乐编码:)，如果您的问题不清楚，请发表评论，我会解释。

【问题讨论】：

标签： jqgrid

【解决方案1】：

首先，您的代码似乎包含输入错误：您在创建网格时使用了pager: '#emppager'，在navGrid 中但不在navButtonAdd 中。

要添加“标准”重新加载按钮来重置过滤器工具栏并重新加载网格，您只需删除 refresh: false 选项。

要添加自定义清除过滤器，您需要按以下方式调用navButtonAdd

.jqGrid("navButtonAdd", "#emppager", {
    caption: "", // no text near the button
    title: "Clear filters in toolbar without reloading of data",
    buttonicon: "ui-icon-close", // an example of icon
    onClickButton: function () {
        this.clearToolbar(false); // don't reload grid
    }
});

您可以通过使用refreshicon 选项更改刷新按钮使用的图标（在您指定del、refresh、alerttext 等的同一位置）。默认值为refreshicon: "ui-icon-refresh"。此外，您可以考虑使用refreshstate: "current"（默认为refreshstate: "firstpage"）。

【讨论】：

谢谢@Oleg，你很棒。愿上帝保佑你和你的家人圣诞快乐！谢谢
@RKSharmaSharma：不客气！谢谢！我也祝你和你的家人圣诞快乐。