自定义按钮语法
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}); jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters}); { caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}
参数解析：
- caption：按钮名称，可以为空，string类型
- buttonicon：按钮的图标，string类型，必须为UI theme图标
- onClickButton：按钮事件，function类型，默认null
- position：first或者last，按钮位置
- title：string类型，按钮的提示信息
- cursor：string类型，光标类型，默认为pointer
- id：string类型，按钮id
例子
如果设置多个按钮（index.js代码）：
$(function() { //页面加载完成之后执行 pageInit(); }); function pageInit() { //创建jqGrid组件 jQuery("#list2").jqGrid({ url: 'data/JSONData.json', //组件创建完成之后请求数据的url datatype: "json", //请求数据返回的类型。可选json,xml,txt colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], //jqGrid的列显示名字 colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式..... {name: 'id',index: 'id',width: 55}, {name: 'invdate',index: 'invdate',width: 90}, {name: 'name',index: 'name asc, invdate',width: 100}, {name: 'amount',index: 'amount',width: 80,align: "right"}, {name: 'tax',index: 'tax',width: 80,align: "right"}, {name: 'total',index: 'total',width: 80,align: "right"}, {name: 'note',index: 'note',width: 150,sortable: false} ], rowNum: 10, //一页显示多少条 rowList: [10, 20, 30], //可供用户选择一页显示多少条 pager: '#pager2', //表格页脚的占位符(一般是div)的id sortname: 'id', //初始化的时候排序的字段 sortorder: "desc", //排序方式,可选desc,asc mtype: "get", //向后台请求数据的ajax的类型。可选post,get viewrecords: true, caption: "JSON Example" //表格的标题名字 }); /*创建jqGrid的操作按钮容器*/ /*可以控制界面上增删改查的按钮是否显示*/ jQuery("#list2") .jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false }).navButtonAdd("#pager2", { caption: "Add", buttonicon: "ui-icon-add", onClickButton: function() { alert("Adding Row"); }, position: "last" }).navButtonAdd('#pager2', { caption: "Del", buttonicon: "ui-icon-del", onClickButton: function() { alert("Deleting Row"); }, position: "last" });; }
关键代码：
