demo
http://blog.csdn.net/yangbobo1992/article/details/7929772 分页 http://blog.mn886.net/jqGrid/new_3_6/sortable_rows/index.jsp 拖拽排序
editrules
array 编辑的规则设定 年龄的最大值为100，最小值为10，而且为数字类型，并且为必输字段。
{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},
注释
复选框
formatter : "checkbox" ,
formatoptions :{disabled : true}
进行一次序列化不用每次都JSON.stringify
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
http://www.tuicool.com/articles/bmqI7r
获取多行
取消所有选中的行：$("jqgridtableid").trigger("reloadGrid")；
设定选中行,可设定多行选中：
$("jqgridtableid").jqGrid('setSelection',id1);
$("jqgridtableid").jqGrid('setSelection',id2);
获得选中行的ID数组：
var ids = $("jqgridtableid").jqGrid('getGridParam','selarrrow');
获得某单元格的数据：
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);
获得所有行的ID数组：
var ids = $("jqgridtableid").jqGrid('getDataIDs');
jqGrid数据导出
http://blog.csdn.net/johnstrive/article/details/42015983 http://www.iteye.com/problems/76917 http://bbs.csdn.net/topics/340185534
实现满足一定条件的行可以inline模式编辑，不满足条件的不能进行inline编辑
jQuery("#grid_id").jqGrid({
//...
onSelectRow: function(id){
var r=jQuery("#grid_id").jqGrid('getRowData',id);//r为当前数据行
if(r.xx=='111'&r.xxxxxx='xxxxxx')
jQuery('#grid_id').editRow(id, true);
},
//...
});
清除数据
$("#MyGrid").jqGrid("clearGridData", true).trigger("reloadGrid");
判断时候需要添加自定义方法
jQuery("#list10").jqGrid('navGrid', '#pager10').navButtonAdd('#pager10',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(){
alert("Adding Row");
},
position:"last"
});
给默认的编辑按钮设置id
<script>
...
jQuery("#grid_id").jqGrid({
...
pager : '#gridpager',
...
}).navGrid('#gridpager',{}, {id:'myedit'});
...
</script>
单击编辑单行
$('gridID').jqGrid('restoreRow', this.lastSelId); //重置
$("#systemVersion").jqGrid('editRow', id, true, pickdates); //编辑
行内编辑和弹窗编辑的切换
ps1:
jQuery("#grid_id").jqGrid('navGrid',pagerid, {...});
jQuery("#grid_id").jqGrid('inlineNav',pagerid, parameters);
demo:
jQuery("#list10").jqGrid('inlineNav',"#pager10", {
add: true,
edit: true,
del: false
});
ps2:设置一个空格.和keys,
colNames: ['','id','所属站点ID ','所属站点 ','内容', '模板名称 ','模版路径','html路径','模板类型'],
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{name: 'id', index: 'id', align:'center',width: 90, editable: true,sortable: true,search:false},
通过用全局变量解决了排序后翻页的问题。
{
dd=jQuery('#list2').jqGrid('getGridParam','page');
}
onSortCol: function (index, colindex, sortorder)
{
//列排序事件
jQuery("#list2").jqGrid('setGridParam',{page:dd});
}
拖拽
刷新jqGrid数据。
常用到刷新jqGrid数据的情况是，在用到查询的时候，根据查询条件，请求数据，并刷新jqGrid表格，使用方式如下：
$("#search_btn").click(function(){
//此处可以添加对查询数据的合法验证
var orderId = $("#orderId").val();
$("#list4").jqGrid('setGridParam',{
datatype:'json',
postData:{'orderId':orderId}, //发送数据
page:1
}).trigger("reloadGrid"); //重新载入
});
① setGridParam用于设置jqGrid的options选项。返回jqGrid对象 ② datatype为指定发送数据的格式； ③ postData为发送请求的数据，以key:value的形式发送，多个参数可以以逗号”,”间隔； ④ page为指定查询结果跳转到第一页； ⑤ trigger(“reloadGrid”);为重新载入jqGrid表格。
数据被加载之前改变数据
{name:'siteId',index:'siteId', align:'center',width:60,editable:true,
formatter:function(cellvalue, options, rowObject){
if (cellvalue) {
for (var i = 0; i < sites.length; i++) {
if (sites[i].id == cellvalue)
return sites[i].id + "-" + sites[i].siteName;
}
return sites[0].id + "-" + sites[0].siteName;
} else {
return '';
}
},
search:true,
searchoptions:{sopt:['eq']}
}, //根据siteId 数据改变数据
无数据的提示信息。
当后台返回数据为空时，jqGrid本身的提示信息在右下角，不是很显眼，下面方法将实现在无数据显示的情况下，在jqGrid表格中间位置提示“无数据显示”。如下图：当然，你的div样式可以设置的更好看些。
loadComplete:function() {//如果数据不存在，提示信息
var rowNum = $("#list4").jqGrid('getGridParam','records');
if (rowNum if($("#norecords").html() == null){
$("#list4").parent().append("</pre>
<divid="norecords">没有查询记录！</div>
<pre>");
}
$("#norecords").show();
}else{//如果存在记录，则隐藏提示信息。
$("#norecords").hide();
}
}
① loadComplete 为jqGrid加载完成，执行的方法； ② getGridParam这个方法用来获得jqGrid的选项值。它具有一个可选参数name，name即代表着jqGrid的选项名，如果不传入name参数，则会返回jqGrid整个选项options。例： $("#list4").jqGrid('getGridParam','records');//获取当前jqGrid的总记录数； 注意：这段代码要加在jqGrid的选项设置Option之间，即：$(“#list4″).jqGrid({});代码之间。且各个option之间加逗号间隔。
显示jqGrid统计信息。
通常统计信息都显示在jqGrid表格最后一行，分页控件之上，如下图： 代码片段：
$("#list4").jqGrid({
......
colModel:[
{name:'productName',index:'productName',align:'center',sortable:false},
{name:'productAmt',index:'productAmt',align:'center'}
],
footerrow:true,//分页上添加一行，用于显示统计信息
......
pager:$('#gridPager'),
gridComplete:function() {//当表格所有数据都加载完成，处理统计行数据
var rowNum = $(this).jqGrid('getGridParam','records');
if(rowNum > 0){
var options = {
url:"test.action",// 默认是form的action，如果写的话，会覆盖from的action.
dataType:"json",//'xml', 'script', or 'json' (接受服务端返回的类型.)
type:"POST",
success:function(data){//成功后调用方法
$("#list4").footerData("set",{productName:"合计",productAmt:data.productAmtSum});
}
};
$("#searchForm").ajaxSubmit(options);
}
}
});
添加新行
jQuery("#list5").jqGrid('addRowData',100,{id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"});
jQuery("#list5").jqGrid('addRowData',100,{id:"",invdate:"",name:"",note:"",amount:"",tax:"",total:""});
JQGrid的在inlineNav样式增加新的空白行
http://codego.net/426051/ 正文在印象笔记内也有保存
数据加载完成后,更新某一行
jQuery("#list15").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: '#pager15',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
loadComplete: function(){
var ret;
alert("This function is executed immediately after\n data is loaded. We try to update data in row 13.");
ret = jQuery("#list15").jqGrid('getRowData',"13");
if(ret.id == "13"){
jQuery("#list15").jqGrid('setRowData',ret.id,{note:"<font color='red'>Row 13 is updated!</font>"})
}
}
});
jQuery("#sids").click( function() {
alert("Id's of Grid: \n"+jQuery("#list15").jqGrid('getDataIDs'));
});
设置ajax参数
self.grid.jqGrid("setGridParam", {
serializeGridData: self.serializeData,
url: self.executionUrl,
datatype: "json",
ajaxGridOptions: {
cache: false,
contentType: "application/json",
processData: false,
type: "POST"
},
postData: {
reportId: self.reportId,
userCondition: self.userCondition.toJSON(),
criterionType: self.getCriterionTypeValue()
}
});
self.grid.trigger("reloadGrid");
//增加自定义按钮
```
jQuery("#list10").jqGrid('navButtonAdd', '#pager10', {
caption: "Edit",
onClickButton: function() {
var gsr = jQuery("#list10").jqGrid('getGridParam', 'selrow');
if (gsr) {
jQuery("#list10").jqGrid('GridToForm', gsr, "#order");
} else {
alert("Please select Row");
}
}
});
//ps:part 2:
.navGrid('#pager10',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager10',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(){
alert("Adding Row");
},
position:"last"
})
.navButtonAdd('#pager10',{
caption:"Del",
buttonicon:"ui-icon-del",
onClickButton: function(){
alert("Deleting Row");
},
position:"last"
})
.navButtonAdd('#pager10',{
caption:"Del",
buttonicon:"ui-icon-del",
onClickButton: function(){
alert("Deleting Row");
},
position:"last"
});
```