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("请选择一行！");}
});
//可以多选的时候获取选中行 该函数为自定义函数
function update(){
var selector = $("#grid-table").jqGrid("getGridParam", "selarrrow");
//checkbox单选时用‘selrow’,可以多选时用selarrrow 这得到是数组本该循环操作的，自己实现把。
if(selector.length>=1){
var traDeateId = selector+"_traDeate";
var accountTypeId = selector+"_accountType";
var proofNumberId = selector+"_proofNumber";
var traDeate =$('#'+traDeateId).val();
var accountType =$('#'+accountTypeId).val();
var proofNumber =$('#'+proofNumberId).val();
$('#grid-table').jqGrid('setRowData',selector, {traDeate:traDeate,accountType:accountType,proofNumber:proofNumber},'');
$("#grid-table").jqGrid('setSelection' ,selector,true); //反选择一行，去除勾选。
}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("新增失败");
});
五、进阶
<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>
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");
});
主从表：
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>
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);
});
可展开的下级表：
<<table id="list11"></table>
<div id="pager11"></div>
<script src="subgrid.js" type="text/javascript"> </script>
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});
可展开的下级表二：
<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});
调整大小：
<table id="list12"></table>
<div id="pager12"></div>
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});
搜索功能：
<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);
}
六、行编辑
基本例子：
<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>
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);
});
客户端编辑：
<table id="rowed2"></table>
<div id="prowed2"></div>
<br />
<script src="rowedex2.js" type="text/javascript"> </script>
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});
使用事件：
<table id="rowed3"></table>
<div id="prowed3"></div>
<br />
<script src="rowedex3.js" type="text/javascript"> </script>
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});
完全控制：
<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>
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;
}
输入类型：
<table id="rowed5"></table>
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]);
jqgrid（转载）的更多相关文章
- jqgrid学习笔记(转载)
jqgrid中文帮助文档网址:http://blog.mn886.net/jqGrid/ jqgrid:用来做什么? jqgrid是web端前台表格控件,用它可以轻松将数据格式化显示,前后台用过aja ...
- JQGrid各种参数详解API（转载）
下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页 ...
- Jqgrid学习(转载)
jqGrid API 全 JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...
- jqGrid 操作一些总结
1. 手动往grid中添加数据 $("#orgGridId").jqGrid('addRowData',mydata[i].id,mydata[i]); mydata[i].id: ...
- [转]jqGrid 属性、事件全集
本文转自:http://blog.csdn.net/rosanu_blog/article/details/8334070 以下是jqGrid 最常用的属性和事件,经过一段时间的整理,终于弄的差不多了 ...
- JQgrid for asp.net
转载自http://blog.csdn.net/shiworkyue/article/details/8283716 JQgrid for asp.net 网上资料较少,自己总结了些不全,能用到的可 ...
- Jqgrid入门-Jqgrid格式化数据(九)
上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...
- Jqgrid入门-Jqgrid分组的实现(八)
上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能. 类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
随机推荐
- [LeetCode] Interleaving String - 交织的字符串
题目如下:https://oj.leetcode.com/problems/interleaving-string/ Given s1, s2, s3, find whether s3 is form ...
- Maven和Gradle对比
Java世界中主要有三大构建工具:Ant.Maven和Gradle.经过几年的发展,Ant几乎销声匿迹.Maven也日薄西山,而Gradle的发展则如日中天.笔者有幸见证了Maven的没落和Gradl ...
- [ASP.NET MVC 小牛之路]11 - Filter
Filter(筛选器)是基于AOP(面向方面编程)的设计,它的作用是对MVC框架处理客户端请求注入额外的逻辑,以非常简单优美的方式实现横切关注点(Cross-cutting Concerns).横切关 ...
- Java 浅析三大特性之一多态
Java 浅析三大特性之一多态 之前我们的文章讲了Java的封装和继承,封装讲的时候,并没有体现出来封装的强大之处,反而还要慎用封装.因为这时的封装还没有和多态联系到一起,还无法看出向上转型的厉害之处 ...
- vSphere Client 编辑虚拟机属性的问题
编辑虚拟机属性的时候, 出现: vpxclient.vmconfig.cpuid 初始值设置异常之类的,重置了, 并将注册表中的所有vmvare 相关键值删除了, 还是一样的.. 后面参照https: ...
- xamarin 手机顶部状态栏
修改显示xamarin开发的App的手机顶部状态栏, 步骤一:在项目UWP上的“引用”里右键“添加引用”,选择->Universal Windows->Windows Mobile Ext ...
- Tomcat的目录结构
bin:该目录下存放的是二进制可执行文件,如果是安装版,那么这个目录下会有两个exe文件:tomcat6.exe.tomcat6w.exe,前者是在控制台下启动Tomcat,后者是弹出UGI窗口启动T ...
- 在JQ中关于this
this的相关问题 this指代的是什么 这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单个对象,也可以用于多个对象. $('btn').click ...
- SSIS Parameter用法
今天学习SSISParameter的用法,记录学习的过程. Parameters能够在Project Deployment Model下使用,不能在Package Deployment Model使用 ...
- 【WP开发】不同客户端之间传输加密数据
在上一篇文章中,曾说好本次将提供一个客户端之间传输加密数据的例子.前些天就打算写了,只是因一些人类科技无法预知的事情发生,故拖到今天. 本示例没什么技术含量,也没什么亮点,Bug林立,只不过提供给有需 ...