jqGrid 使用总结

      最近，使用了一个挺不错的数据展示插件，是基于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();
		});

 效果当然很简单，一个列表，一个分页标签，增删改查都有了。

  这不是重点，重点是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" 这连个属性即可。