jqgrid inlineNav cloneToTop？答案

【问题标题】：jqgrid inlineNav cloneToTop?jqgrid inlineNav cloneToTop？
【发布时间】：2011-12-14 17:28:31
【问题描述】：

我正在玩 jqGrid，我有一个寻呼机（带有查看和刷新）和一个 inlineNav（带有添加、编辑、保存、取消）的组合。

我有 toppager:true 和 cloneToTop:true 将寻呼机控件放置在顶部和底部。但是我似乎无法对我的 inlineNav 做同样的事情。

完整代码如下，但我尝试执行以下操作，但顶部按钮没有正确响应，而且有点乱：

$("#pager_left").clone().appendTo("#list_toppager_left");

谁能帮忙？

    $(document).ready(function() {

        var lastSel;

  $("#list").jqGrid({
    url:'db.php',
    datatype: 'json',
    mtype: 'GET',
    colNames:[
    /*...*/
    ],
    colModel :[ 
      /*...*/
    ],
    pager: '#pager',
    autowidth:true,
    height: "100%",
    rowNum:20,
    rowList:[20,50,100,1000],
    loadtext: 'Loading...',
    viewrecords: true,
    sortname:'BUSINESS',
    sortorder:"ASC",
    multiselect:false,
    sortable:true,
    toppager:true,
    ignorecase:true,
    gridview: true,
    editurl:"db_edit.php",
    caption: 'Bath BID',
    onSelectRow: function(id) {
        if(id && id!==lastSel){ 
            $('#list').saveRow(lastSel);
            lastSel=id; 
        }
        }
  }).navGrid('#pager', {
    edit:false,
    add:false,
    del:true,
    view:true,
    search:false,
    viewtext:"View", 
    closeOnEscape:true,
    edittext:"Edit", 
    refreshtext:"Refresh", 
    addtext:"Add", 
    deltext:"Delete", 
    searchtext:"Search",
    cloneToTop:true},{},{},{},{multipleSearch:true});

    $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true});
    $("#list").jqGrid('inlineNav','#pager', { 
        edittext:"Edit", 
        addtext:"Add",
        savetext:"Save",
        canceltext:"Cancel",
        cloneToTop:true
    });

提前致谢！

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

我分析了你的问题。首先navGrid 支持选项cloneToTop: true，但inlineNav 不支持。此外，按钮的 id 将使用网格 id 作为前缀来构造。结果是会有

list_iladd, list_iledit, list_ilsave, list_ilcancel

作为 ID。另一方面，标准 navGrid 按钮的 ID 在cloneToTop: true 之后将具有以下 ID：

view_list, del_list,
view_list_top, del_list_top

所以一个人不能只用两个寻呼机呼叫navGrid 两次：

$("#list").jqGrid('inlineNav', '#list_toppager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel"
});
$("#list").jqGrid('inlineNav', '#pager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel"
});

将收到一个结果id重复（请参阅the demo）。

在第二次调用 inlineNav 之前进行手动 id 修改也不会真正有帮助（参见 the next demo），因为单击内联按钮后将执行的代码使用相同的 id 构建规则。因此，只有具有原始 ID 的按钮才会被禁用或启用。

我可以总结一下：inlineNav 的当前实现不支持顶部寻呼机。我建议您只使用一次inlineNav。如果您需要在第二个寻呼机中使用图标，则最好检查inlineNav 的源代码（例如，参见here）并以相同的方式添加关于navButtonAdd 的新按钮并使用另一个ID。

希望在下个版本中inlineNav的代码可以扩展为同时支持两个pager。

更新：我忘了说，我修正了文本相对于导航栏中图标的一点位置。这不是您问题的主要主题，但您可能也会感兴趣：

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div {
    margin-top: 2px;
    padding-right: 5px;
}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
    margin-top: -2px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
    margin-top: 2px;
    padding-right: 5px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon {
    margin-top: -2px;
}

【讨论】：

【解决方案2】：

这有点笨拙，但为了快速获胜，我只是复制了 grid.inlinedit.js 中的代码，以便重新创建在顶部和底部栏中执行相同操作的按钮......它似乎有效。

            if(o.add) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.addtext,
                title : o.addtitle,
                buttonicon : o.addicon,
                id : $t.p.id+"_iladd",
                onClickButton : function ( e ) {
                    $($t).jqGrid('addRow', o.addParams);
                    if(!o.addParams.useFormatter) {
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                    }
                }
            });

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.addtext,
                title : o.addtitle,
                buttonicon : o.addicon,
                id : $t.p.id+"_top_iladd",
                onClickButton : function ( e ) {
                    $($t).jqGrid('addRow', o.addParams);
                    if(!o.addParams.useFormatter) {
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                    }
                }
            });

        }
        if(o.edit) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.edittext,
                title : o.edittitle,
                buttonicon : o.editicon,
                id : $t.p.id+"_iledit",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('editRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.edittext,
                title : o.edittitle,
                buttonicon : o.editicon,
                id : $t.p.id+"_top_iledit",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('editRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").addClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });


        }
        if(o.save) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.savetext || '',
                title : o.savetitle || 'Save row',
                buttonicon : o.saveicon,
                id : $t.p.id+"_ilsave",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        if($("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID($t.p.id) ).hasClass("jqgrid-new-row")) {
                            var opers = $t.p.prmNames,
                            oper = opers.oper;
                            if(!o.editParams.extraparam) {
                                o.editParams.extraparam = {};
                            }
                            o.editParams.extraparam[oper] = opers.addoper;
                        }
                        $($t).jqGrid('saveRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.savetext || '',
                title : o.savetitle || 'Save row',
                buttonicon : o.saveicon,
                id : $t.p.id+"_top_ilsave",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        if($("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID($t.p.id) ).hasClass("jqgrid-new-row")) {
                            var opers = $t.p.prmNames,
                            oper = opers.oper;
                            if(!o.editParams.extraparam) {
                                o.editParams.extraparam = {};
                            }
                            o.editParams.extraparam[oper] = opers.addoper;
                        }
                        $($t).jqGrid('saveRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
        }
        if(o.cancel) {
            $($t).jqGrid('navButtonAdd', elem,{
                caption : o.canceltext || '',
                title : o.canceltitle || 'Cancel row editing',
                buttonicon : o.cancelicon,
                id : $t.p.id+"_ilcancel",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('restoreRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');

            $($t).jqGrid('navButtonAdd', '#' + $($t)[0].id + '_toppager_left',{
                caption : o.canceltext || '',
                title : o.canceltitle || 'Cancel row editing',
                buttonicon : o.cancelicon,
                id : $t.p.id+"_top_ilcancel",
                onClickButton : function ( e ) {
                    var sr = $($t).jqGrid('getGridParam','selrow');
                    if(sr) {
                        $($t).jqGrid('restoreRow', sr, o.editParams);
                        $("#"+$t.p.id+"_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_iledit").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilsave").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iladd").removeClass('ui-state-disabled');
                        $("#"+$t.p.id+"_top_iledit").removeClass('ui-state-disabled');
                    } else {
                        $.jgrid.viewModal("#alertmod",{gbox:"#gbox_"+$t.p.id,jqm:true});$("#jqg_alrt").focus();                         
                    }
                }
            });
            $("#"+$t.p.id+"_top_ilcancel").addClass('ui-state-disabled');
        }

【讨论】：

这与我在回答中建议的大致相同。我认为只有一个人不应该总是在'#' + $($t)[0].id + '_toppager_left' 中添加按钮。已经有参数elem。我只会在elem 寻呼机中添加按钮，但我会使用从id 的elem 构造的ID。此外，我会对iladd、iledit 等按钮使用其他类，然后禁用或启用按钮的代码可以更短。我还将使用一些其他规则来构造按钮的 id，以使其与 inlineNav 添加的按钮不会发生冲突。
如果您更新问题的文本，如果您再发布一个答案，请对我的答案发表简短评论。只有在这种情况下我才会收到通知。