jqgrid学习笔记[转]

一、主要API接口getGridParam、setGridParam:

  getGridParam方法:

  getGridParam("url"): 获取当前的AJAX的URL
  getGridParam("sortname"):排序的字段
  getGridParam("sortorder"):排序的顺序
  getGridParam("selrow"):得到选中行的ID
  getGridParam("page"):当前的页数
  getGridParam("rowNum"):当前有多少行
  getGridParam("datatype"):得到当前的datatype
  getGridParam("records"):得到总记录数
  getGridParam("selarrrow"):可以多选时,返回选中行的ID
 
  setGridParam方法:

  setGridParam({url:newvalue}):可以设置一个grid的ajax url,可配合trigger("reloadGrid")使用
  setGridParam({sortname:newvalue}):设置排序的字段
  setGridParam({sortorder:newvalue}):设置排序的顺序asc or desc
  setGridParam({page:newvalue}):设置翻到第几页
  setGridParam({rowNum:newvalue}):设置当前每页显示的行数
  setGridParam({datatype:newvalue}):设置新的datatype(xml,json)

     形式2:jQuery(‘#tableID‘).jqGrid(‘getGridParam‘,‘url‘))

           jQuery("#tableID").jqGrid(‘setGridParam‘,{page:2}).trigger("reloadGrid")

二、jqGrid colModel表体结构配置

name       必要的属性,具有唯一标识性,如在弹出的editform窗体中,将作为input的name属性
index        为排序用,最方便的是设为数据库字段
width        150,宽度,数值
align        left,center,right
detefmt        date:true
editable    flase
editoptions    edittype为先决条件,此为值,[]
editrules    编辑规范
edittype    text,textarea,select,checkbox,password
formatoptions
formatter
hidedlg        false (appear in the modal dialog)
hidden        false 在加载时是否隐藏列
jsonmap        声明json的格式
key        false
label        当没有设置colNames时,在列里用此代替,此项也为空时,就是name代替
resizable    true,列宽可调节
search        true,可搜索
sortable    true,可排序
sorttype    text,int,float,date,排序子段类型
xmlmap        声明xml的格式

三、一个例子[Array Data]
复制代码
//<table id="list4"></table>
jQuery("#list4").jqGrid({
    datatype: "local",
    height: 250,
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:60, sorttype:"int"},
           {name:‘invdate‘,index:‘invdate‘, width:90, sorttype:"date"},
           {name:‘name‘,index:‘name‘, width:100},
           {name:‘amount‘,index:‘amount‘, width:80, align:"right",sorttype:"float"},
           {name:‘tax‘,index:‘tax‘, width:80, align:"right",sorttype:"float"},
           {name:‘total‘,index:‘total‘, width:80,align:"right",sorttype:"float"},
           {name:‘note‘,index:‘note‘, width:150, sortable:false}
       ],
       multiselect: true,
       caption: "Manipulating Array Data"
});
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]);
复制代码

 四、行操作

复制代码
//获取选中行数据
jQuery("#a1").click( function(){
    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("请选择一行!");}
});

//删除
jQuery("#a2").click( function(){
    var su=jQuery("#list5").jqGrid(‘delRowData‘,12);
    if(su) alert("成功删除第12行"); else alert("删除失败");
});

//更新
jQuery("#a3").click( function(){
    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("更新成功"); else alert("更新失败");
});

//新增
jQuery("#a4").click( function(){
    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("新增成功"); else alert("新增失败");
});
复制代码

五、进阶 

复制代码
HTML
...
<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>

Java Scrpt code
...
jQuery("#list9").jqGrid({
       url:‘server.php?q=2&nd=‘+new Date().getTime(),
    datatype: "json",
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {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: ‘#pager9‘,
       sortname: ‘id‘,
    recordpos: ‘left‘,
    viewrecords: true,
    sortorder: "desc",
    multiselect: true,
    caption: "Multi Select Example"
});
jQuery("#list9").jqGrid(‘navGrid‘,‘#pager9‘,{add:false,del:false,edit:false,position:‘right‘});
jQuery("#m1").click( function() {
    var s;
    s = jQuery("#list9").jqGrid(‘getGridParam‘,‘selarrrow‘);
    alert(s);
});
jQuery("#m1s").click( function() {
    jQuery("#list9").jqGrid(‘setSelection‘,"13");
});
复制代码

复制代码
HTML
...
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>
Java Scrpt code
...
jQuery("#list10").jqGrid({
       url:‘server.php?q=2‘,
    datatype: "json",
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {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: ‘#pager10‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    multiselect: false,
    caption: "Invoice Header",
    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‘);
        }
    }
});
jQuery("#list10").jqGrid(‘navGrid‘,‘#pager10‘,{add:false,edit:false,del:false});
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("#ms1").click( function() {
    var s;
    s = jQuery("#list10_d").jqGrid(‘getGridParam‘,‘selarrrow‘);
    alert(s);
});
复制代码

复制代码
HTML
...
<<table id="list11"></table>
<div id="pager11"></div>
<script src="subgrid.js" type="text/javascript"> </script>
Java Scrpt code
...
jQuery("#list11").jqGrid({
       url:‘server.php?q=1‘,
    datatype: "xml",
    height: 200,
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {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: ‘#pager11‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    multiselect: false,
    subGrid : true,
    subGridUrl: ‘subgrid.php?q=2‘,
    subGridModel: [{ name  : [‘No‘,‘Item‘,‘Qty‘,‘Unit‘,‘Line Total‘],
                    width : [55,200,80,80,80] }
    ],
    caption: "Subgrid Example"

});
jQuery("#list11").jqGrid(‘navGrid‘,‘#pager11‘,{add:false,edit:false,del:false});
复制代码

复制代码
HTML
...
<table id="listsg11"></table>
<div id="pagersg11"></div>
<script src="subgrid_grid.js" type="text/javascript"> </script>
Java Scrpt code
jQuery("#listsg11").jqGrid({
       url:‘server.php?q=1‘,
    datatype: "xml",
    height: 190,
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {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:8,
       rowList:[8,10,20,30],
       pager: ‘#pagersg11‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    multiselect: false,
    subGrid: true,
    caption: "Grid as Subgrid",
    subGridRowExpanded: function(subgrid_id, row_id) {
        // 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();
    }
});
jQuery("#listsg11").jqGrid(‘navGrid‘,‘#pagersg11‘,{add:false,edit:false,del:false});
复制代码

复制代码
HTML
...
<table id="list12"></table>
<div id="pager12"></div>
Java Scrpt code
...
jQuery("#list12").jqGrid({
       url:‘server.php?q=2‘,
    datatype: "json",
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {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: ‘#pager12‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    multiselect: false,
    width: 500,
    height: "100%",
    caption: "Auto height example"
});
jQuery("#list12").jqGrid(‘navGrid‘,‘#pager12‘,{add:false,edit:false,del:false});
复制代码

复制代码
HTML
...
<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>
Java Scrpt code
jQuery("#bigset").jqGrid({
       url:‘bigset.php‘,
    datatype: "json",
    height: 255,
       colNames:[‘Index‘,‘Name‘, ‘Code‘],
       colModel:[
           {name:‘item_id‘,index:‘item_id‘, width:65},
           {name:‘item‘,index:‘item‘, width:150},
           {name:‘item_cd‘,index:‘item_cd‘, width:100}
       ],
       rowNum:12,
//       rowList:[10,20,30],
       mtype: "POST",
       pager: jQuery(‘#pagerb‘),
       pgbuttons: false,
       pgtext: false,
       pginput:false,
       sortname: ‘item_id‘,
    viewrecords: true,
    sortorder: "asc"
});
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);
}
复制代码

六、行编辑

复制代码
HTML
...
<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>

Java Scrpt code
...
jQuery("#rowed1").jqGrid({
       url:‘server.php?q=2‘,
    datatype: "json",
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {name:‘invdate‘,index:‘invdate‘, width:90, editable:true},
           {name:‘name‘,index:‘name‘, width:100,editable:true},
           {name:‘amount‘,index:‘amount‘, width:80, align:"right",editable:true},
           {name:‘tax‘,index:‘tax‘, width:80, align:"right",editable:true},
           {name:‘total‘,index:‘total‘, width:80,align:"right",editable:true},
           {name:‘note‘,index:‘note‘, width:150, sortable:false,editable:true}
       ],
       rowNum:10,
       rowList:[10,20,30],
       pager: ‘#prowed1‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    editurl: "server.php",
    caption: "Basic Example"
});
jQuery("#rowed1").jqGrid(‘navGrid‘,"#prowed1",{edit:false,add:false,del:false});

jQuery("#ed1").click( function() {
    jQuery("#rowed1").jqGrid(‘editRow‘,"13");
    this.disabled = ‘true‘;
    jQuery("#sved1,#cned1").attr("disabled",false);
});
jQuery("#sved1").click( function() {
    jQuery("#rowed1").jqGrid(‘saveRow‘,"13");
    jQuery("#sved1,#cned1").attr("disabled",true);
    jQuery("#ed1").attr("disabled",false);
});
jQuery("#cned1").click( function() {
    jQuery("#rowed1").jqGrid(‘restoreRow‘,"13");
    jQuery("#sved1,#cned1").attr("disabled",true);
    jQuery("#ed1").attr("disabled",false);
});
复制代码

复制代码
HTML
...
<table id="rowed2"></table>
<div id="prowed2"></div>
<br />

<script src="rowedex2.js" type="text/javascript"> </script>

Java Scrpt code
...
jQuery("#rowed2").jqGrid({
       url:‘server.php?q=3‘,
    datatype: "json",
       colNames:[‘Actions‘,‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
        {name:‘act‘,index:‘act‘, width:75,sortable:false},
           {name:‘id‘,index:‘id‘, width:55},
           {name:‘invdate‘,index:‘invdate‘, width:90, editable:true},
           {name:‘name‘,index:‘name‘, width:100,editable:true},
           {name:‘amount‘,index:‘amount‘, width:80, align:"right",editable:true},
           {name:‘tax‘,index:‘tax‘, width:80, align:"right",editable:true},
           {name:‘total‘,index:‘total‘, width:80,align:"right",editable:true},
           {name:‘note‘,index:‘note‘, width:150, sortable:false,editable:true}
       ],
       rowNum:10,
       rowList:[10,20,30],
       pager: ‘#prowed2‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    gridComplete: function(){
        var ids = jQuery("#rowed2").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(‘#rowed2‘).editRow(‘"+cl+"‘);\"  />";
            se = "<input style=‘height:22px;width:20px;‘ type=‘button‘ value=‘S‘ onclick=\"jQuery(‘#rowed2‘).saveRow(‘"+cl+"‘);\"  />";
            ce = "<input style=‘height:22px;width:20px;‘ type=‘button‘ value=‘C‘ onclick=\"jQuery(‘#rowed2‘).restoreRow(‘"+cl+"‘);\" />";
            jQuery("#rowed2").jqGrid(‘setRowData‘,ids[i],{act:be+se+ce});
        }
    },
    editurl: "server.php",
    caption:"Custom edit "
});
jQuery("#rowed2").jqGrid(‘navGrid‘,"#prowed2",{edit:false,add:false,del:false});
复制代码

复制代码
HTML
...
<table id="rowed3"></table>
<div id="prowed3"></div>
<br />

<script src="rowedex3.js" type="text/javascript"> </script>

Java Scrpt code
...
var lastsel;
jQuery("#rowed3").jqGrid({
       url:‘server.php?q=2‘,
    datatype: "json",
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {name:‘invdate‘,index:‘invdate‘, width:90, editable:true},
           {name:‘name‘,index:‘name‘, width:100,editable:true},
           {name:‘amount‘,index:‘amount‘, width:80, align:"right",editable:true},
           {name:‘tax‘,index:‘tax‘, width:80, align:"right",editable:true},
           {name:‘total‘,index:‘total‘, width:80,align:"right",editable:true},
           {name:‘note‘,index:‘note‘, width:150, sortable:false,editable:true}
       ],
       rowNum:10,
       rowList:[10,20,30],
       pager: ‘#prowed3‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    onSelectRow: function(id){
        if(id && id!==lastsel){
            jQuery(‘#rowed3‘).jqGrid(‘restoreRow‘,lastsel);
            jQuery(‘#rowed3‘).jqGrid(‘editRow‘,id,true);
            lastsel=id;
        }
    },
    editurl: "server.php",
    caption: "Using events example"
});
jQuery("#rowed3").jqGrid(‘navGrid‘,"#prowed3",{edit:false,add:false,del:false});
复制代码

复制代码
HTML
...
<table id="rowed4"></table>
<div id="prowed4"></div>
<br />
<input type="BUTTON" id="ed4" value="Edit row 13" />
<input type="BUTTON" id="sved4" disabled=‘true‘ value="Save row 13" />

<script src="rowedex4.js" type="text/javascript"> </script>

Java Scrpt code
...
jQuery("#rowed4").jqGrid({
       url:‘server.php?q=2‘,
    datatype: "json",
       colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:55},
           {name:‘invdate‘,index:‘invdate‘, width:90, editable:true},
           {name:‘name‘,index:‘name‘, width:100,editable:true},
           {name:‘amount‘,index:‘amount‘, width:80, align:"right",editable:true},
           {name:‘tax‘,index:‘tax‘, width:80, align:"right",editable:true},
           {name:‘total‘,index:‘total‘, width:80,align:"right",editable:true},
           {name:‘note‘,index:‘note‘, width:150, sortable:false,editable:true}
       ],
       rowNum:10,
       rowList:[10,20,30],
       pager: ‘#prowed4‘,
       sortname: ‘id‘,
    viewrecords: true,
    sortorder: "desc",
    editurl: "server.php",
    caption: "Full control"
});
jQuery("#ed4").click( function() {
    jQuery("#rowed4").jqGrid(‘editRow‘,"13");
    this.disabled = ‘true‘;
    jQuery("#sved4").attr("disabled",false);
});
jQuery("#sved4").click( function() {
    jQuery("#rowed4").jqGrid(‘saveRow‘,"13", checksave);
    jQuery("#sved4").attr("disabled",true);
    jQuery("#ed4").attr("disabled",false);
});
function checksave(result) {
    if (result.responseText=="") {alert("Update is missing!"); return false;}
    return true;
}
复制代码

复制代码
HTML
...
<table id="rowed5"></table>
Java Scrpt code
var lastsel2
jQuery("#rowed5").jqGrid({
    datatype: "local",
    height: 250,
       colNames:[‘ID Number‘,‘Name‘, ‘Stock‘, ‘Ship via‘,‘Notes‘],
       colModel:[
           {name:‘id‘,index:‘id‘, width:90, sorttype:"int", editable: true},
           {name:‘name‘,index:‘name‘, width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
           {name:‘stock‘,index:‘stock‘, width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
           {name:‘ship‘,index:‘ship‘, width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
           {name:‘note‘,index:‘note‘, width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
       ],
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            jQuery(‘#rowed5‘).jqGrid(‘restoreRow‘,lastsel2);
            jQuery(‘#rowed5‘).jqGrid(‘editRow‘,id,true);
            lastsel2=id;
        }
    },
    editurl: "server.php",
    caption: "Input Types"

});
var mydata2 = [
        {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
        {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
        {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
        {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
        {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
        {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
        {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
        {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
        {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
        ];
for(var i=0;i < mydata2.length;i++)
 jQuery("#rowed5").jqGrid(‘addRowData‘,mydata2[i].id,mydata2[i]);
复制代码
时间: 2024-10-09 20:47:38

jqgrid学习笔记[转]的相关文章

jqGrid 学习笔记整理——终极篇(一)

jqGrid 学习笔记整理--终极篇(一) 本篇开始实现利用jqGrid框架实现 主从表 的显示效果及与后台交互的实例,使用的平台和上篇博文[jqGrid 学习笔记整理--进阶篇(二)](http://blog.csdn.net/dfs4df5/article/details/51108798)一致 也将使用上篇中的数据库和代码进行添加和修改,如果未看上篇的请先去看上篇,本篇不再重复贴出上篇出现的源码. 一.数据库部分 为了检索方便,这里建立了一个视图 关联两个表,设置为外键 最后如果有什么不清

jqGrid 学习笔记整理——进阶篇(二)

jqGrid 学习笔记整理--进阶篇(二 ) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2.创建表 双击打开上步创建数据库--右击T

jqGrid学习笔记

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信.文档比较全面,其官方网址为:http://www.trirand.com. 一.jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数据

JqGrid学习笔记(一)

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信.文档比较全面,其官方网址为:http://www.trirand.com. 一.jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数据

JqGrid学习笔记(二)

1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid表格,使用方式如下: $("#search_btn").click(function(){ //此处可以添加对查询数据的合法验证 var orderId = $("#orderId").val(); $("#list4").jqGrid('setGridParam',{ datatype:'json', postData:{

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

Caliburn.Micro学习笔记(一)----引导类和命名匹配规则 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详细,自己在看它的文档和代码时写了一些demo和笔记,还有它实现的原理记录一下 学习Caliburn.Micro要有MEF和MVVM的基础 先说一下他的命名规则和引导类 以后我会把Caliburn.Micro的 Actions IResult,IHandle ICondu

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开