正文转自:http://blog.csdn.net/rosanu_blog/article/details/8334070

以下是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’ onclick=\”jQuery(‘#list1’).editRow(‘”+cl+”‘);\” />”;  
  68.                     se = “<input style=’height:22px;width:20px;’ type=’button’ value=’S’ onclick=\”jQuery(‘#list1’).saveRow(‘”+cl+”‘);\” />”;  
  69.                     ce = “<input style=’height:22px;width:20px;’ type=’button’ value=’C’ onclick=\”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]);  

图片 1

<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' onclick=\"jQuery('#list1').editRow('"+cl+"');\" />";
                    se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list1').saveRow('"+cl+"');\" />";
                    ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list1').restoreRow('"+cl+"');\" />";
                    jQuery("#list1").jqGrid('setRowData',ids[i],{act:be+se+ce});
                }
            },
            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名称
        }, {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>

        //子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"); 
        });
        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″ onclick=”alert(jQuery(‘#list6’).jqGrid(‘getGridParam’,’url’));”>Get url</a>   
  19.  <br />   
  20.  <a href=”javascript:void(0)” id=”g2″ onclick=”alert(jQuery(‘#list6’).jqGrid(‘getGridParam’,’sortname’));”>Get Sort Name</a>   
  21.  <br />   
  22.  <a href=”javascript:void(0)” id=”g3″ onclick=”alert(jQuery(‘#list6’)jqGrid(‘getGridParam’,’sortorder’));”>Get Sort Order</a>   
  23.  <br />   
  24.  <a href=”javascript:void(0)” id=”g4″ onclick=”alert(jQuery(‘#list6’)jqGrid(‘getGridParam’,’selrow’));”>Get Selected Row</a>   
  25.  <br />   
  26.  <a href=”javascript:void(0)” id=”g5″ onclick=”alert(jQuery(‘#list6’)jqGrid(‘getGridParam’,’page’));”>Get Current Page</a>   
  27.  <br />   
  28.  <a href=”javascript:void(0)” id=”g6″ onclick=”alert(jQuery(‘#list6’).jqGrid(‘getGridParam’,’rowNum’));”>Get Number of Rows requested</a>   
  29.  <br />   
  30.  <a href=”javascript:void(0)” id=”g7″ onclick=”alert(‘See Multi select rows example’);”>Get Selected Rows</a>   
  31.  <br />   
  32.  <a href=”javascript:void(0)” id=”g8″ onclick=”alert(jQuery(‘#list6’).jqGrid(‘getGridParam’,’datatype’));”>Get Data Type requested</a>   
  33.  <br />   
  34.  <a href=”javascript:void(0)” id=”g9″ onclick=”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” onclick=”enableAutosubmit(this.checked)”> Enable Autosearch   
  74.     <br/>   
  75.     Code  
  76.     <br />   
  77.     <input type=”text” id=”search_cd” onkeydown=”doSearch(arguments[0]||event)” />   
  78.   </div>   
  79.   <div> Name<br>   
  80.     <input type=”text” id=”item” onkeydown=”doSearch(arguments[0]||event)” />   
  81.     <button onclick=”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>   

相关文章

网站地图xml地图