添加按钮到新的顶部工具栏？

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

菜单与网格左下角的菜单相同。 如果用户将行列表设置为高，则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(){ } }); 

非常感谢

Answer 1

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

我将答案从你的答案修改为以下演示 ，它可以满足您的需求：

相应的代码如下：

 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:'Ym-d', newformat:'dM-Y'}, srcfmt:'dM-Y', datefmt:'dM-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"); } });