jqgrid表格列选项edittype为text、checkbox、select、textarea、function、超链接，添加自定义按钮

jqgrid数据来源：

①当为静态数据时，可直接在页面中定义，例如：

var grid_data = 
			[ 
				{id:"1", name:"张三", note:"长文本1", stock:"是", ship:"一年级", sdate:"2007-12-03"},
				{id:"2", name:"李四", note:"长文本2", stock:"否", ship:"二年级", sdate:"2007-12-03"},
				{id:"3", name:"王二", note:"长文本3", stock:"否", ship:"五年级", sdate:"2007-12-03"},
				{id:"4", name:"小五", note:"长文本4", stock:"是", ship:"四年级", sdate:"2007-12-03"},
				{id:"5", name:"六六", note:"长文本5", stock:"是", ship:"三年级", sdate:"2007-12-03"},
				{id:"6", name:"九儿", note:"长文本6", stock:"否", ship:"六年级", sdate:"2007-12-03"},
				{id:"7", name:"石榴", note:"长文本7", stock:"是", ship:"一年级", sdate:"2007-12-03"},
				{id:"8", name:"一一", note:"长文本8", stock:"否", ship:"三年级", sdate:"2007-12-03"}
			];

②当为动态数据时，需利用ajax从后台获取数据，例如：

var grid_data = [];

/**************从后台获取贸易商数据********************/    
			$.ajax({
			    async:false,
				cache:false,
	 			url: "goods_findPageGoodsByTrader.do",
				data: dataStr,	//需要向后台传递的参数
	            type: 'GET',
				success: function(result){
					var result = eval('('+ result +')');
					if(result.root != undefined && result.root.length > 0){
						var resultContent = result.root;
						var grid_child;
						for ( var i = 0; i < resultContent.length; i++) {
							grid_child = {id:resultContent[i].goodsId, 
									goodsOrder:resultContent[i].goodsOrder, goodsPackage:resultContent[i].goodsPackage, goodsName:resultContent[i].goodsName,
									goodsType:resultContent[i].goodsType, goodsMaterial:resultContent[i].goodsMaterial, goodsNumber:resultContent[i].goodsNumber, goodsWeight:resultContent[i].goodsWeight, 
									goodsWarranty:resultContent[i].goodsWarranty, goodsOrigin:resultContent[i].goodsOrigin, originName:resultContent[i].originName, goodsStatus:resultContent[i].goodsStatus,
									goodsContractreadtime:resultContent[i].goodsContractreadtime, dzPurchaseContractNum:resultContent[i].dzPurchaseContractNum, groupPurchaseContractNum:resultContent[i].groupPurchaseContractNum};
							grid_data[i] = grid_child;    
						}
					}
				},
				error:function(e){alert("获取贸易商物资信息失败");}
			});

设置列名称：

/****列显示名称******/
					colNames:[' ', '绑定及上传', 'id','日期','名称', '复选框', '下拉框', '备注', '超链接1', '超链接2', '上传照片'],

edittype的各种形式：

①jqgrid表格列默认为text：

{name:'id', index:'id', width:60, sorttype:"int", editable: true, hidden:true},

②jqgrid表格列设置为时间格式，并且利用datepicker时间插件，例如：

/*****unformat可以为formatter指定自定义格式的方法*****/
						/******unformat: pickDate   此处使用了datepicker插件来显示时间******/
						{name:'sdate', index:'sdate', width:60, editable:true, sorttype:"date", unformat: pickDate},

此时，pickDate需自己定义，例如：

function pickDate( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=text]')
								.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
					}, 0);
				}

③jqgrid表格列设置为checkbox复选框，例如：

/*******edittype:"checkbox", editoptions:{value:"是:否"}  复选框。   unformat:aceSwitch 自定义设置复选框样式***********/
						{name:'stock', index:'stock', width:60, editable: true, edittype:"checkbox", editoptions:{value:"是:否"}, unformat:aceSwitch},

此处，checkbox复选框样式利用了ace模板的样式，需自定义其样式，例如：

function aceSwitch( cellvalue, options, cell ) {
					setTimeout(function(){
						$(cell) .find('input[type=checkbox]')
								.wrap('<label class="inline" />')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}

④jqgrid表格列设置为select下拉框，例如：

方法一，字符串形式：

{name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value:"一:一年级;二:二年级;三:三年级;四:四年级;五:五年级;六:六年级"}},

方法二，对象形式：

{name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value:{一:'一年级', 二:'二年级', 三:'三年级'}},

方法三，调用函数返回形式：

{name:'ship', index:'ship', width:60, editable: true, edittype:"select", editoptions:{value: getVal()},

此时需要自定义这里的getVal()函数，以返回下拉框中的内容，例如：

/********获取贸易商名称下拉列表*************/
			function getVal(){
				var originNameVal = "";
				var i = 0;
				$.ajax({
					type : "GET",
					async : false,
					data: dataStr,
					url : "trader_queryPageTrader.do",	//从后台获取数据
					success : function(result){
						var result = eval('('+ result +')');
						var resultContent = result.root;
						for(i; i < resultContent.length; i++){
					    	if(i != resultContent.length - 1){
					    		originNameVal += resultContent[i].traderName + ":" + resultContent[i].traderName + ";";
					    	}else{
					    		originNameVal += resultContent[i].traderName + ":" + resultContent[i].traderName;
					    	}
						}  
					}
				});
				return originNameVal;
			}

⑤jqgrid表格列设置为textarea，例如：

{name:'note', index:'note', width:60, sortable:false, editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"10"}},

⑥jqgrid表格列设置为超链接：

方法一：

{name:'monitor',index:'monitor', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../index.html\">监控</a>";}},

方法二，在表格加载完成时，为每一列设置超链接，例如：

{name:'detail',index:'detail', width:60, sortable:false, editable:false},

gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接 
						var ids=jQuery("#grid-table").jqGrid('getDataIDs'); 					//获取单个id	
						for(var i = 0; i<ids.length; i++){ 
							var id = ids[i];
							//var rowData = $("#grid-table").jqGrid('getRowData',id);
							//var goodsStatus = rowData.goodsStatus;
							
							details = '<a href="../index.html?id='+id+'&goodsStatus=2">查看附件</a>';		//向跳转页面传递参数
		                    jQuery("#grid-table").jqGrid('setRowData', ids[i], { detail: details});
							
						} 
					},

这里，获取jqgrid表格行id为：

var ids=jQuery("#grid-table").jqGrid('getDataIDs');

获取到的id是一个数组。

获取jqgrid表格行数据为：

var rowData = $("#grid-table").jqGrid('getRowData',id);

获取到的行数据是一个对象。

此时，若想取出行数据中的某一个字段，应该是：

var goodsStatus = rowData.goodsStatus;

法二是先规定一个超链接的样式，例如：

details = '<a href="../index.html?id='+id+'&goodsStatus=2">查看附件</a>';

然后为每一行的此字段，都设置这个超链接样式，例如：

jQuery("#grid-table").jqGrid('setRowData', ids[i], { detail: details});

⑦jqgrid表格列设置为自定义按钮，例如：

{name:'myac222',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter: function (value, grid, rows, state) {
								return "<a href=\"#\" title=\"绑定合同\" style=\"margin-left:10px\" οnclick=\"bindAttachment(" + rows.id + ")\"><i class=\"icon-cogs purple\" style=\"font-size:15px\"></i></a><a href=\"#\" style=\"margin-left:12px\" title=\"上传计划单\" οnclick=\"uploadAttachment(" + rows.id + ")\"><i class=\"icon-cloud-upload blue\" style=\"font-size:15px\"></i></a>"; 
							}
						},

以绑定合同为例，当点击“绑定合同”自定义按钮时，将触发bindAttachment(id)事件，从而打开自定义的绑定合同dialog对话框，如下：

<!-- 绑定合同号dialog  -->
								<div id="bindContractDialog" title="绑定合同号" style="display:none;">
							 	    <table class="exhibit_table">  
									    <tr>  
									        <td style="width:80px; padding:10px;" align="right">订单号</td>  
									        <td class="input-icon input-icon-right">
									        	<input type="text" id="orderId1" name="orderId"/>
									        	<i class="icon-edit green" style="margin-top:5px;"></i>
									        </td>
									    </tr>
									    <tr>  
									        <td style="width:80px; padding:10px;" align="right">大宗物资网合同号</td>  
									        <td class="input-icon input-icon-right">
									        	<span style="margin-left:160px; width:25px; overflow:hidden;"><select id="DzContractNum" name="dzContractNum" style="width:185px; margin-left:-160px;" οnchange="this.parentNode.nextSibling.value=this.value">
													</select>
												</span><input id="DzContractNum2" name="DzContractNum" style="width:160px; height:30px; position:absolute; left:0px;">
									        </td>  
									    </tr>  
									</table> 
						 		</div>

这里要注意，大宗物资网合同号是一个下拉框，且这个下拉框不仅支持下拉，而且支持用户输入，原理是，将下拉框和input输入框重叠在一起，且在下拉框中加入onchange事件，事件触发操作为：

οnchange="this.parentNode.nextSibling.value=this.value"



所以<select>与其父节点<span>之间不能有空格或换行符，否则浏览器会将空格或换行符识别为<span>的父节点，将不会出现下拉框可输入的效果。

然后从后台获取下拉框的内容，如下：

/********取大宗物资网合同号**********/
			$.ajax({
				async:false,
				cache:true,
	            type: "POST",  
	            url: "goodsDzContract_queryDzPurchaseNum.do",
	            success: function(result){
					var result = eval('('+ result +')');
					if(result != undefined && result.length > 0){
	                	for ( var i = 0; i < result.length; i++) {	
	                        var opt = "<option value='" + result[i].purchaseNum + "'>" + result[i].purchaseNum + "</option>";  
	                        $("#DzContractNum").append(opt);
	                    } 
	                }
	            },  
	            error: function() {  
	                alert("获取大宗物资网合同号失败")  
	            }  
	        });


定义好dialog的样式后，再定义bindAttachment(id)事件，此事件能将此dialog打开，供用户输入，如下所示：

/*********绑定合同号弹出框************/
			function bindAttachment(id){
				var rowData = $("#grid-table").jqGrid('getRowData',id);
				var goodsOrder = rowData.goodsOrder;
				$("#orderId1").val(goodsOrder);			//订单号:document.getElementById("orderId").value = goodsOrder;
				$("#bindContractDialog").dialog({ 
					autoOpen:true,
					height:300, 
					width:330,  
					resizable:false, 
					modal:true, //这里就是控制弹出为模态 
					buttons:{ 
						"确定":function(){
							var id = rowData.id;
							var dzPurchaseContractNum = $("#DzContractNum2").val();
							//向后台提交数据
							$.ajax({
								async:false,
								cache:true,
							    type: "POST",
							    data:{
									id:id,
									dzPurchaseContractNum:dzPurchaseContractNum,
								}, 
							    url: "goods_boundContractNum.do", //获取json数据  
							    success: function(){
									alert("绑定合同号成功");
									window.location.href = "./traderGoodsInfo.html";
							    },  
							    error: function() {
							        alert("绑定合同号失败")  
							    }  
							});
							$(this).dialog("close"); 
						},  
						"取消":function(){$(this).dialog("close");} 
					}
				});
			}

样式如下图所示：







在翻页条添加自定义按钮：
①添加一个“|”分隔符，如下：

jQuery(grid_selector).jqGrid().navSeparatorAdd(pager_selector,				//navSeparatorAdd是增加一个|进行按钮分割.
						{sepclass : "ui-separator",sepcontent: ''}
				)

②添加自定义按钮，当点击按钮时，弹出绑定合同的dialog对话框，如下：


jQuery(grid_selector).jqGrid().navButtonAdd(pager_selector,{
					/**************
						caption：按钮名称，可以为空，string类型 
						buttonicon：按钮的图标，string类型，必须为UI theme图标 
						onClickButton：按钮事件，function类型，默认null 
						position：first或者last，按钮位置 
						title：string类型，按钮的提示信息 
						cursor：string类型，光标类型，默认为pointer 
						id：string类型，按钮id
					*********************/
					//绑定合同号按钮	
					caption:"",
					title:"绑定合同", 
					buttonicon : 'icon-cogs purple',
					onClickButton: function()
					{
						var id = $("#grid-table").jqGrid('getGridParam', 'selrow');
						if (id == null){
							alert("请选择一条记录");
						} else {
							bindAttachment(id);	//调用bindAttachment(id)函数以弹出dialog对话框
						}
					}
				})

效果如下图所示：


至此，jqgrid两种添加自定义按钮的方式（为jqgrid表格的某一字段的每一行添加自定义按钮、在翻页条添加自定义按钮）都已完成。