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\" onclick=\"bindAttachment(" + rows.id + ")\"><i class=\"icon-cogs purple\" style=\"font-size:15px\"></i></a><a href=\"#\" style=\"margin-left:12px\" title=\"上传计划单\" onclick=\"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;" onchange="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事件，事件触发操作为：

onchange="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表格的某一字段的每一行添加自定义按钮、在翻页条添加自定义按钮）都已完成。