首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jqGrid 运用总结

2012-09-06 
jqGrid 使用总结????? 最近,使用了一个挺不错的数据展示插件,是基于jquery的,发现这个插件功能好强大,使用

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" 这连个属性即可。

???

热点排行