• [转] jqGrid 属性 事件 合集


    <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', 75,sortable:false},  
                    {name:'id',index:'id', 75},   
                    {name:'invdate',index:'invdate', 90},   
                    {name:'name',index:'name', 100},   
                    {name:'amount',index:'amount', 80, align:"right"},   
                    {name:'tax',index:'tax', 80, align:"right"},   
                    {name:'total',index:'total', 80,align:"right"},   
                    {name:'note',index:'note', 150, sortable:false}   
                ],  
                rowNum:10, //每页数据显示条数  
                rowList:[10,20,30], //每页数据显示条数  
                pager: jQuery('#pager1'), //Grid显示在id为pager1的div里面  
                sortname: 'id', //根据ID排序  
                viewrecords: true, //显示数据总记录数  
                sortorder: "desc", //倒序  
                hidegrid: false, //Grid是否隐藏  
                auto true, //自动列宽  
                 500, //Grid 宽度  
                height: 200, //行高 height: "100%",  
                multiselect: true, //复选框  
                recordpos: 'left', //总记录显示位置:居左  
                mtype: "POST",  
                pgbuttons: false,   
                pgtext: false,   
                pginput: false,  
                multikey: "ctrlKey",  
                onSortCol: function(name,index){   
                    //点击排序列,根据哪列排序  
                    alert("Column Name: "+name+" Column Index: "+index);  
                },   
                ondblClickRow: function(id){   
                    //双击行  
                    alert("You double click row with id: "+id);  
                },   
                onSelectRow: function(ids) { //单击选择行  
                    if(ids == null) {   
                        ids=0;   
                        if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {   
                            jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});  
                            jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');   
                        }   
                    } else {   
                        jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});   
                        jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');   
                    }   
                    //点击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;20px;' type='button' value='E' onclick="jQuery('#list1').editRow('"+cl+"');" />";  
                        se = "<input style='height:22px;20px;' type='button' value='S' onclick="jQuery('#list1').saveRow('"+cl+"');" />";  
                        ce = "<input style='height:22px;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",80,key:true},   
                            {name:"item",index:"item",130},   
                            {name:"qty",index:"qty",70,align:"right"},   
                            {name:"unit",index:"unit",70,align:"right"},   
                            {name:"total",index:"total",70,align:"right",sortable:false}   
                        ],   
                        rowNum:20,   
                        pager: pager_id,   
                        sortname: 'num',   
                        sortorder: "asc",   
                        height: '100%' //自动适应行高  
                    });   
                    jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});   
                },   
                subGridRowColapsed: function(subgrid_id, row_id) {   
                    // this function is called before removing the data   
                    //var subgrid_table_id;   
                    //subgrid_table_id = subgrid_id+"_t";   
                    //jQuery("#"+subgrid_table_id).remove();   
                },  
                loadComplete: function(){ //加载完成(初始加载),回调函数  
                    var ret;   
                    alert("This function is executed immediately after
     data is loaded. We try to update data in row 13.");   
                    ret = jQuery("#list15").jqGrid('getRowData',"13");   
                    if(ret.id == "13"){   
                        jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})   
                    }   
                },  
                caption:"Grid Example" //Grid名称  
            }, {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', 55},   
                    {name:'item',index:'item', 180},   
                    {name:'qty',index:'qty', 80, align:"right"},   
                    {name:'unit',index:'unit', 80, align:"right"},   
                    {name:'linetotal',index:'linetotal', 80,align:"right", sortable:false, search:false}   
                ],   
                rowNum:5,   
                rowList:[5,10,20],   
                pager: '#pager10_d',   
                sortname: 'item',   
                viewrecords: true,   
                sortorder: "asc",   
                multiselect: true,   
                caption:"Invoice Detail"   
            }).navGrid('#pager10_d',{add:false,edit:false,del:false});  
              
            jQuery("#a1").click( function(){   
                //获取Grid中选中的行id  
                var id = jQuery("#list5").jqGrid('getGridParam','selrow');   
                if (id) {   
                    var ret = jQuery("#list5").jqGrid('getRowData',id);   
                    alert("id="+ret.id+" invdate="+ret.invdate+"...");   
                } else {   
                    alert("Please select row");  
                }   
            });   
            jQuery("#a2").click( function(){   
                //删除第12行  
                var su=jQuery("#list5").jqGrid('delRowData',12);   
                if(su)   
                    alert("Succes. Write custom code to delete row from server");   
                else   
                    alert("Allready deleted or not in list");   
            });   
            jQuery("#a3").click( function(){   
                //修改第11行  
                var su=jQuery("#list5").jqGrid('setRowData',11,{amount:"333.00",tax:"33.00",total:"366.00",note:"<img src='images/user1.gif'/>"});   
                if(su)   
                    alert("Succes. Write custom code to update row in server");   
                else   
                    alert("Can not update");   
            });   
            jQuery("#a4").click( function(){   
                //添加第99行(id为99的)  
                var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};   
                var su=jQuery("#list5").jqGrid('addRowData',99,datarow);   
                if(su)   
                    alert("Succes. Write custom code to add data in server");   
                else   
                    alert("Can not update");   
            });  
              
            jQuery("#s1").click( function() {   
                //设置URL  
                jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid");  
            });   
            jQuery("#s2").click( function() {   
                //设置排序列  
                jQuery("#list7").jqGrid('setGridParam',{sortname:"amount",sortorder:"asc"}).trigger("reloadGrid");   
            });   
            jQuery("#s3").click( function() {   
                //设置升序或倒序  
                var so = jQuery("#list7").jqGrid('getGridParam','sortorder');   
                so = so=="asc"?"desc":"asc";   
                jQuery("#list7").jqGrid('setGridParam',{sortorder:so}).trigger("reloadGrid");   
            });   
            jQuery("#s4").click( function() {   
                //跳转到第二页  
                jQuery("#list7").jqGrid('setGridParam',{page:2}).trigger("reloadGrid");   
            });   
            jQuery("#s5").click( function() {   
                //设置每页显示15行  
                jQuery("#list7").jqGrid('setGridParam',{rowNum:15}).trigger("reloadGrid");   
            });   
            jQuery("#s6").click( function() {   
                //设置URL和数据格式  
                jQuery("#list7").jqGrid('setGridParam',{url:"server.php?q=1",datatype:"xml"}).trigger("reloadGrid");   
            });   
            jQuery("#s7").click( function() {   
                //设置Grid的名称  
                jQuery("#list7").jqGrid('setCaption',"New Caption");   
            });   
            jQuery("#s8").click( function() {   
                //设置Grid排序字段,根据名称排序  
                jQuery("#list7").jqGrid('sortGrid',"name",false);   
            });  
            jQuery("#m1").click( function() {   
                //获取复选框被选中的id  
                var s = jQuery("#list9").jqGrid('getGridParam','selarrrow');   
                alert(s);   
            });   
            jQuery("#m1s").click( function() {   
                //设置选中第13行  
                jQuery("#list9").jqGrid('setSelection',"13");   
            });  
            jQuery("#ms1").click( function() {   
                var s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');   
                alert(s);   
            });  
              
            //Grid 查询  
            var timeoutHnd;   
            var flAuto = false;   
            function doSearch(ev){   
                if(!flAuto)   
                    return;   
                // var elem = ev.target||ev.srcElement;   
                if(timeoutHnd)   
                    clearTimeout(timeoutHnd)   
                timeoutHnd = setTimeout(gridReload,500)   
            }   
            function gridReload(){   
                var nm_mask = jQuery("#item_nm").val();   
                var cd_mask = jQuery("#search_cd").val();   
                jQuery("#bigset").jqGrid('setGridParam',{url:"bigset.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");   
            }   
            function enableAutosubmit(state){   
                flAuto = state;   
                jQuery("#submitButton").attr("disabled",state);   
            }  
              
            jQuery("#cm1").click( function() {   
                //显示选中行  
                var s;   
                s = jQuery("#list13").jqGrid('getGridParam','selarrrow');   
                alert(s);   
            });   
            jQuery("#cm1s").click( function() {   
                //选中编号为13的行  
                jQuery("#list13").jqGrid('setSelection',"13");   
            });   
            jQuery("#list13").jqGrid('navGrid','#pager13',{add:false,edit:false,del:false},   
                {}, // edit parameters   
                {}, // add parameters   
                {reloadAfterSubmit:false} //delete parameters   
            );  
              
            jQuery("#sids").click( function() {   
                //获取Grid中当页的所有ID  
                alert("Id's of Grid: 
    "+jQuery("#list15").jqGrid('getDataIDs'));   
            });  
              
            jQuery("#hc").click( function() {   
                //隐藏tax列  
                jQuery("#list17").jqGrid('navGrid','hideCol',"tax");   
            });   
            jQuery("#sc").click( function() {   
                //显示tax列  
                jQuery("#list17").jqGrid('navGrid','showCol',"tax");   
            });  
            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
    <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>  
        
       ...  
       <table id="rowed1"></table>  
       <div id="prowed1"></div>  
       <br />  
       <input type="BUTTON" id="ed1" value="Edit row 13" />  
       <input type="BUTTON" id="sved1" disabled='true' value="Save row 13" />  
       <input type="BUTTON" id="cned1" disabled='true' value="Cancel Save" />  
       <script src="rowedex1.js" type="text/javascript"> </script>  
    </html>  

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

  • 相关阅读:
    【笔记】隐式寻址方式(pending...)
    【笔记】有结构文件(pending...)
    【笔记】目录项(pending...)
    【笔记】主存储器
    Ubuntu 16.04 升级OpenSSH至7.7p1
    awk用法笔记
    find命令笔记
    VIM的使用
    Shell
    Linux文本处理三剑客
  • 原文地址:https://www.cnblogs.com/lyon91/p/8378366.html
Copyright © 2020-2023  润新知