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 ></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