08jqGrid - 自定义按钮

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/89486141

自定义按钮语法

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"

		});;
}

关键代码：