jquery ui选项卡中的jqgrid答案

【问题标题】：Jqgrid in jquery ui tabsjquery ui选项卡中的jqgrid
【发布时间】：2011-06-26 16:17:52
【问题描述】：

我的 jqgrid 有一个自定义按钮，当按下该按钮时会将我带到另一个视图。但是由于某种原因，当我在选项卡之间导航时，每次重新访问该选项卡时都会额外添加一个自定义按钮。有没有办法说只添加一次这个按钮？

这是标记：

$('#tabs').tabs( {
    show: function (event, ui) {
        if(ui.index == 0) {
           Show some content on this tab.. Not important.
        }

        if(ui.index == 1) {
            $("#functionslist").jqGrid({
                datatype: 'json',
                url: '/Admin/GetFunctionsList',
                colNames: ['Namn'],
                colModel: [
                           { index: 'FunctionName', 
                             name: 'FunctionName', 
                             width: 100, 
                             sortable: false 
                           }
                          ],
                 rowNum: 20,
                 prmNames: { sort: 'SortColumn', order: 'SortOrder', page: 'Page', rows: 'Rows', search: null, nd: null },
                 hidegrid: false,
                 pager: '#functionspager',
                 autowidth: true,
                 shrinkToFit: true,
                 height: '100%',
                 caption: 'Functions',
                 viewrecords: true,
                 onSelectRow: function (id) {
                        window.location.href = '/Function/Edit/' + id;
                 }
             }).jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
             .navButtonAdd('#functionspager', {
                 caption: '',
                 title: 'Create new function',
                 buttonicon: 'ui-icon-plus',
                 onClickButton: function () {
                     window.location = '/Function/Add/';
                 }
             }); .... and so forth....

一切运行良好，我有我想要的行为，但由于某种原因，当我在两个选项卡之间导航时，添加了越来越多的自定义按钮。任何想法为什么，都试图解决这个问题，但没有运气。

/丹尼尔

【问题讨论】：

标签： button jqgrid toolbar add

【解决方案1】：

为什么不在添加按钮之前检查按钮是否已经存在？

 if ($('#functionspager :has(".ui-icon-plus")').length == 0) {
     $("#functionslist").jqGrid('navGrid', '#functionspager', { edit: false, add: false, del: false, search: false, refresh: false })
         .navButtonAdd('#functionspager', {
            ...
          });
 }

【讨论】：

【解决方案2】：

调用$("#functionslist").jqGrid({/*parameters*/); 将空的<table> 转换为具有列、捕获、寻呼机等的网格。您应该调用一次，而不是在每次标签激活时都重复调用。

与navGrid 和navButtonAdd 方法完全相同，应该只调用一次。

所以你应该决定如果用户选择带有 jqGrid 的选项卡应该做什么。例如，您可以调用

$("#functionslist").trigger('reloadGrid', [{current:true}]);

（详见here）

【讨论】：