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.下边分别进行描述. ...
随机推荐
- Javascript中相同Function使用多个名称
原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 看Log4js源码有如下实现: ['Trace','Debug','Info','Warn','Error', ...
- [nRF51822] 15、穿戴式设备上电量检测装置的设计及细节技术点（偏专业硬件文章）
穿戴式 设备如智能手环.智能手表一般采用几百毫安时的锂离子电池来供电.因此,与之配套的充电电路.稳压电路和电池电量检测电路便必不可少!本文主要谈谈该类消费类电子内部电池电量检测的一般方法及其优缺点. ...
- 巧用transform实现HTML5 video标签视频比例拉伸
前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...
- JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
- Ubuntu14.04、win7双系统如何设置win7为默认启动项
Ubuntu14.04.win7双系统如何设置win7为默认启动项 Ubuntu14.04.win7双系统设置win7为默认启动项方法: 在启动项选择菜单处记住windows 7对应的序号. 从上至下 ...
- JS数字计算精度误差的解决方法
本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...
- Sql Server系列：游标
1. 游标简介 游标是一种处理数据的方法,主要用于存储过程.触发器和Transact-SQL脚本中.SELECT语句返回的是一个结果集,游标能够从包含多条数据记录的结果集中每次提取一条记录. 游标的特 ...
- 【Win10应用开发】相对布局（RelativePanel）
外面的雨下得很大,老周就决定雨下漫笔了. 今天咱们说一个新控件——RelativePanel.本质上,它就是一个面板,面板干啥用的?面板就是一个容器,里面可以放其他对象,就像我们小时候玩的七巧板一样, ...
- 【Win10 应用开发】人脸识别
可能你会认为人脸识别用起来会很复杂,老周当初也这么想,但通过实际操作后,我发现非然. 经过微软封装的东西,向来都是复杂问题简单化,只要用得舒心,代码越少越好,用最少的代码做最多的事情,此为大师境界也. ...
- 那些让IE6-8羞愧的替补型js
1,html5shiv 这个js特别简单,可以让IE8识别一些新的标签,常用的比如 header footor section,就能使用更好的语义的标签了. 引入方式: <!--[if lt I ...