我正在尝试将按钮添加到新的顶部工具栏。我已经在顶部有一个用于搜索过滤的工具栏，但我想在其上方放置一个新的工具栏以添加菜单按钮。

菜单与网格左下方的菜单相同。如果用户将行列表设置在较高位置，Juse 会让用户更轻松，因此他们不必向下滚动到底部。

执行此操作的最佳方法是什么？欢迎使用示例，这对我来说是新手。

这是我创建工具栏和按钮的代码。

JS

// Toolbar
$("#customer_grid").jqGrid('filterToolbar', {searchOnEnter: false});

// Bottom left buttons
$("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Add Customer",title:"Add Customer",buttonicon :'ui-icon-plus',
            onClickButton:function(){

            }
    });

    $("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
            onClickButton:function(){
                    $("#customer_grid")[0].clearToolbar()
            }
    });
    $("#customer_grid").jqGrid('navButtonAdd',"#customer_grid_pager",{caption:"Close",title:"Close Search",buttonicon :'ui-icon-close',
            onClickButton:function(){

            }
    });

非常感谢

最佳答案

首先我推荐你阅读this和 this描述toppager如何工作的旧答案。如果您使用 toppager:true jqGrid 选项，附加的分页器工具栏将在搜索工具栏上方创建。如果您使用导航器的 cloneToTop:true 选项，所有标准导航按钮都将添加到两个工具栏中。因为 toppager 的名称将根据网格 id 的修复规则构建:网格 id="list"的“list_toppager”(在您的情况下为“customer_grid_toppager”)，您可以使用相同的 navButtonAdd用于将按钮添加到顶部导航栏的方法，就像添加到底部导航栏一样。您应该只使用传呼机的另一个 ID(在您的情况下是“#customer_grid_toppager”而不是“#customer_grid_pager”)。

我修改了the demo来自 the answer为您the following demo ，它做你需要的:

对应代码如下:

var mygrid = $("#list"),
    pagerSelector = "#pager",
    mydata = [
       {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
       {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
       {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
       {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
    ],
    myAddButton = function(options) {
        mygrid.jqGrid('navButtonAdd',pagerSelector,options);
        mygrid.jqGrid('navButtonAdd','#'+mygrid[0].id+"_toppager",options);
    };

mygrid.jqGrid({
    datatype: 'local',
    data: mydata,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id',width:70,sorttype:'int',
         searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
        {name:'invdate',index:'invdate',width:80,align:'center',sorttype:'date',
         formatter:'date',formatoptions:{srcformat:'Y-m-d', newformat:'d-M-Y'},
         srcfmt:'d-M-Y', datefmt:'d-M-Y',
         searchoptions: {
             sopt:['eq','ne','lt','le','gt','ge'],
             dataInit:function(elem) {
                 setTimeout(function() {
                     $(elem).datepicker({
                         dateFormat: 'dd-M-yy',
                         autoSize: true,
                         //showOn: 'button', // it dosn't work in searching dialog
                         changeYear: true,
                         changeMonth: true,
                         showButtonPanel: true,
                         showWeek: true
                     });
                 },100);
             }
         }},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
        {name:'note',index:'note', width:150, sortable:false}
    ],
    height: '100%',
    width: 720,
    toppager: true,
    gridview: true,
    pager: pagerSelector,
    rowNum: 10,
    rowList: [5, 10, 20, 50],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    caption: 'Add buttons to both top and bottom toolbars'
});
mygrid.jqGrid('navGrid',pagerSelector,
              {cloneToTop:true,edit:false,add:false,del:false,search:true});
mygrid.jqGrid('filterToolbar',
              {stringResult:true, searchOnEnter:true, defaultSearch:'cn'});

myAddButton ({
    caption:"Add Customer",
    title:"Add Customer",
    buttonicon :'ui-icon-plus',
    onClickButton:function(){
        alert("Add Customer");
    }
});
myAddButton ({
    caption:"Clear",
    title:"Clear Search",
    buttonicon:'ui-icon-refresh',
    onClickButton:function(){
        mygrid[0].clearToolbar();
    }
});
myAddButton ({
    caption:"Close",
    title:"Close Search",
    buttonicon:'ui-icon-close',
    onClickButton:function(){
        alert("Close Search");
    }
});

关于javascript - 将按钮添加到新的顶部工具栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5518646/