如何向jqgrid工具栏添加刷新按钮?

时间:2013-12-17 14:59:11

标签: jqgrid

我正在研究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,另一个用于刷新整个网格。如果它适合我​​,我会标记你的答案。提前致谢。快乐编码:),如果你的问题不清楚请评论我会解释。

1 个答案:

答案 0 :(得分:4)

首先,您的代码似乎包含输入错误:您在创建网格期间使用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选项更改“刷新”按钮使用的图标(位于指定delrefreshalerttext等的位置。默认值为refreshicon: "ui-icon-refresh"。此外,您可以考虑使用refreshstate: "current"(默认为refreshstate: "firstpage")。