我正在尝试将按钮添加到新的顶部工具栏.我已经在顶部有一个用于搜索过滤的工具栏,但我想在其上方放置一个新工具栏来添加菜单按钮.
菜单与网格左下角的菜单相同.如果用户将行列表设置为高,则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',{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',onClickButton:function(){
$("#customer_grid")[0].clearToolbar()
}
});
$("#customer_grid").jqGrid('navButtonAdd',{caption:"Close",title:"Close Search",buttonicon :'ui-icon-close',onClickButton:function(){
}
});
非常感谢
解决方法
首先,我建议您阅读
this和
this旧答案,其中描述了toppager的工作原理.如果使用toppager：true jqGrid选项,将在搜索工具栏上方创建其他分页器工具栏.如果使用导航器的cloneToTop：true选项,则将在两个工具栏中添加所有标准导航按钮.因为toppager的名称将根据网格id的修复规则构建：“list_toppager”用于grid id =“list”(在你的情况下为“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",{id:"5",invdate:"2007-10-05",{id:"6",invdate:"2007-09-06",{id:"7",{id:"8",invdate:"2007-10-03",{id:"9",{id:"10",{id:"11",{id:"12",{id:"13",{id:"14",{id:"15",{id:"16",{id:"17",{id:"18",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','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',align:"right",sorttype:"float"},{name:'tax',index:'tax',{name:'total',index:'total',{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',{cloneToTop:true,edit:false,add:false,del:false,search:true});
mygrid.jqGrid('filterToolbar',{stringResult:true,searchOnEnter:true,defaultSearch:'cn'});
myAddButton ({
caption:"Add Customer",onClickButton:function(){
alert("Add Customer");
}
});
myAddButton ({
caption:"Clear",buttonicon:'ui-icon-refresh',onClickButton:function(){
mygrid[0].clearToolbar();
}
});
myAddButton ({
caption:"Close",buttonicon:'ui-icon-close',onClickButton:function(){
alert("Close Search");
}
});
