我正在尝试将按钮添加到新的顶部工具栏。我已经在顶部有一个工具栏用于搜索过滤,但我想在其上方放置一个新工具栏来添加菜单按钮。
菜单与网格左下角的菜单相同。如果用户将行列表设置为高,则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(){
}
});
非常感谢
答案 0 :(得分:8)
首先,我建议您阅读描述toppager如何工作的this和this旧答案。如果使用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",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");
}
});