zoukankan html css js c++ java
jqGrid 最常用的属性和事件，供平时参考（转）

[html] 
<html>  
 ...  
 <table id="list1"></table>  
 <div id="pager1"></div>  
 ...   
 <table id="list5"></table>   
 <div id="pager5"></div> <br />   
 <a href="#" id="a1">Get data from selected row</a>   
 <br />   
 <a href="#" id="a2">Delete row 2</a>   
 <br />   
 <a href="#" id="a3">Update amounts in row 1</a>   
 <br />   
 <a href="#" id="a4">Add row with id 99</a>  
 ...   
 <table id="list6"></table>   
 <div id="pager6"></div> <br />   
 <a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a>   
 <br />   
 <a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a>   www.2cto.com
 <br />   
 <a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a>   
 <br />   
 <a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a>   
 <br />   
 <a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a>   
 <br />   
 <a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a>   
 <br />   
 <a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');">Get Selected Rows</a>   
 <br />   
 <a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a>   
 <br />   
 <a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>  
 ...   
 <table id="list7"></table>   
 <div id="pager7"></div>   
 <br />   
 <a href="javascript:void(0)" id="s1">Set new url</a>   
 <br />   
 <a href="javascript:void(0)" id="s2">Set Sort to amount column</a>   
 <br />   
 <a href="javascript:void(0)" id="s3" >Set Sort new Order</a>   
 <br />   
 <a href="javascript:void(0)" id="s4">Set to view second Page</a>   
 <br />   
 <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a>   
 <br />   
 <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>  
  ...   
  <table id="list9"></table>   
  <div id="pager9"></div>   
  <br />   
  <a href="javascript:void(0)" id="m1">Get Selected id's</a>   
  <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>  
  ...   
  Invoice Header   
  <table id="list10"></table>   
  <div id="pager10"></div>   
  <br />   
  Invoice Detail   
  <table id="list10_d"></table>   
  <div id="pager10_d"></div>   
  <a href="javascript:void(0)" id="ms1">Get Selected id's</a>  
  ...   
  <table id="list11">  
  </table> <div id="pager11"></div>   
  <script src="subgrid.js" type="text/javascript"> </script>  
    
  ...   
  <div class="h">Search By:</div>   
  <div>   
    <input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch   
    <br/>   
    Code  
    <br />   
    <input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />   
  </div>   
  <div> Name<br>   
    <input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />   
    <button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>   
  </div>   
  <br />   
  <table id="bigset"></table>   
  <div id="pagerb"></div>   
  <script src="bigset.js" type="text/javascript"> </script>  
    
  ...   
  <table id="list13"></table>   
  <div id="pager13"></div> <br />   
  <a href="javascript:void(0)" id="cm1">Get Selected id's</a>   
  <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a>   
  <script src="cmultiex.js" type="text/javascript"> </script>  
    
  ...   
  <table id="list15"></table>   
  <div id="pager15"></div>   
  <a href="javascript:void(0)" id="sids">Get Grid id's</a>  
  <br/>  
     
  ...   
  <table id="list17"></table>   
  <div id="pager17"></div>   
  <a href="javascript:void(0)" id="hc">Hide column Tax</a>  
  <br/>   
  <a href="javascript:void(0)" id="sc">Show column Tax</a>  
</html>  
 
<html>
 ...
 <table id="list1"></table>
 <div id="pager1"></div>
 ... 
 <table id="list5"></table> 
 <div id="pager5"></div> <br /> 
 <a href="#" id="a1">Get data from selected row</a> 
 <br /> 
 <a href="#" id="a2">Delete row 2</a> 
 <br /> 
 <a href="#" id="a3">Update amounts in row 1</a> 
 <br /> 
 <a href="#" id="a4">Add row with id 99</a>
 ... 
 <table id="list6"></table> 
 <div id="pager6"></div> <br /> 
 <a href="javascript:void(0)" id="g1" onclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a> 
 <br /> 
 <a href="javascript:void(0)" id="g2" onclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a> 
 <br /> 
 <a href="javascript:void(0)" id="g3" onclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a> 
 <br /> 
 <a href="javascript:void(0)" id="g4" onclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a> 
 <br /> 
 <a href="javascript:void(0)" id="g5" onclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a> 
 <br /> 
 <a href="javascript:void(0)" id="g6" onclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a> 
 <br /> 
 <a href="javascript:void(0)" id="g7" onclick="alert('See Multi select rows example');">Get Selected Rows</a> 
 <br /> 
 <a href="javascript:void(0)" id="g8" onclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a> 
 <br /> 
 <a href="javascript:void(0)" id="g9" onclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>
 ... 
 <table id="list7"></table> 
 <div id="pager7"></div> 
 <br /> 
 <a href="javascript:void(0)" id="s1">Set new url</a> 
 <br /> 
 <a href="javascript:void(0)" id="s2">Set Sort to amount column</a> 
 <br /> 
 <a href="javascript:void(0)" id="s3" >Set Sort new Order</a> 
 <br /> 
 <a href="javascript:void(0)" id="s4">Set to view second Page</a> 
 <br /> 
 <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a> 
 <br /> 
 <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>
  ... 
  <table id="list9"></table> 
  <div id="pager9"></div> 
  <br /> 
  <a href="javascript:void(0)" id="m1">Get Selected id's</a> 
  <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>
  ... 
  Invoice Header 
  <table id="list10"></table> 
  <div id="pager10"></div> 
  <br /> 
  Invoice Detail 
  <table id="list10_d"></table> 
  <div id="pager10_d"></div> 
  <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
  ... 
  <table id="list11">
  </table> <div id="pager11"></div> 
  <script src="subgrid.js" type="text/javascript"> </script>
  
  ... 
  <div class="h">Search By:</div> 
  <div> 
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch 
<br/> 
Code
<br /> 
<input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" /> 
  </div> 
  <div> Name<br> 
<input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" /> 
<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button> 
  </div> 
  <br /> 
  <table id="bigset"></table> 
  <div id="pagerb"></div> 
  <script src="bigset.js" type="text/javascript"> </script>
  
  ... 
  <table id="list13"></table> 
  <div id="pager13"></div> <br /> 
  <a href="javascript:void(0)" id="cm1">Get Selected id's</a> 
  <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a> 
  <script src="cmultiex.js" type="text/javascript"> </script>
  
  ... 
  <table id="list15"></table> 
  <div id="pager15"></div> 
  <a href="javascript:void(0)" id="sids">Get Grid id's</a>
  <br/>
   
  ... 
  <table id="list17"></table> 
  <div id="pager17"></div> 
  <a href="javascript:void(0)" id="hc">Hide column Tax</a>
  <br/> 
  <a href="javascript:void(0)" id="sc">Show column Tax</a>
</html>
[javascript] 
<script type="text/javascript">  
    jQuery().ready(function (){   
        //父Grid（主Grid）   
        jQuery("#list1").jqGrid({   
            url:'server.php?q=1',   
            //editurl:"someurl.php",   
            datatype: "json", //数据类型 datatype: "local", datatype: "xml",   
            colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],   
            colModel:[   
                {name:'id',index:'id', 75},   
                {name:'invdate',index:'invdate', 90},   
                {name:'name',index:'name', 100},   
                {name:'amount',index:'amount', 80, align:"right"},   
                {name:'tax',index:'tax', 80, align:"right"},   
                {name:'total',index:'total', 80,align:"right"},   
                {name:'note',index:'note', 150, sortable:false}   
            ],  
            rowNum:10, //每页数据显示条数   
            rowList:[10,20,30], //每页数据显示条数   
            pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面   
            sortname: 'id', //根据ID排序   
            viewrecords: true, //显示数据总记录数   
            sortorder: "desc", //倒序   
            hidegrid: false, //Grid是否隐藏   
            auto true, //自动列宽   
             500, //Grid 宽度   
            height: 200, //行高 height: "100%",   
            multiselect: true, //复选框   
            recordpos: 'left', //总记录显示位置：居左   
            mtype: "POST",  
            pgbuttons: false,   
            pgtext: false,   
            pginput: false,  
            multikey: "ctrlKey",  
            onSortCol: function(name,index){   
                //点击排序列，根据哪列排序   
                alert("Column Name: "+name+" Column Index: "+index);  
            },   
            ondblClickRow: function(id){   
                //双击行   
                alert("You double click row with id: "+id);  
            },   
            onSelectRow: function(ids) { //单击选择行   
                if(ids == null) {   
                    ids=0;   
                    if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {   
                        jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});  
                        jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');   
                    }   
                } else {   
                    jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});   
                    jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');   
                }   
            },  
            subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid   
            subGridUrl: 'subgrid.php?q=2', //内部Grid URL   
            subGridModel: [ { //内部Grid列   
                name : ['No','Item','Qty','Unit','Line Total'],   
                width : [55,200,80,80,80],  
                params: ['invdate'] //嵌套Grid参数             
            } ],  
            subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid   
                // we pass two parameters    
                // subgrid_id is a id of the div tag created whitin a table data    
                // the id of this elemenet is a combination of the "sg_" + id of the row    
                // the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use    
                // a method getRowData(row_id) - which returns associative array in type name-value    
                // here we can easy construct the flowing    
                var subgrid_table_id, pager_id;   
                subgrid_table_id = subgrid_id+"_t";   
                pager_id = "p_"+subgrid_table_id;   
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");   
                jQuery("#"+subgrid_table_id).jqGrid({   
                    url:"subgrid.php?q=2&id="+row_id,   
                    datatype: "xml",   
                    colNames: ['No','Item','Qty','Unit','Line Total'],   
                    colModel: [   
                        {name:"num",index:"num",80,key:true},   
                        {name:"item",index:"item",130},   
                        {name:"qty",index:"qty",70,align:"right"},   
                        {name:"unit",index:"unit",70,align:"right"},   
                        {name:"total",index:"total",70,align:"right",sortable:false}   
                    ],   
                    rowNum:20,   
                    pager: pager_id,   
                    sortname: 'num',   
                    sortorder: "asc",   
                    height: '100%' //自动适应行高   
                });   
                jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});   
            },   
            subGridRowColapsed: function(subgrid_id, row_id) {   
                // this function is called before removing the data    
                //var subgrid_table_id;    
                //subgrid_table_id = subgrid_id+"_t";    
                //jQuery("#"+subgrid_table_id).remove();    
            },  
            loadComplete: function(){ //加载完成（初始加载），回调函数   
                var ret;   
                alert("This function is executed immediately after
 data is loaded. We try to update data in row 13.");   
                ret = jQuery("#list15").jqGrid('getRowData',"13");   
                if(ret.id == "13"){   
                    jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})   
                }   
            },  
            caption:"Grid Example" //Grid名称   
        }).navGrid('#pager1',{edit:false,add:false,del:false});   
        //jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});    
        //添加查询文本框   
        jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});  
        //查询和刷新按钮居右   
        jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});   
        //编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>   
        jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3");   //<table id="rowed3"></table> <div id="prowed3"></div>   
          
        //子Grid   
        jQuery("#list10_d").jqGrid({   
            height: 100,   
            url:'subgrid.php?q=1&id=0',   
            datatype: "json",   
            colNames:[  
                'No','Item', 'Qty', 'Unit','Line Total'  
            ],   
            colModel:[   
                {name:'num',index:'num', 55},   
                {name:'item',index:'item', 180},   
                {name:'qty',index:'qty', 80, align:"right"},   
                {name:'unit',index:'unit', 80, align:"right"},   
                {name:'linetotal',index:'linetotal', 80,align:"right", sortable:false, search:false}   
            ],   
            rowNum:5,   
            rowList:[5,10,20],   
            pager: '#pager10_d',   
            sortname: 'item',   
            viewrecords: true,   
            sortorder: "asc",   
            multiselect: true,   
            caption:"Invoice Detail"   
        }).navGrid('#pager10_d',{add:false,edit:false,del:false});  
          
        jQuery("#a1").click( function(){   
            //获取Grid中选中的行id   
            var id = jQuery("#list5").jqGrid('getGridParam','selrow');   
            if (id) {   
                var ret = jQuery("#list5").jqGrid('getRowData',id);   
                alert("id="+ret.id+" invdate="+ret.invdate+"...");   
            } else {   
                alert("Please select row");  
            }   
        });   
        jQuery("#a2").click( function(){   
            //删除第12行   
            var su=jQuery("#list5").jqGrid('delRowData',12);   
            if(su)   
                alert("Succes. Write custom code to delete row from server");   
            else   
                alert("Allready deleted or not in list");   
        });   
        jQuery("#a3").click( function(){   
            //修改第11行   
            var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});   
            if(su)   
                alert("Succes. Write custom code to update row in server");   
            else   
                alert("Can not update");   
        });   
        jQuery("#a4").click( function(){   
            //添加第99行（id为99的）   
            var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};   
            var su=jQuery("#list5").jqGrid('addRowData',99,datarow);   
            if(su)   
                alert("Succes. Write custom code to add data in server");   
            else   
                alert("Can not update");   
        });  
          
        jQuery("#s1").click( function() {   
            //设置URL   
            jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");  
        });   
        jQuery("#s2").click( function() {   
            //设置排序列   
            jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");   
        });   
        jQuery("#s3").click( function() {   
            //设置升序或倒序   
            var so = jQuery("#list7").jqGrid('getGridParam','sortorder');   
            so = so=="asc"?"desc":"asc";   
            jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");   
        });   
        jQuery("#s4").click( function() {   
            //跳转到第二页   
            jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");   
        });   
        jQuery("#s5").click( function() {   
            //设置每页显示15行   
            jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");   
        });   
        jQuery("#s6").click( function() {   
            //设置URL和数据格式   
            jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");   
        });   
        jQuery("#s7").click( function() {   
            //设置Grid的名称   
            jQuery("#list7").jqGrid('setCaption',"New Caption");   
        });   
        jQuery("#s8").click( function() {   
            //设置Grid排序字段，根据名称排序   
            jQuery("#list7").jqGrid('sortGrid',"name",false);   
        });  
        jQuery("#m1").click( function() {   
            //获取复选框被选中的id   
            var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');   
            alert(s);   
        });   
        jQuery("#m1s").click( function() {   
            //设置选中第13行   
            jQuery("#list9").jqGrid('setSelection',"13");   
        });  
        jQuery("#ms1").click( function() {   
            var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');   
            alert(s);   
        });  
          
        //Grid 查询   
        var timeoutHnd;   
        var flAuto = false;   
        function doSearch(ev){   
            if(!flAuto)   
                return;   
            // var elem = ev.target||ev.srcElement;    
            if(timeoutHnd)   
                clearTimeout(timeoutHnd)   
            timeoutHnd = setTimeout(gridReload,500)   
        }   
        function gridReload(){   
            var nm_mask = jQuery("#item_nm").val();   
            var cd_mask = jQuery("#search_cd").val();   
            jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");   
        }   
        function enableAutosubmit(state){   
            flAuto = state;   
            jQuery("#submitButton").attr("disabled",state);   
        }  
          
        jQuery("#cm1").click( function() {   
            //显示选中行   
            var s;   
            s = jQuery("#list13").jqGrid('getGridParam','selarrrow');   
            alert(s);   
        });   
        jQuery("#cm1s").click( function() {   
            //选中编号为13的行   
            jQuery("#list13").jqGrid('setSelection',"13");   
        });   
        jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},   
            {}, // edit parameters    
            {}, // add parameters    
            {reloadAfterSubmit:false} //delete parameters    
        );  
          
        jQuery("#sids").click( function() {   
            //获取Grid中当页的所有ID   
            alert("Id's of Grid: 
"+jQuery("#list15").jqGrid('getDataIDs'));   
        });  
          
        jQuery("#hc").click( function() {   
            //隐藏tax列   
            jQuery("#list17").jqGrid('navGrid','hideCol',"tax");   
        });   
        jQuery("#sc").click( function() {   
            //显示tax列   
            jQuery("#list17").jqGrid('navGrid','showCol',"tax");   
        });  
    })  
</script>  
  
//本地数组数据：datatype: "local",   
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++)   
    jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);  
 
<script type="text/javascript">
jQuery().ready(function (){ 
//父Grid（主Grid）
jQuery("#list1").jqGrid({ 
url:'server.php?q=1', 
//editurl:"someurl.php",
datatype: "json", //数据类型 datatype: "local", datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
colModel:[ 
{name:'id',index:'id', 75}, 
{name:'invdate',index:'invdate', 90}, 
{name:'name',index:'name', 100}, 
{name:'amount',index:'amount', 80, align:"right"}, 
{name:'tax',index:'tax', 80, align:"right"}, 
{name:'total',index:'total', 80,align:"right"}, 
{name:'note',index:'note', 150, sortable:false} 
],
rowNum:10, //每页数据显示条数
rowList:[10,20,30], //每页数据显示条数
pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面
sortname: 'id', //根据ID排序
viewrecords: true, //显示数据总记录数
sortorder: "desc", //倒序
hidegrid: false, //Grid是否隐藏
auto true, //自动列宽
 500, //Grid 宽度
height: 200, //行高 height: "100%",
multiselect: true, //复选框
recordpos: 'left', //总记录显示位置：居左
mtype: "POST",
pgbuttons: false, 
pgtext: false, 
pginput: false,
multikey: "ctrlKey",
onSortCol: function(name,index){ 
//点击排序列，根据哪列排序
alert("Column Name: "+name+" Column Index: "+index);
}, 
ondblClickRow: function(id){ 
//双击行
alert("You double click row with id: "+id);
}, 
onSelectRow: function(ids) { //单击选择行
if(ids == null) { 
ids=0; 
if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) { 
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid'); 
} 
} else { 
jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1}); 
jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid'); 
} 
},
subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid
subGridUrl: 'subgrid.php?q=2', //内部Grid URL
subGridModel: [ { //内部Grid列
name : ['No','Item','Qty','Unit','Line Total'], 
width : [55,200,80,80,80],
params: ['invdate'] //嵌套Grid参数 
} ],
subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid
// we pass two parameters 
// subgrid_id is a id of the div tag created whitin a table data 
// the id of this elemenet is a combination of the "sg_" + id of the row 
// the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use 
// a method getRowData(row_id) - which returns associative array in type name-value 
// here we can easy construct the flowing 
var subgrid_table_id, pager_id; 
subgrid_table_id = subgrid_id+"_t"; 
pager_id = "p_"+subgrid_table_id; 
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
jQuery("#"+subgrid_table_id).jqGrid({ 
url:"subgrid.php?q=2&id="+row_id, 
datatype: "xml", 
colNames: ['No','Item','Qty','Unit','Line Total'], 
colModel: [ 
{name:"num",index:"num",80,key:true}, 
{name:"item",index:"item",130}, 
{name:"qty",index:"qty",70,align:"right"}, 
{name:"unit",index:"unit",70,align:"right"}, 
{name:"total",index:"total",70,align:"right",sortable:false} 
], 
rowNum:20, 
pager: pager_id, 
sortname: 'num', 
sortorder: "asc", 
height: '100%' //自动适应行高
}); 
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}); 
}, 
subGridRowColapsed: function(subgrid_id, row_id) { 
// this function is called before removing the data 
//var subgrid_table_id; 
//subgrid_table_id = subgrid_id+"_t"; 
//jQuery("#"+subgrid_table_id).remove(); 
},
loadComplete: function(){ //加载完成（初始加载），回调函数
var ret; 
alert("This function is executed immediately after
 data is loaded. We try to update data in row 13."); 
ret = jQuery("#list15").jqGrid('getRowData',"13"); 
if(ret.id == "13"){ 
jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"}) 
} 
},
caption:"Grid Example" //Grid名称
}).navGrid('#pager1',{edit:false,add:false,del:false}); 
//jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false}); 
//添加查询文本框
jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});
//查询和刷新按钮居右
jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'}); 
//编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>
jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3"); //<table id="rowed3"></table> <div id="prowed3"></div>
 
//子Grid
jQuery("#list10_d").jqGrid({ 
height: 100, 
url:'subgrid.php?q=1&id=0', 
datatype: "json", 
colNames:[
'No','Item', 'Qty', 'Unit','Line Total'
], 
colModel:[ 
{name:'num',index:'num', 55}, 
{name:'item',index:'item', 180}, 
{name:'qty',index:'qty', 80, align:"right"}, 
{name:'unit',index:'unit', 80, align:"right"}, 
{name:'linetotal',index:'linetotal', 80,align:"right", sortable:false, search:false} 
], 
rowNum:5, 
rowList:[5,10,20], 
pager: '#pager10_d', 
sortname: 'item', 
viewrecords: true, 
sortorder: "asc", 
multiselect: true, 
caption:"Invoice Detail" 
}).navGrid('#pager10_d',{add:false,edit:false,del:false});
 
jQuery("#a1").click( function(){ 
//获取Grid中选中的行id
var id = jQuery("#list5").jqGrid('getGridParam','selrow'); 
if (id) { 
var ret = jQuery("#list5").jqGrid('getRowData',id); 
alert("id="+ret.id+" invdate="+ret.invdate+"..."); 
} else { 
alert("Please select row");
} 
}); 
jQuery("#a2").click( function(){ 
//删除第12行
var su=jQuery("#list5").jqGrid('delRowData',12); 
if(su) 
alert("Succes. Write custom code to delete row from server"); 
else 
alert("Allready deleted or not in list"); 
}); 
jQuery("#a3").click( function(){ 
//修改第11行
var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"}); 
if(su) 
alert("Succes. Write custom code to update row in server"); 
else 
alert("Can not update"); 
}); 
jQuery("#a4").click( function(){ 
//添加第99行（id为99的）
var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}; 
var su=jQuery("#list5").jqGrid('addRowData',99,datarow); 
if(su) 
alert("Succes. Write custom code to add data in server"); 
else 
alert("Can not update"); 
});
 
jQuery("#s1").click( function() { 
//设置URL
jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");
}); 
jQuery("#s2").click( function() { 
//设置排序列
jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid"); 
}); 
jQuery("#s3").click( function() { 
//设置升序或倒序
var so = jQuery("#list7").jqGrid('getGridParam','sortorder'); 
so = so=="asc"?"desc":"asc"; 
jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid"); 
}); 
jQuery("#s4").click( function() { 
//跳转到第二页
jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid"); 
}); 
jQuery("#s5").click( function() { 
//设置每页显示15行
jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid"); 
}); 
jQuery("#s6").click( function() { 
//设置URL和数据格式
jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid"); 
}); 
jQuery("#s7").click( function() { 
//设置Grid的名称
jQuery("#list7").jqGrid('setCaption',"New Caption"); 
}); 
jQuery("#s8").click( function() { 
//设置Grid排序字段，根据名称排序
jQuery("#list7").jqGrid('sortGrid',"name",false); 
});
jQuery("#m1").click( function() { 
//获取复选框被选中的id
var s = jQuery("#list9").jqGrid('getGridParam','selarrrow'); 
alert(s); 
}); 
jQuery("#m1s").click( function() { 
//设置选中第13行
jQuery("#list9").jqGrid('setSelection',"13"); 
});
jQuery("#ms1").click( function() { 
var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow'); 
alert(s); 
});
 
//Grid 查询
var timeoutHnd; 
var flAuto = false; 
function doSearch(ev){ 
if(!flAuto) 
return; 
// var elem = ev.target||ev.srcElement; 
if(timeoutHnd) 
clearTimeout(timeoutHnd) 
timeoutHnd = setTimeout(gridReload,500) 
} 
function gridReload(){ 
var nm_mask = jQuery("#item_nm").val(); 
var cd_mask = jQuery("#search_cd").val(); 
jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid"); 
} 
function enableAutosubmit(state){ 
flAuto = state; 
jQuery("#submitButton").attr("disabled",state); 
}
 
jQuery("#cm1").click( function() { 
//显示选中行
var s; 
s = jQuery("#list13").jqGrid('getGridParam','selarrrow'); 
alert(s); 
}); 
jQuery("#cm1s").click( function() { 
//选中编号为13的行
jQuery("#list13").jqGrid('setSelection',"13"); 
}); 
jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false}, 
{}, // edit parameters 
{}, // add parameters 
{reloadAfterSubmit:false} //delete parameters 
);
 
jQuery("#sids").click( function() { 
//获取Grid中当页的所有ID
alert("Id's of Grid: 
"+jQuery("#list15").jqGrid('getDataIDs')); 
});
 
jQuery("#hc").click( function() { 
//隐藏tax列
jQuery("#list17").jqGrid('navGrid','hideCol',"tax"); 
}); 
jQuery("#sc").click( function() { 
//显示tax列
jQuery("#list17").jqGrid('navGrid','showCol',"tax"); 
});
})
</script>
 
//本地数组数据：datatype: "local",
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++) 
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
转自：http://www.2cto.com/kf/201212/177941.html
查看全文
相关阅读:
C#中的json操作
 Webdriver 怎么操作 scrollbar 下拉框
 jQuery 选择器
 BUYING FEED （第三届省赛）
AMAZING AUCTION （第三届省赛）
聪明的“KK” （第三届省赛）
网络的可靠性（第三届省赛）
如何通俗理解——>集群、负载均衡、分布式
 常用的shell命令
 javascript实现原生ajax
原文地址：https://www.cnblogs.com/hebo/p/4999813.html