jqGrid常用功能设置

wysjwh

2013-06-13

这是随便写的一个例子，其中主要为大家演示了一些常用操作：

页面效果如下：
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对象。

最后，例子很随意，凑合着看吧

html代码 jqgrid meta css jquery