jqgrid是基于jquery的列表组件,还包括很多优秀的其他扩展功能,使用起来也比较方便,起官方wiki,读起来也还好,下面,对其初始化数据的方法,需要用到的参数,作一个归纳,总结和说明。我也是使用中,积累下来的,多多少少其他网站的也看了一些,不过我这个总结,我想没有任何一个中文网站,比我们的更全,更详细了
常用参数:
$('#'+tableId).jqGrid({ datatype: datatype,//数据类型 treedatatype: datatype, data:localdata,//datatype==local时 //datastr:xx,//datatype==xmlstring jsonstring时 url:dataurl,//展现列表时的查询请求地址 loadtext:'正在加载...',//当数据还没加载完或数据格式不正确时显示 emptyrecords:'没有数据',//当空记录时显示 height:gridheight,//高度 //footerrow:true,表格的下面,pager的上面添加一行 forceFit:false,//拖动列宽时,保持总列宽的和不变,不会出现横向滚动条。比如当前列多了30px,那么右侧的列,就会少30px //shrinkToFit:true/false,//如果设置true,则每列的宽度会按照当初设置的比例,然后按照表格的宽度进行缩放。如果为false,则走用户设置的数值 align:"center", mtype:"post", postData:params, autowidth: autowidth,//宽度是否自动autowidth: true width:gridwidth, colNames:eval(colnames),//['标签ID','标签名称','分组','操作'] colModel:eval(colModels),// multiselect:gridmulti,//是否可以行多选 multiselectWidth:25, altRows:true,//true 有条纹的表格 gridview:(!istreeGrid),//能提高加载速度,尤其是loadonce=true时。但是这个设置为true,则treeGrid, subGrid, or afterInsertRow event都不能使用 pager:pager,//分页工具栏 recordtext:'({0}-{1})/{2}条', pgtext:'{0}/{1}页', pgbuttons:true, pagerpos:'left',//设定分页位置 viewrecords:true, recordpos:'right', rowNum:rowNum, sortable:true, loadonce: loadonce, //如果为true,则一次加载所有数据。加载后,datatype被置为local,以后的操作都只针对本地数据 caption: "",//设置为空,则不显示标题行 //hiddengrid:true/false,//如果为true,开始时列表不读取数据。点击了按钮才读取。 //hidegrid:true/false,//一个控制列表是否显示的按钮,在右上角 //hoverrows:true/false,//如果设置为false则鼠标划过行的样式就没有了 //inlineData:{},//当使用inlineedit的时候,传给后台的参数 //multikey:"shiftKey/altKey/ctrlKey",//必须点哪个组合键后,才能多选.只有为多选状态时才可用 //multiboxonly:true/false,//只有点击复选框,才会进行改变复选框。一般情况下,点击行就可以多选 rownumbers:showidcol,//设置为true,则会多出一列,rn,作为id列,从1开始 rownumWidth:30,//ID列的宽度 //scroll:boolean or integer,//设置为true则表格的分页失效。动态拖动纵向滚动条时,才去继续加载数据,放置页面好用过多内存 //tree begin treeGrid:istreeGrid, treeGridModel: 'adjacency', ExpandColumn: treeCol, grouping:isGroupGrid, groupingView:{ groupField:[groupCol], groupColumnShow:[false], groupDataSorted : true, groupSummary : [false], groupText: ['<b>{0}</b>'] }, jsonReader:{ repeatitems : jsonRepeat }, gridComplete:fnGridComp, //列宽拖动事件 resizeStop:fnResizeStop, loadError:loadError });
其中有些属性未作标注,不过官方wiki上,通过其demo也很容易理解
常用方法:
(一)隐藏表头:
var tid = this.tableId;
$.each($(".ui-jqgrid-hdiv"),function(key,value){
if($(value).parent().attr("id").indexOf(tid)!=-1){
$(value).hide();
}
});