jquery表格jqGrid操作笔记。

1.引用

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<link type="text/css" href="css/ui.jqgrid.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

注意jqGrid放grid.locale-cn.js的后面。否则会报错。

2.纯js示例

jQuery("#editgrid").jqGrid({
                datatype: "local",
                height: 450,
                colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
                colModel:[
                        {name:'id',index:'id', width:200, sorttype:"int"},
                        {name:'userName',index:'userName', width:200},
                        {name:'gender',index:'gender', width:90},
                        {name:'email',index:'email', width:125,sorttype:"string"},
                        {name:'QQ',index:'QQ', width:100},                
                        {name:'mobilePhone',index:'mobilePhone', width:120},                
                        {name:'birthday',index:'birthday', width:100, sorttype:"date"}                
                ],
                sortname:'id',
                sortorder:'asc',
                viewrecords:true,
                rowNum:10,
                rowList:[10,20,30],
                pager:"#gridPager",
                caption: ""
        }).navGrid('#gridPager',{edit:true,add:true,del:true});

        var mydata = [
                {id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
                {id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
                {id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
                {id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"}
                ];
        for(var i=0;i<=mydata.length;i++)
                jQuery("#editgrid").jqGrid('addRowData',i+1,mydata[i]);

<table id="editgrid"></table>
<div id="gridPager"></div> 

3.可编辑字段的配置

   	colModel:[
   		{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},formatter: 'integer', formatoptions:{thousandsSeparator:","}},
   		{name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10},formatter:'date', formatoptions: {srcformat:'Y-m-d',newformat:'Y/m/d'}},
   		{name:'name',index:'name', width:90,editable:true,editoptions:{size:25}},
   		{name:'amount',index:'amount', width:60, align:"right",editable:true,formatter:'currency',formatoptions:{thousandsSeparator:" ", decimalSeparator:",", prefix:"€"}},
   		{name:'tax',index:'tax', width:60, align:"right",editable:true,editoptions:{size:10}},		
   		{name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},
		{name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
		{name:'ship_via',index:'ship_via',width:70, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}},
   		{name:'note',index:'note', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}}		
   	],

4.服务器返回的json格式

$responce->page = 2;//当前页
$responce->total = 3;//总页
$responce->records = 20;//总条数
for($i=0;$i<10;$i++){
	$responce->rows[$i]['id']=$i;
	$responce->rows[$i]['cell']=array($i,date("Y-m-d H:i:s"),'中主');
}
echo json_encode($responce);

5.xml格式

echo "<?xml version='1.0' encoding='utf-8'?$et\n";
		echo "<rows>";
		echo "<page>1</page>";
		echo "<total>1</total>";
		echo "<records>1</records>";
		// be sure to put text data in CDATA
		while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
			echo "<row>";			
			echo "<cell>". $row[account_id]."</cell>";
			echo "<cell>". $row[name]."</cell>";
			echo "<cell>". $row[acc_num]."</cell>";
			echo "<cell>". $row[debit]."</cell>";
			echo "<cell>". $row[credit]."</cell>";
			echo "<cell>". $row[balance]."</cell>";
			echo "<cell>". rand(0,1)."</cell>";
			echo "<cell>". $row[level]."</cell>";
			echo "<cell>". $row[lft]."</cell>";
			echo "<cell>". $row[rgt]."</cell>";
			if($row[rgt] == $row[lft]+1) $leaf = 'true';else $leaf='false';
			echo "<cell>".$leaf."</cell>";
			echo "<cell>true</cell>";
			echo "</row>";
		}
		echo "</rows>";	

6.提交的数据

_search	false
nd	1311834540399
page	1
rows	10
sidx	id
sord	desc

_search	true
filters	
nd	1311836578173
page	1
rows	10
searchField	id
searchOper	eq
searchString	
sidx	id
sord	desc

7.单元格编辑

	cellurl:"<?php echo site_url("admin/demo/edit2")?>",
	cellEdit: true,

参考：

http://blog.sina.com.cn/s/blog_4496b0890100ri4d.html

http://blog.csdn.net/gengv/article/details/5714834