Question

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

这是我网格的快照。

enter image description here

这是我的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

Answer 1

在我看来，您的主要目标是了解如何正确使用navGrid顶部和底部寻呼机。所以我会详细解释一切是如何运作的。

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

jqGrid有两个主要选项，用于指定页面：pager和toppager选项。要使用pager选项，您需要创建具有<div>属性的id，将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选择器作为navGrid的第一个参数使用其他选项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的fork中实现了一些新功能，我在GitHub上发布了here。 1）现在可以使用pager: true之类的toppager: true选项。 2）可以使用navGrid而不使用寻呼机（如$(gridName).navGrid({search: false});）。在这种情况下，jqGrid将在jqGrid拥有的所有寻呼机上添加按钮。 3）我添加了新选项navGrid：iconsOverText:true，它允许另外看一下带有文本的导航按钮（参见the demo）。 4）如果添加了太多图标并且网格没有那么大width，导航器按钮将自动包裹在下一行寻呼机上。您可以在the page上的自述文件底部看到更多功能演示。

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

1 个答案: