jqgrid inlineNav cloneToTop? [英] jqgrid inlineNav cloneToTop?

问题描述

我正在使用 jqGrid，并且我有一个寻呼机(带有查看和刷新)和一个 inlineNav(带有添加、编辑、保存、取消)的组合.

I am playing with jqGrid and I have a combination of both a pager (with View and Refresh) and an inlineNav (with Add, Edit, Save, Cancel).

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

I have toppager:true and cloneToTop:true which places the pager controls, both at top and bottom. However I can't seem to do the same with my inlineNav.

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

Full code follows, but I tried to do the following, but the top buttons do not respond properly and it's a bit of a mess:

$("#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
    });

提前致谢！

推荐答案

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

I analysed your problem. First of all the option cloneToTop: true is supported by navGrid, but not by inlineNav. Moreover the ids of the buttons of will be constructed using the grid id as the prefix. As the result one will have

list_iladd, list_iledit, list_ilsave, list_ilcancel

作为 ID.另一方面，标准 navGrid 按钮的 id 在 cloneToTop: true:

as ids. On the other side the ids of the standard navGrid buttons from will have the following ids after cloneToTop: true:

view_list, del_list,
view_list_top, del_list_top

所以不能只用两个寻呼机调用 navGrid 两次:

So one can't just call navGrid twice with both pager:

$("#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重复(请参阅演示).

One will receive as the results id duplicates (see the demo).

在第二次调用 inlineNav 之前进行手动 id 修改也不会真正有帮助(请参阅 下一个演示) 因为点击内联按钮后将执行的代码使用相同的 id 构建规则.因此，只有具有原始 ID 的按钮才会被禁用或启用.

Making manual id modifications before calling the inlineNav at the second time will also not really help (see the next demo) because the code which will be executed after clicking on the inline buttons use the same rules of id building. So only the buttons having original ids will be disabled or enabled.

我可以总结一下:inlineNav 的当前实现不支持顶部分页器.我建议您只使用一次 inlineNav.如果您需要在第二个寻呼机中有图标，您最好检查 inlineNav 的源代码(请参阅 here 例如)并以相同的方式添加关于 navButtonAdd 的新按钮并使用其他 ID.

I can summarize: the current implementation of inlineNav don't support the top pager. I would recommend you use inlineNav only once. If you need to have the icons in the second pager you should better examine the source code of inlineNav (see here for example) and add in the same way new buttons with respect of navButtonAdd and using another ids.

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

I hope that in the next version the code of inlineNav will be extended to support two pager at the same time.

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

UPDATED: I forgot to mention, that I fixed a little position of the text relative to icons in the navigator bars. It is not the main subject of your question, but probably it will be interesting for you too:

.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;
}

这篇关于jqgrid inlineNav cloneToTop?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！