jqGrid常用功能设置
这是随便写的一个例子,其中主要为大家演示了一些常用操作:
页面效果如下:
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/redmond/jquery-ui-1.8.2.custom.css">
<link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="../js/jqGrid/themes/ui.multiselect.css">
<!-- 引入js 顺序:jquery、jquery-ui、grid.locale-cn、jqGrid -->
<script type="text/javascript" src="../js/jqGrid/js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jqGrid/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="../js/jqGrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="../js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/jqGrid/js/grid.common.js"></script>
<script>
$(function(){
$("#list4").jqGrid({
url:'',
datatype: "local",
height: 250,
colNames:['Check','InvNo','Date', 'Client', 'Amount','Tax','Total','Notes','Modify','Delete'],
colModel:[
{name:'title',index:'title',width:60, align:"center",
formatter:function(cellvalue, options, rowObject){
return "<input type='radio' name='myId' value='"+cellvalue+"' onclick=\"radioSelect('myId', 'listTable')\" />";
}
},
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100,
cellattr:function(rowId, val, rawObject, cm, rdata) {
return "style='color:red;font-weight:bold;text-decoration:underline'";
}
},
{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},
{name:'operMod',index:'operMod',align:"center",width:"80",
formatter: function (value, grid, rows, state) {
return "<a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + value + ")\">Edit</a>"
}
},
{name:'operDel',index:'operDel', width:80,align:"center"}
],
rownumbers:true,
rownumWidth:40,
caption: "Manipulating Array Data",
gridComplete: function () {
var ids = jQuery("#list4").jqGrid("getDataIDs");
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
modify = "<a href=\"#\" style=\"color:#f60\" onclick=\"Delete(" + id + ")\">Delete</a>";
jQuery("#list4").jqGrid("setRowData", id, { operDel: modify });
}
}
});
var 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"}
];
for(var i=0;i<=mydata.length;i++)
$("#list4").jqGrid('addRowData',i+1,mydata[i]);
});
</script>
</head>
<body>
<table id="list4"></table>
<div id="pager"></div>
</body>
</html>
在这个例子中,有一下几个知识点:
1)设置No自增列:
colNames和colModel中不需要做任何设置,只需要添加 rownumbers:true,另外rownumWidth:40是设置这一列的宽度值。
rownumbers:true, rownumWidth:40,
2)添加一个radioButton列:
在formatter中添加function,返回一个html字符串
{name:'title',index:'title',width:60, align:"center", formatter:function(cellvalue, options, rowObject){ return "<input type='radio' name='myId' value='"+cellvalue+"' onclick=\"radioSelect('myId', 'listTable')\" />"; } },
3)给行内添加按钮:
方法一:在colModel中的列属性中添加:
{name:'operMod',index:'operMod',align:"center",width:"80", formatter: function (value, grid, rows, state) { return "<a href=\"#\" style=\"color:#f60\" onclick=\"Modify(" + value + ")\">Edit</a>" } }
方法二:在gridComplete中添加:
gridComplete: function () { var ids = jQuery("#list4").jqGrid("getDataIDs"); for (var i = 0; i < ids.length; i++) { var id = ids[i]; modify = "<a href=\"#\" style=\"color:#f60\" onclick=\"Delete(" + id + ")\">Delete</a>"; jQuery("#list4").jqGrid("setRowData", id, { operDel: modify }); } }
4)改变list中某一列数据的样式,例如颜色,字体等
利用列的cellattr属性:
{name:'name',index:'name', width:100, cellattr:function(rowId, val, rawObject, cm, rdata) { return "style='color:red;font-weight:bold; text-decoration:underline'"; } }
5)关于jqGrid的theme, 从3.5版本开始,jqGrid完全支持jquery UI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的theme
6)关于datatype: "local"
jqGrid可支持的数据类型:xml、json、jsonp、local or clientSide、xmlstring、jsonstring
、script、function (…)。
在初始化的时候,若不想执行表格的初始化方法,则需要设置url为空,datatype设置为"local",否则会有js错误,导致页面上的button按钮不起作用
设置url的值,在.net mvc架构下,即“/controller/action/”这样的格式,第一个"/"是必须的,否则不能进入后台的action中。
在设置了url后,还要注意的问题就是datatype要与postData的数据类型相匹配,否则会有错误。例如datatype:"json",那么postData需要传的是json对象。
最后,例子很随意,凑合着看吧