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 CDATAwhile($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.提交的資料

_searchfalsend1311834540399page1rows10sidxidsorddesc

_searchtruefiltersnd1311836578173page1rows10searchFieldidsearchOpereqsearchStringsidxidsorddesc

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