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,
参考：