首页 > 编程入门 文章详情

[转]jqGrid 属性、事件全集

编程入门 行业动态 更新时间:2024-10-22 19:47:36

[转]jqGrid <a href=https://www.elefans.com/category/jswz/34/1771415.html style=属性、事件全集"/>

[转]jqGrid 属性、事件全集

本文转自：

以下是jqGrid 最常用的属性和事件，经过一段时间的整理，终于弄的差不多了。版权所有，转载请注明出处，向您的厚道致敬！谢谢！

 

 

[javascript]  view plain copy print?
  1. <script type="text/javascript">  
  2.     var lastsel;  
  3.     jQuery().ready(function () {   
  4.         //父Grid（主Grid）  
  5.         jQuery("#list1").jqGrid({   
  6.             url:'server.php?q=1',   
  7.             editurl:"server.php",  
  8.             datatype: "json", //数据类型 datatype: "local", datatype: "xml",  
  9.             colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],   
  10.             colModel:[   
  11.                 {name:'act',index:'act', width:75,sortable:false},  
  12.                 {name:'id',index:'id', width:75},   
  13.                 {name:'invdate',index:'invdate', width:90},   
  14.                 {name:'name',index:'name', width:100},   
  15.                 {name:'amount',index:'amount', width:80, align:"right"},   
  16.                 {name:'tax',index:'tax', width:80, align:"right"},   
  17.                 {name:'total',index:'total', width:80,align:"right"},   
  18.                 {name:'note',index:'note', width:150, sortable:false}   
  19.             ],  
  20.             rowNum:10, //每页数据显示条数  
  21.             rowList:[10,20,30], //每页数据显示条数  
  22.             pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面  
  23.             sortname: 'id', //根据ID排序  
  24.             viewrecords: true, //显示数据总记录数  
  25.             sortorder: "desc", //倒序  
  26.             hidegrid: false, //Grid是否隐藏  
  27.             autowidth: true, //自动列宽  
  28.             width: 500, //Grid 宽度  
  29.             height: 200, //行高 height: "100%",  
  30.             multiselect: true, //复选框  
  31.             recordpos: 'left', //总记录显示位置：居左  
  32.             mtype: "POST",  
  33.             pgbuttons: false,   
  34.             pgtext: false,   
  35.             pginput: false,  
  36.             multikey: "ctrlKey",  
  37.             onSortCol: function(name,index){   
  38.                 //点击排序列，根据哪列排序  
  39.                 alert("Column Name: "+name+" Column Index: "+index);  
  40.             },   
  41.             ondblClickRow: function(id){   
  42.                 //双击行  
  43.                 alert("You double click row with id: "+id);  
  44.             },   
  45.             onSelectRow: function(ids) { //单击选择行  
  46.                 if(ids == null) {   
  47.                     ids=0;   
  48.                     if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {   
  49.                         jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});  
  50.                         jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');   
  51.                     }   
  52.                 } else {   
  53.                     jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});   
  54.                     jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');   
  55.                 }   
  56.                 //点击Grid，将行变为编辑状态  
  57.                 if(id && id!==lastsel){  
  58.                     jQuery('#rowed3').jqGrid('restoreRow',lastsel);  
  59.                     jQuery('#rowed3').jqGrid('editRow',id,true); lastsel=id;  
  60.                 }  
  61.             },  
  62.             gridComplete: function(){  
  63.                 //在Grid的第一列（Actions）中添加按钮E、S、C，添加增、删、查、改按钮；  
  64.                 var ids = jQuery("#list1").jqGrid('getDataIDs');  
  65.                 for(var i=0;i < ids.length;i++){  
  66.                     var cl = ids[i];  
  67.                     be = "<input style='height:22px;width:20px;' type='button' value='E' οnclick=\"jQuery('#list1').editRow('"+cl+"');\" />";  
  68.                     se = "<input style='height:22px;width:20px;' type='button' value='S' οnclick=\"jQuery('#list1').saveRow('"+cl+"');\" />";  
  69.                     ce = "<input style='height:22px;width:20px;' type='button' value='C' οnclick=\"jQuery('#list1').restoreRow('"+cl+"');\" />";  
  70.                     jQuery("#list1").jqGrid('setRowData',ids[i],{act:be+se+ce});  
  71.                 }  
  72.             },  
  73.             subGrid : true, //显示内部Grid（次Grid），单击行展开嵌套Grid  
  74.             subGridUrl: 'subgrid.php?q=2', //内部Grid URL  
  75.             subGridModel: [ { //内部Grid列  
  76.                 name : ['No','Item','Qty','Unit','Line Total'],   
  77.                 width : [55,200,80,80,80],  
  78.                 params: ['invdate'] //嵌套Grid参数            
  79.             } ],  
  80.             subGridRowExpanded: function(subgrid_id, row_id) { //Grid内部嵌套Grid  
  81.                 // we pass two parameters   
  82.                 // subgrid_id is a id of the div tag created whitin a table data   
  83.                 // the id of this elemenet is a combination of the "sg_" + id of the row   
  84.                 // the row_id is the id of the row // If we wan to pass additinal parameters to the url we can use   
  85.                 // a method getRowData(row_id) - which returns associative array in type name-value   
  86.                 // here we can easy construct the flowing   
  87.                 var subgrid_table_id, pager_id;   
  88.                 subgrid_table_id = subgrid_id+"_t";   
  89.                 pager_id = "p_"+subgrid_table_id;   
  90.                 $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");   
  91.                 jQuery("#"+subgrid_table_id).jqGrid({   
  92.                     url:"subgrid.php?q=2&id="+row_id,   
  93.                     datatype: "xml",   
  94.                     colNames: ['No','Item','Qty','Unit','Line Total'],   
  95.                     colModel: [   
  96.                         {name:"num",index:"num",width:80,key:true},   
  97.                         {name:"item",index:"item",width:130},   
  98.                         {name:"qty",index:"qty",width:70,align:"right"},   
  99.                         {name:"unit",index:"unit",width:70,align:"right"},   
  100.                         {name:"total",index:"total",width:70,align:"right",sortable:false}   
  101.                     ],   
  102.                     rowNum:20,   
  103.                     pager: pager_id,   
  104.                     sortname: 'num',   
  105.                     sortorder: "asc",   
  106.                     height: '100%' //自动适应行高  
  107.                 });   
  108.                 jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});   
  109.             },   
  110.             subGridRowColapsed: function(subgrid_id, row_id) {   
  111.                 // this function is called before removing the data   
  112.                 //var subgrid_table_id;   
  113.                 //subgrid_table_id = subgrid_id+"_t";   
  114.                 //jQuery("#"+subgrid_table_id).remove();   
  115.             },  
  116.             loadComplete: function(){ //加载完成（初始加载），回调函数  
  117.                 var ret;   
  118.                 alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");   
  119.                 ret = jQuery("#list15").jqGrid('getRowData',"13");   
  120.                 if(ret.id == "13"){   
  121.                     jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})   
  122.                 }   
  123.             },  
  124.             caption:"Grid Example" //Grid名称  
  125.         }, {singleselect: true, lazyload: true}).navGrid('#pager1',{edit:false,add:false,del:false});   
  126.             //singleselect: true 设置jqGrid复选框为单选  
  127.            //lazyload: true 设置jqGrid不自动加载  
  128.         //jQuery("#list6").jqGrid('navGrid',"#pager6",{edit:false,add:false,del:false}); = .navGrid('#pager1',{edit:false,add:false,del:false});   
  129.         //添加查询文本框  
  130.         jQuery("#list7").jqGrid('navGrid','#pager7',{edit:false,add:false,del:false,refresh:false,searchtext:"Find"});  
  131.         //查询和刷新按钮居右  
  132.         jQuery("#list9").jqGrid('navGrid','#pager9',{add:false,del:false,edit:false,position:'right'});   
  133.         //编辑行，添加Add、Edit、Save、Cancel按钮 //<script src="rowedex3.js" type="text/javascript"> </script>  
  134.         jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3");   //<table id="rowed3"></table> <div id="prowed3"></div>  
  135.           
  136.         //子Grid  
  137.         jQuery("#list10_d").jqGrid({   
  138.             height: 100,   
  139.             url:'subgrid.php?q=1&id=0',   
  140.             datatype: "json",   
  141.             colNames:[  
  142.                 'No','Item', 'Qty', 'Unit','Line Total'  
  143.             ],   
  144.             colModel:[   
  145.                 {name:'num',index:'num', width:55},   
  146.                 {name:'item',index:'item', width:180},   
  147.                 {name:'qty',index:'qty', width:80, align:"right"},   
  148.                 {name:'unit',index:'unit', width:80, align:"right"},   
  149.                 {name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}   
  150.             ],   
  151.             rowNum:5,   
  152.             rowList:[5,10,20],   
  153.             pager: '#pager10_d',   
  154.             sortname: 'item',   
  155.             viewrecords: true,   
  156.             sortorder: "asc",   
  157.             multiselect: true,   
  158.             caption:"Invoice Detail"   
  159.         }).navGrid('#pager10_d',{add:false,edit:false,del:false});  
  160.           
  161.         jQuery("#a1").click( function(){   
  162.             //获取Grid中选中的行id  
  163.             var id = jQuery("#list5").jqGrid('getGridParam','selrow');   
  164.             if (id) {   
  165.                 var ret = jQuery("#list5").jqGrid('getRowData',id);   
  166.                 alert("id="+ret.id+" invdate="+ret.invdate+"...");   
  167.             } else {   
  168.                 alert("Please select row");  
  169.             }   
  170.         });   
  171.         jQuery("#a2").click( function(){   
  172.             //删除第12行  
  173.             var su=jQuery("#list5").jqGrid('delRowData',12);   
  174.             if(su)   
  175.                 alert("Succes. Write custom code to delete row from server");   
  176.             else   
  177.                 alert("Allready deleted or not in list");   
  178.         });   
  179.         jQuery("#a3").click( function(){   
  180.             //修改第11行  
  181.             var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});   
  182.             if(su)   
  183.                 alert("Succes. Write custom code to update row in server");   
  184.             else   
  185.                 alert("Can not update");   
  186.         });   
  187.         jQuery("#a4").click( function(){   
  188.             //添加第99行（id为99的）  
  189.             var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};   
  190.             var su=jQuery("#list5").jqGrid('addRowData',99,datarow);   
  191.             if(su)   
  192.                 alert("Succes. Write custom code to add data in server");   
  193.             else   
  194.                 alert("Can not update");   
  195.         });  
  196.           
  197.         jQuery("#s1").click( function() {   
  198.             //设置URL  
  199.             jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");  
  200.         });   
  201.         jQuery("#s2").click( function() {   
  202.             //设置排序列  
  203.             jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");   
  204.         });   
  205.         jQuery("#s3").click( function() {   
  206.             //设置升序或倒序  
  207.             var so = jQuery("#list7").jqGrid('getGridParam','sortorder');   
  208.             so = so=="asc"?"desc":"asc";   
  209.             jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");   
  210.         });   
  211.         jQuery("#s4").click( function() {   
  212.             //跳转到第二页  
  213.             jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");   
  214.         });   
  215.         jQuery("#s5").click( function() {   
  216.             //设置每页显示15行  
  217.             jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");   
  218.         });   
  219.         jQuery("#s6").click( function() {   
  220.             //设置URL和数据格式  
  221.             jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");   
  222.         });   
  223.         jQuery("#s7").click( function() {   
  224.             //设置Grid的名称  
  225.             jQuery("#list7").jqGrid('setCaption',"New Caption");   
  226.         });   
  227.         jQuery("#s8").click( function() {   
  228.             //设置Grid排序字段，根据名称排序  
  229.             jQuery("#list7").jqGrid('sortGrid',"name",false);   
  230.         });  
  231.         jQuery("#m1").click( function() {   
  232.             //获取复选框被选中的id  
  233.             var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');   
  234.             alert(s);   
  235.         });   
  236.         jQuery("#m1s").click( function() {   
  237.             //设置选中第13行  
  238.             jQuery("#list9").jqGrid('setSelection',"13");   
  239.         });  
  240.         jQuery("#ms1").click( function() {   
  241.             var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');   
  242.             alert(s);   
  243.         });  
  244.           
  245.         //Grid 查询  
  246.         var timeoutHnd;   
  247.         var flAuto = false;   
  248.         function doSearch(ev){   
  249.             if(!flAuto)   
  250.                 return;   
  251.             // var elem = ev.target||ev.srcElement;   
  252.             if(timeoutHnd)   
  253.                 clearTimeout(timeoutHnd)   
  254.             timeoutHnd = setTimeout(gridReload,500)   
  255.         }   
  256.         function gridReload(){   
  257.             var nm_mask = jQuery("#item_nm").val();   
  258.             var cd_mask = jQuery("#search_cd").val();   
  259.             jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");   
  260.         }   
  261.         function enableAutosubmit(state){   
  262.             flAuto = state;   
  263.             jQuery("#submitButton").attr("disabled",state);   
  264.         }  
  265.           
  266.         jQuery("#cm1").click( function() {   
  267.             //显示选中行  
  268.             var s;   
  269.             s = jQuery("#list13").jqGrid('getGridParam','selarrrow');   
  270.             alert(s);   
  271.         });   
  272.         jQuery("#cm1s").click( function() {   
  273.             //选中编号为13的行  
  274.             jQuery("#list13").jqGrid('setSelection',"13");   
  275.         });   
  276.         jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},   
  277.             {}, // edit parameters   
  278.             {}, // add parameters   
  279.             {reloadAfterSubmit:false} //delete parameters   
  280.         );  
  281.           
  282.         jQuery("#sids").click( function() {   
  283.             //获取Grid中当页的所有ID  
  284.             alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));   
  285.         });  
  286.           
  287.         jQuery("#hc").click( function() {   
  288.             //隐藏tax列  
  289.             jQuery("#list17").jqGrid('navGrid','hideCol',"tax");   
  290.         });   
  291.         jQuery("#sc").click( function() {   
  292.             //显示tax列  
  293.             jQuery("#list17").jqGrid('navGrid','showCol',"tax");   
  294.         });  
  295.         jQuery("#ed1").click( function() {  
  296.             //编辑第13行  
  297.             jQuery("#rowed1").jqGrid('editRow',"13");  
  298.             this.disabled = 'true';  
  299.             jQuery("#sved1,#cned1").attr("disabled",false);   
  300.         });  
  301.         jQuery("#sved1").click( function() {  
  302.             //保存第13行  
  303.             jQuery("#rowed1").jqGrid('saveRow',"13");  
  304.             jQuery("#sved1,#cned1").attr("disabled",true);  
  305.             jQuery("#ed1").attr("disabled",false);   
  306.         });  
  307.         jQuery("#cned1").click( function() {  
  308.             //取消编辑第13行  
  309.             jQuery("#rowed1").jqGrid('restoreRow',"13");  
  310.             jQuery("#sved1,#cned1").attr("disabled",true);  
  311.             jQuery("#ed1").attr("disabled",false);  
  312.         });  
  313.     })  
  314. </script>  
  315.   
  316. //本地数组数据：datatype: "local",  
  317. var mydata = [   
  318.         {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},  
  319.                 {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},  
  320.                 {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},   
  321.                 {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
  322.                 {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
  323.                 {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},   
  324.                 {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},   
  325.                 {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},   
  326.                 {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}   
  327.     ];   
  328. for(var i=0;i<=mydata.length;i++)   
  329.     jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);  
<script type="text/javascript">var lastsel;jQuery().ready(function () { //父Grid（主Grid）jQuery("#list1").jqGrid({ url:'server.php?q=1', editurl:"server.php",datatype: "json", //数据类型 datatype: "local", datatype: "xml",colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'act',index:'act', width:75,sortable:false},{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'); } //点击Grid，将行变为编辑状态if(id && id!==lastsel){jQuery('#rowed3').jqGrid('restoreRow',lastsel);jQuery('#rowed3').jqGrid('editRow',id,true); lastsel=id;}},gridComplete: function(){//在Grid的第一列（Actions）中添加按钮E、S、C，添加增、删、查、改按钮；var ids = jQuery("#list1").jqGrid('getDataIDs');for(var i=0;i < ids.length;i++){var cl = ids[i];be = "<input style='height:22px;width:20px;' type='button' value='E' οnclick=\"jQuery('#list1').editRow('"+cl+"');\" />";se = "<input style='height:22px;width:20px;' type='button' value='S' οnclick=\"jQuery('#list1').saveRow('"+cl+"');\" />";ce = "<input style='height:22px;width:20px;' type='button' value='C' οnclick=\"jQuery('#list1').restoreRow('"+cl+"');\" />";jQuery("#list1").jqGrid('setRowData',ids[i],{act:be+se+ce});}},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名称}, {singleselect: true, lazyload: true}).navGrid('#pager1',{edit:false,add:false,del:false}); //singleselect: true 设置jqGrid复选框为单选//lazyload: true 设置jqGrid不自动加载//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"); });jQuery("#ed1").click( function() {//编辑第13行jQuery("#rowed1").jqGrid('editRow',"13");this.disabled = 'true';jQuery("#sved1,#cned1").attr("disabled",false); });jQuery("#sved1").click( function() {//保存第13行jQuery("#rowed1").jqGrid('saveRow',"13");jQuery("#sved1,#cned1").attr("disabled",true);jQuery("#ed1").attr("disabled",false); });jQuery("#cned1").click( function() {//取消编辑第13行jQuery("#rowed1").jqGrid('restoreRow',"13");jQuery("#sved1,#cned1").attr("disabled",true);jQuery("#ed1").attr("disabled",false);});})
</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]);

 

 

[html]  view plain copy print?
  1. <html>  
  2.  ...  
  3.  <table id="list1"></table>  
  4.  <div id="pager1"></div>  
  5.  ...   
  6.  <table id="list5"></table>   
  7.  <div id="pager5"></div> <br />   
  8.  <a href="#" id="a1">Get data from selected row</a>   
  9.  <br />   
  10.  <a href="#" id="a2">Delete row 2</a>   
  11.  <br />   
  12.  <a href="#" id="a3">Update amounts in row 1</a>   
  13.  <br />   
  14.  <a href="#" id="a4">Add row with id 99</a>  
  15.  ...   
  16.  <table id="list6"></table>   
  17.  <div id="pager6"></div> <br />   
  18.  <a href="javascript:void(0)" id="g1" οnclick="alert(jQuery('#list6').jqGrid('getGridParam','url'));">Get url</a>   
  19.  <br />   
  20.  <a href="javascript:void(0)" id="g2" οnclick="alert(jQuery('#list6').jqGrid('getGridParam','sortname'));">Get Sort Name</a>   
  21.  <br />   
  22.  <a href="javascript:void(0)" id="g3" οnclick="alert(jQuery('#list6')jqGrid('getGridParam','sortorder'));">Get Sort Order</a>   
  23.  <br />   
  24.  <a href="javascript:void(0)" id="g4" οnclick="alert(jQuery('#list6')jqGrid('getGridParam','selrow'));">Get Selected Row</a>   
  25.  <br />   
  26.  <a href="javascript:void(0)" id="g5" οnclick="alert(jQuery('#list6')jqGrid('getGridParam','page'));">Get Current Page</a>   
  27.  <br />   
  28.  <a href="javascript:void(0)" id="g6" οnclick="alert(jQuery('#list6').jqGrid('getGridParam','rowNum'));">Get Number of Rows requested</a>   
  29.  <br />   
  30.  <a href="javascript:void(0)" id="g7" οnclick="alert('See Multi select rows example');">Get Selected Rows</a>   
  31.  <br />   
  32.  <a href="javascript:void(0)" id="g8" οnclick="alert(jQuery('#list6').jqGrid('getGridParam','datatype'));">Get Data Type requested</a>   
  33.  <br />   
  34.  <a href="javascript:void(0)" id="g9" οnclick="alert(jQuery('#list6').jqGrid('getGridParam','records'));">Get number of records in Grid</a>  
  35.  ...   
  36.  <table id="list7"></table>   
  37.  <div id="pager7"></div>   
  38.  <br />   
  39.  <a href="javascript:void(0)" id="s1">Set new url</a>   
  40.  <br />   
  41.  <a href="javascript:void(0)" id="s2">Set Sort to amount column</a>   
  42.  <br />   
  43.  <a href="javascript:void(0)" id="s3" >Set Sort new Order</a>   
  44.  <br />   
  45.  <a href="javascript:void(0)" id="s4">Set to view second Page</a>   
  46.  <br />   
  47.  <a href="javascript:void(0)" id="s5">Set new Number of Rows(15)</a>   
  48.  <br />   
  49.  <a href="javascript:void(0)" id="s6" >Set Data Type from json to xml</a>  
  50.   ...   
  51.   <table id="list9"></table>   
  52.   <div id="pager9"></div>   
  53.   <br />   
  54.   <a href="javascript:void(0)" id="m1">Get Selected id's</a>   
  55.   <a href="javascript:void(0)" id="m1s">Select(Unselect) row 13</a>  
  56.   ...   
  57.   Invoice Header   
  58.   <table id="list10"></table>   
  59.   <div id="pager10"></div>   
  60.   <br />   
  61.   Invoice Detail   
  62.   <table id="list10_d"></table>   
  63.   <div id="pager10_d"></div>   
  64.   <a href="javascript:void(0)" id="ms1">Get Selected id's</a>  
  65.   ...   
  66.   <table id="list11">  
  67.   </table> <div id="pager11"></div>   
  68.   <script src="subgrid.js" type="text/javascript"> </script>  
  69.     
  70.   ...   
  71.   <div class="h">Search By:</div>   
  72.   <div>   
  73.     <input type="checkbox" id="autosearch" οnclick="enableAutosubmit(this.checked)"> Enable Autosearch   
  74.     <br/>   
  75.     Code  
  76.     <br />   
  77.     <input type="text" id="search_cd" οnkeydοwn="doSearch(arguments[0]||event)" />   
  78.   </div>   
  79.   <div> Name<br>   
  80.     <input type="text" id="item" οnkeydοwn="doSearch(arguments[0]||event)" />   
  81.     <button οnclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>   
  82.   </div>   
  83.   <br />   
  84.   <table id="bigset"></table>   
  85.   <div id="pagerb"></div>   
  86.   <script src="bigset.js" type="text/javascript"> </script>  
  87.     
  88.   ...   
  89.   <table id="list13"></table>   
  90.   <div id="pager13"></div> <br />   
  91.   <a href="javascript:void(0)" id="cm1">Get Selected id's</a>   
  92.   <a href="javascript:void(0)" id="cm1s">Select(Unselect) row 13</a>   
  93.   <script src="cmultiex.js" type="text/javascript"> </script>  
  94.     
  95.   ...   
  96.   <table id="list15"></table>   
  97.   <div id="pager15"></div>   
  98.   <a href="javascript:void(0)" id="sids">Get Grid id's</a>  
  99.   <br/>  
  100.      
  101.   ...   
  102.   <table id="list17"></table>   
  103.   <div id="pager17"></div>   
  104.   <a href="javascript:void(0)" id="hc">Hide column Tax</a>  
  105.   <br/>   
  106.   <a href="javascript:void(0)" id="sc">Show column Tax</a>  
  107.     
  108.    ...  
  109.    <table id="rowed1"></table>  
  110.    <div id="prowed1"></div>  
  111.    <br />  
  112.    <input type="BUTTON" id="ed1" value="Edit row 13" />  
  113.    <input type="BUTTON" id="sved1" disabled='true' value="Save row 13" />  
  114.    <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />  
  115.    <script src="rowedex1.js" type="text/javascript"> </script>  
  116. </html>  

 

转载于:.html

更多推荐

[转]jqGrid 属性、事件全集

本文发布于:2024-03-06 02:14:07，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1714087.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：属性   全集   事件   jqGrid

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表