最近，使用了一个挺不错的数据展示插件，是基于jquery的，发现这个插件功能好强大，使用上也还不错，虽然没有使用extjs那么好用，但是这个插件更加轻量级一些。
上周又碰到了之前碰到过类似的问题，想找一个东西，到网上乱找，都没找到，后来发现自己做过类似的东西，但是没有记载下来，导致。事实又一次证明了，懒人是不行的！
不扯了，使用jqGrid其实很简单，附上比较简单的代码
- 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' 这连个属性即可。
