博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jqgrid参数解密

Posted on 2012-06-28 00:25  oilsun  阅读(725)  评论(0)  编辑  收藏  举报

jqgrid是基于jquery的列表组件，还包括很多优秀的 其他扩展功能，使用起来也比较方便，起官方wiki，读起来也还好，下面，对其初始化数据的方法，需要用到的参数，作一个归纳，总结和说明。我也是使用 中，积累下来的，多多少少其他网站的也看了一些，不过我这个总结，我想没有任何一个中文网站，比我们的更全，更详细了

 

常用参数：

 

Java代码  收藏代码
  1. $('#'+tableId).jqGrid({  
  2.         datatype: datatype,//数据类型  
  3.         treedatatype: datatype,  
  4.         data:localdata,//datatype==local时  
  5.         //datastr:xx,//datatype==xmlstring jsonstring时  
  6.         url:dataurl,//展现列表时的查询请求地址  
  7.             loadtext:'正在加载...',//当数据还没加载完或数据格式不正确时显示  
  8.             emptyrecords:'没有数据',//当空记录时显示  
  9.             height:gridheight,//高度  
  10.             //footerrow:true,表格的下面，pager的上面添加一行  
  11.             forceFit:false,//拖动列宽时，保持总列宽的和不变，不会出现横向滚动条。比如当前列多了30px，那么右侧的列，就会少30px  
  12.             //shrinkToFit:true/false,//如果设置true，则每列的宽度会按照当初设置的比例，然后按照表格的宽度进行缩放。如果为false，则走用户设置的数值  
  13.             align:"center",  
  14.             mtype:"post",  
  15.             postData:params,  
  16.             autowidth: autowidth,//宽度是否自动autowidth: true  
  17.             width:gridwidth,  
  18.             colNames:eval(colnames),//['标签ID','标签名称','分组','操作']  
  19.             colModel:eval(colModels),//  
  20.             multiselect:gridmulti,//是否可以行多选  
  21.             multiselectWidth:25,  
  22.             altRows:true,//true 有条纹的表格  
  23.             gridview:(!istreeGrid),//能提高加载速度，尤其是loadonce=true时。但是这个设置为true，则treeGrid, subGrid, or afterInsertRow event都不能使用  
  24.             pager:pager,//分页工具栏  
  25.             recordtext:'({0}-{1})/{2}条',  
  26.             pgtext:'{0}/{1}页',  
  27.             pgbuttons:true,  
  28.             pagerpos:'left',//设定分页位置  
  29.             viewrecords:true,  
  30.             recordpos:'right',  
  31.             rowNum:rowNum,  
  32.             sortable:true,  
  33.             loadonce: loadonce, //如果为true，则一次加载所有数据。加载后，datatype被置为local，以后的操作都只针对本地数据  
  34.         caption: "",//设置为空，则不显示标题行  
  35.         //hiddengrid:true/false,//如果为true，开始时列表不读取数据。点击了按钮才读取。  
  36.         //hidegrid:true/false,//一个控制列表是否显示的按钮，在右上角  
  37.         //hoverrows:true/false,//如果设置为false则鼠标划过行的样式就没有了  
  38.         //inlineData:{},//当使用inlineedit的时候，传给后台的参数  
  39.         //multikey:"shiftKey/altKey/ctrlKey",//必须点哪个组合键后，才能多选.只有为多选状态时才可用  
  40.         //multiboxonly:true/false,//只有点击复选框，才会进行改变复选框。一般情况下，点击行就可以多选  
  41.         rownumbers:showidcol,//设置为true，则会多出一列，rn，作为id列，从1开始  
  42.         rownumWidth:30,//ID列的宽度  
  43.         //scroll:boolean or integer,//设置为true则表格的分页失效。动态拖动纵向滚动条时，才去继续加载数据，放置页面好用过多内存  
  44.               
  45.         //tree begin  
  46.         treeGrid:istreeGrid,  
  47.         treeGridModel: 'adjacency',  
  48.         ExpandColumn: treeCol,  
  49.         grouping:isGroupGrid,  
  50.             groupingView:{  
  51.             groupField:[groupCol],  
  52.             groupColumnShow:[false],  
  53.         groupDataSorted : true,  
  54.         groupSummary : [false],  
  55.         groupText: ['<b>{0}</b>']  
  56.            },  
  57.             jsonReader:{     
  58.                 repeatitems : jsonRepeat  
  59.             },   
  60.             gridComplete:fnGridComp,  
  61.             //列宽拖动事件  
  62.             resizeStop:fnResizeStop,  
  63.             loadError:loadError  
  64.     });  

 

其中有些属性未作标注，不过官方wiki上，通过其demo也很容易理解

 

常用方法：

 

（一）隐藏表头：

 

 

var tid = this.tableId;

$.each($(".ui-jqgrid-hdiv"),function(key,value){

if($(value).parent().attr("id").indexOf(tid)!=-1){

$(value).hide();

}

});