当前位置: 代码迷 >> .NET相关 >> jqGrid 最惯用的属性和事件,供平时参考(转)
  详细解决方案

jqGrid 最惯用的属性和事件,供平时参考(转)

热度:259   发布时间:2016-04-24 02:40:22.0
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', width:75},                   {name:'invdate',index:'invdate', width:90},                   {name:'name',index:'name', width:100},                   {name:'amount',index:'amount', width:80, align:"right"},                   {name:'tax',index:'tax', width:80, align:"right"},                   {name:'total',index:'total', width:80,align:"right"},                   {name:'note',index:'note', width: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是否隐藏               autowidth: true, //自动列宽               width: 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",width:80,key:true},                           {name:"item",index:"item",width:130},                           {name:"qty",index:"qty",width:70,align:"right"},                           {name:"unit",index:"unit",width:70,align:"right"},                           {name:"total",index:"total",width: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\n 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', width:55},                   {name:'item',index:'item', width:180},                   {name:'qty',index:'qty', width:80, align:"right"},                   {name:'unit',index:'unit', width:80, align:"right"},                   {name:'linetotal',index:'linetotal', width: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: \n"+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', width:75}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width: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是否隐藏autowidth: true, //自动列宽width: 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),单击行展开嵌套GridsubGridUrl: 'subgrid.php?q=2', //内部Grid URLsubGridModel: [ { //内部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",width:80,key:true}, {name:"item",index:"item",width:130}, {name:"qty",index:"qty",width:70,align:"right"}, {name:"unit",index:"unit",width:70,align:"right"}, {name:"total",index:"total",width: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\n 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> //子GridjQuery("#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', width:55}, {name:'item',index:'item', width:180}, {name:'qty',index:'qty', width:80, align:"right"}, {name:'unit',index:'unit', width:80, align:"right"}, {name:'linetotal',index:'linetotal', width: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中选中的行idvar 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() { //设置URLjQuery("#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() { //获取复选框被选中的idvar 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中当页的所有IDalert("Id's of Grid: \n"+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