[size=medium]最近项目用到jqgrid来展现数据,小小总结一下,备忘.
var postData = {};
var jqdefaultGridConfig = {
mtype : 'POST',//ajax提交方式
datatype : 'json',//表格可以被接受的数据类型:xml,xmlstring,json,local,function
//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
shrinkToFit : false,
autoload : false,//是否自动加载
rowNum : 20,//设置表格中显示的记录数,参数会被自动传到后台。
//一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
rowList : [ 10, 20, 50 ],
//指定分页栏对象,必须为一个有效的html元素。<div id="mytablepagerbar"></div>
pager : '#mytablepagerbar',
viewrecords : true,//是否要显示总记录数
// sortable : true,//是否可排序
multiselect : true,//定义是否可以多选
autowidth : true,
autoHeight : true,
postData : postData,//参数
jsonReader : {
root : "rows", // json中代表实际模型数据的入口
page : "page", // json中代表当前页码的数据
total : "total", // json中代表页码总数的数据
records : "records", // json中代表数据行总数的数据
//如果为false,则传到页面的数据不需要按照colModel的顺序来传递
repeatitems : false
},
//对显示列属性的设置,是一个数组对象。常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable? 是否可以排序
colModel : getModel(),
url : contextPath
+ "",
ondblClickRow : function(id) {// 双击编辑
if (id && id !== lastFlag) {
editrowandrefresh(id);
lastFlag = id;
} else {// 选择行不是之前编辑行,就撤销之前编辑行
jQuery('#mytable').jqGrid('restoreRow',
lastFlag);
}
},
caption : '考核表(双击行编辑,点击\"Enter\"键(回车键) 保存)'//标题
};
jQuery('#mytable').jqGrid(jqdefaultGridConfig);
其中,jsonReader 属性中的 repeatitems 参数,如果为true的话,接收的值一定要按照colModel的顺序,用false比较好一点;传到页面的json,开头是{"page":1,"total":1,"records":11, "rows":[{data}]};如果配置sortable,是否可排序为true的话,在colModel中frozen : true,设定固定就不能设置;
$('#postInt').change(function(){
var url= contextPath
+ '***.action?postInt='+$('#postInt').val();
$.getJSON(url,function(exeBeanOfjson) {
kpiList=exeBeanOfjson;
$('#mytable').GridUnload();
jqdefaultGridConfig.colModel=getColModel();
$('#mytable').jqGrid(jqdefaultGridConfig);
search();
});
});
如果postInt选择项的值有变化,就重新加载jqgrid页面,组成新的列表头,再加载数据,动态加载整个页面.
http://trirand.com/blog/jqgrid/jqgrid.html
jqgrid Demos
[/size]
分享到:
相关推荐
jquery.jqgrid
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
jquery.jqGrid-4.5.2.zip 官方资源文件
jquery.jqGrid-4.4.5资源包
jqGrid在共同的基礎結構上,提供數種操作模式,分別包裝於不同的檔案之中。除了共用的數個檔案之外,使用者按需要選擇操作模式,並使用對應的程式檔。可惜各操作模式之間常見功能雷同之處,程式再用性卻未進一步整合...
jquery.jqGrid.js,jqGrid表格专用JS文件,缺失备用,即下即用。
博客专用: Jqgrid学习笔记__01__初来乍到 很多时候在网上下载一段代码,结果引用的CSS和JS文件不知道从哪里弄,结果上网下载,不是版本不对,就是完全不对。这里的JS是有对应的代码段的。请参考博客 ====> Jqgrid...
jquery.jqGrid-4.4.0.zip
支持三行表头,修改了官方的jquery.jqGrid.min.js,直接替换即可
jquery jqGridjquery jqGrid
jquery.jqGrid-4.4.3,用于web页面的列表分页显示
jquery-jqgrid源码及中文文档
jquery.jqGrid-4.3.2.zip
jquery grid 表单插件,去官网下不到吗,还好有人做了备份,多谢多谢!本着分享的精神,同时也做一个备份,把4.5.4的包放到网上!
jquery.jqGrid-4.4.4.zip
是用jqgrid必须的包,前台展示数据时,能更方便,漂亮的展示出来
jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip