最近，使用了一个挺不错的数据展示插件，是基于jquery的，发现这个插件功能好强大，使用上也还不错，虽然没有使用extjs那么好用，但是这个插件更加轻量级一些。
上周又碰到了之前碰到过类似的问题，想找一个东西，到网上乱找，都没找到，后来发现自己做过类似的东西，但是没有记载下来，导致。事实又一次证明了，懒人是不行的!
不扯了，使用jqGrid其实很简单，附上比较简单的代码
Java代码
jsp 页面放上这两个标签，用来显示表格，跟分页标签
<table id="list"></table>
<div id="pager"></div>
var listOptions = {
colNames : ['ID', 'Name'],
colModel : [{
name : 'id',
index : 'id',
width : 55,
editable : false,
hidden : true,
editoptions : {
readonly : true,
size : 10
}
}, {
name : 'name',
index : 'name',
width : 90,
editable : true,
editoptions : {
size : 20
},
editrules: { required: true}
},{
name : 'school',
index : 'school',
width : 90,
editable : true,
edittype : "select",
editoptions : {
dataUrl : getContentPath() + 'a.do?abbreviation&.rand=' + Math.random()
},
editrules: { required: true}
}],
// caption : "List",
height : 348,
width : 600,
viewrecords : true,
multiselect : false,
pager : '#pager',
rowNum : 100,
rownumbers : true,
headertitles : true,
sortname : 'id',
url : 'query.do',
editurl : "edit.do",
datatype : "json",
sortorder : "desc",
pginput : false,
pgbuttons : false,
jsonReader : {
repeatitems : false
}
};
function init() {
jQuery("#list").jqGrid(listOptions);
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : true,
add : true,
del : true,
search : false
}, // options
{
editCaption : "Edit",
top : "0",
left : "310",
jqModal : false,
reloadAfterSubmit : true,
afterShowForm : function(form) {
$("#etdDate").datepicker({
dateFormat : "yy-mm-dd"
});
},
afterSubmit : function(response, postdata) {
var message= getMessage(response);
if(message&&message.name=='validation'){
return [false,message.message] ;
}else {
return [true,''] ;
}
}
}, // edit options
{
addCaption : "add",
top : "0",
left : "310",
jqModal : false,
reloadAfterSubmit : true,
afterShowForm : function(form) {
$("#etdDate").datepicker({
dateFormat : "yy-mm-dd"
});
},
afterSubmit : function(response, postdata) {
var message= getMessage(response);
if(message&&message.name=='validation'){
return [false,message.message];
}else {
return [true,''] ;
}
}
}, // add options
{
reloadAfterSubmit : true
}, // del options
{} // search options
);
jQuery("#list").jqGrid('setLabel', 'name', '', {
'text-align' : 'left'
});
}
$(function() {
init();
});
jsp 页面放上这两个标签，用来显示表格，跟分页标签
<table id="list"></table>
<div id="pager"></div>
var listOptions = {
colNames : ['ID', 'Name'],
colModel : [{
name : 'id',
index : 'id',
width : 55,
editable : false,
hidden : true,
editoptions : {
readonly : true,
size : 10
}
}, {
name : 'name',
index : 'name',
width : 90,
editable : true,
editoptions : {
size : 20
},
editrules: { required: true}
},{
name : 'school',
index : 'school',
width : 90,
editable : true,
edittype : "select",
editoptions : {
dataUrl : getContentPath() + 'a.do?abbreviation&.rand=' + Math.random()
},
editrules: { required: true}
}],
// caption : "List",
height : 348,
width : 600,
viewrecords : true,
multiselect : false,
pager : '#pager',
rowNum : 100,
rownumbers : true,
headertitles : true,
sortname : 'id',
url : 'query.do',
editurl : "edit.do",
datatype : "json",
sortorder : "desc",
pginput : false,
pgbuttons : false,
jsonReader : {
repeatitems : false
}
};
function init() {
jQuery("#list").jqGrid(listOptions);
jQuery("#list").jqGrid('navGrid', '#pager', {
edit : true,
add : true,
del : true,
search : false
}, // options
{
editCaption : "Edit",
top : "0",
left : "310",
jqModal : false,
reloadAfterSubmit : true,
afterShowForm : function(form) {
$("#etdDate").datepicker({
dateFormat : "yy-mm-dd"
});
},
afterSubmit : function(response, postdata) {
var message= getMessage(response);
if(message&&message.name=='validation'){
return [false,message.message] ;
}else {
return [true,''] ;
}
}
}, // edit options
{
addCaption : "add",
top : "0",
left : "310",
jqModal : false,
reloadAfterSubmit : true,
afterShowForm : function(form) {
$("#etdDate").datepicker({
dateFormat : "yy-mm-dd"
});
},
afterSubmit : function(response, postdata) {
var message= getMessage(response);
if(message&&message.name=='validation'){
return [false,message.message];
}else {
return [true,''] ;
}
}
}, // add options
{
reloadAfterSubmit : true
}, // del options
{} // search options
);
jQuery("#list").jqGrid('setLabel', 'name', '', {
'text-align' : 'left'
});
}
$(function() {
init();
});
效果当然很简单，一个列表，一个分页标签，增删改查都有了。
这不是重点，重点是jqgrid的一些常用的命令。
命令1 jQuery("#list").jqGrid('getCol','styleNumber',false);
说明：获得jqGrid的一列，好像第一个值是空的，所以遍历的时候，记得在for循环里面if(obj){} 一下。
命令2 jQuery("#list").getGridParam('selarrrow');
说明：获得jqGrid你选择的多行的记录的id列的值，好像第一个值也是空的。所以最好先判断一下。这个命令使用的前提是你的jqGrid的multiselect 是设置多选。
命令3 jqGrid.jqGrid('getGridParam', 'selrow')
说明：获得你选中的行记录的单个id
命令4 $(listId).jqGrid('restoreRow', this.lastsel)
说明：把一行处于编辑状态的行变成非编辑状态，但是我发现好像这种方式不能保存你编辑的值，这真让人头疼。
命令5 $(listId).jqGrid('editRow', id, true, null, null, null, null, function() {
DataControl.setNewStyleInfoFromRemote(id);
return true;
});
说明： 把一行置于编辑状态。但是编辑状态之后，他得value 就变成了'<input type=*** value='**'>',所以你保存的时候拿这个value的时候还得要处理一下$(row[i].propertityName).val();就可以拿到你想要的值了。
除了一些有用的命令之外，还有一些有用的总结。
1如果你的某一个属性对应的是一个文本域，那么如何调整这个文本域的宽度，跟高度呢?呵呵 设置rows : "6",
cols : "68" 这连个属性即可。
