导航工具栏中的 jqGrid 添加按钮不起作用

Question

我正在尝试创建一个允许用户添加、编辑和删除记录的网格。我已经完成了填充网格的工作，现在我将显示用于添加记录的对话框。但是，我不明白为什么它不起作用。对话框未显示。

这是我的网格快照。

这是我的 js 函数

InfoDesk.GridManager.postsGrid = function (gridName, pagerName) {
    //Create the grid
    $(gridName).jqGrid({
        //server url and other ajax stuff
        url: '/Admin/Posts',
        datatype: 'json',
        mtype: 'GET',

        height: 'auto',

        //Columns
        colNames: colNames,
        colModel: columns,

        //pagination options
        toppager: true,
        pager: pagerName,
        rowNum: 10,
        rowList: [10, 20, 30],

        //row number columns
        rownumbers: true,
        rownumWidth: 40,

        //default sorting
        sortname: 'PostedOn',
        sortorder: 'desc',

        //display the no. of records message
        viewrecords: true,

        jsonReader: { repeatitems: false },

        afterInsertRow: function (rowid, rowdata, rowelem) {
            var tags = rowdata["Tags"];
            var tagStr = "";

            $.each(tags, function (i, t) {
                if (tagStr) tagStr += ", "
                tagStr += t.Name;
            });


            $(gridName).setRowData(rowid, { "Tags": tagStr });

        }


    });

    $(gridName).navGrid(pagerName,
                     {
                         cloneToTop: true,
                         search: false,
                         add:true
                     }, editOptions, addOptions, deleteOptions);                
    };

当我点击添加按钮时。什么都没有发生。这是我使用 jqGrid 的第一个项目。所以，我对此一无所知。

已编辑：

我找到了一个 fiddle 示例并针对导航栏进行了修改。它工作正常，但我仍然无法识别我在代码中犯错的问题。

fiddle

Answer 1

在我看来，您的主要目标是了解如何正确使用 navGrid 顶部和底部寻呼机。因此，我将准确解释所有工作原理。

尚不清楚您是否需要在顶部分页器或顶部和底部分页器上添加导航器图标。不清楚你是否使用底部寻呼机。

jqGrid 有两个指定页面的主要选项：pager 和 toppager 选项。要使用 pager 选项，您需要创建具有 id 属性的 <div>，将 div 放在页面某处并使用 id 选择器或 ID 名称作为 pager 选项的值。例如，您可以放置 <div id="mypager"></div> 并使用 pager: "#mypager" 作为 jqGrid 选项。如果您将以另一种支持的形式使用 pager 选项的值：pager: "mypager" 或 pager: $("#mypager") 那么 jqGrid 将 规范化 id 选择器的选项。如果您在创建网格后直接使用 var thePager = $(gridName).jqGrid("getGridParam", "pager"); 获取 "pager" 选项的值，您将获得 thePager === "#mypager" 独立于您使用输入 pager 参数的方式。

选项 toppager 以另一种方式起作用。您应该使用 toppager: true 创建首页寻呼机。在这种情况下，jqGrid 创建相应的 <div> 本身。 div 的 id 将由网格的 id 和字符串 _toppager 构造。因此，如果 gridName 等于 #mygrid，您将拥有 id="mygrid_toppager" 的顶部寻呼机。如果在创建网格后获得 toppager 选项的值

var theTopPager = $(gridName).jqGrid("getGridParam", "pager");

您将取回顶部寻呼机的 ID 选择器而不是 true：theTopPager 将等于 "#mygrid_toppager"（gridName + "_toppager").

navGrid 的第一个参数的值应该是要在其上放置导航器按钮的寻呼机的 id 选择器。所以它应该是 $(gridName).navGrid(gridName + "_toppager", ...); 在顶部分页器上添加按钮，如果你想在底部分页器上添加按钮应该是 $(gridName).navGrid(pagerName, ...);。像你在 jsfiddle 演示中那样使用 $("#grid").navGrid('setGridParam', ... 是错误的，因为 'setGridParam' 不是任何寻呼机的 id 选择器。

如果你有两个寻呼机（在网格的底部和顶部），你可以使用pager选择器作为[=的第一个参数14=] 并使用附加选项 cloneToTop: true。顺便说一下，可用于添加自定义按钮的方法 navButtonAdd 没有任何 cloneToTop: true 选项，您必须直接指定寻呼机的 id 选择器。

因此，如果您只需要使用一个顶部寻呼机创建网格，您可以删除不需要的 jqGrid 选项 pager: pagerName 并使用以下代码创建带有添加、编辑、删除和刷新按钮的导航栏：

$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });

如果您想在顶部和底部分页器上创建网格，那么您必须使用 jqGrid toppager: true 和 pager: pagerName 的两个选项，并且可以使用其中一个

$(gridName).navGrid($(gridName).getGridParam("pager"), { search: false });
$(gridName).navGrid($(gridName).getGridParam("toppager"), { search: false });

或简称

$(gridName).navGrid($(gridName).getGridParam("pager"),
    { search: false, cloneToTop: true });

顺便说一下，我使用$(gridName).getGridParam("pager")而不是pagerName作为navGrid的参数，因为我不确定你是否使用id名称（比如"mypager"）或 id 选择器（如 "#mypager"）作为 InfoDesk.GridManager.postsGrid 的参数。方法 navGrid 只接受 id 选择器。

如果您需要指定在添加、编辑或删除操作期间使用的表单编辑方法的其他参数，您应该指定其他可选参数 editOptions, addOptions, deleteOptions, searchOptions, viewOptions（请参阅 the documentation).您当然应该在使用前定义对象 editOptions, addOptions, deleteOptions, searchOptions, viewOptions 。您发布的当前代码不包含选项的定义。

更新：顺便说一下，我在 jqGrid 的分支中实现了一些新功能，我在 GitHub here. 1) One can now use pager: true option like toppager: true. 2) one can use navGrid without the pager (like $(gridName).navGrid({search: false});). In the case jqGrid will add the buttons on all pagers which jqGrid have. 3) I added new option navGrid: iconsOverText:true which allows another look of navigator buttons with texts (see the demo). 4) the navigator buttons will be wrapped on the next row of pager automatically if too many icons is added and the grid have not so large width. You can see more demos of the features at the bottom of readme on the page.

上发布

导航工具栏中的 jqGrid 添加按钮不起作用

jqGrid add button in Navigation Toolbar does not work

javascript

asp.net-mvc

jquery-ui

jqgrid