jqGird
来源:互联网 发布:java redis list对象 编辑:程序博客网 时间:2024/05/29 02:38
jqGrid是一款处理表格展现的jQuery插件,支持分页、滚动加载、搜索、锁定、拖动等一系列对表格的常规操作。以下是最近项目中实践jqGrid的整理
1、引入到项目中来
jqGrid的主页在http://www.trirand.com/blog/ ,上面提供了下载、demo、wiki等文档,都比较详尽。特别是http://www.trirand.com/jqgridwiki/doku.php 中值得开发中多多关注。好了,下载后需要在项目的头文件中引入:
- <link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/ui.jqgrid.css" />
- <script type="text/javascript" src="$request.contextPath/script/jqGrid/js/jquery.jqGrid.min.js"></script>
- <script type="text/javascript" src="$request.contextPath/script/jqGrid/js/i18n/grid.locale-cn.js"></script>
jqGrid采用了jQueryUI的CSS主题,需要下载相应的主题http://jqueryui.com/themeroller/ 找到相应的主题下载,如果使用了datepicker控件,还需要ui。如下:
- <link rel="stylesheet" type="text/css" href="$request.contextPath/script/jqGrid/css/jquery-ui-1.8.22.custom.css" media="all"/>
- <script type="text/javascript" src="$request.contextPath/script/ui/jquery-ui-1.8.22.custom.min.js"></script>
- <script type="text/javascript" src="$request.contextPath/script/ui/jquery.ui.datepicker-zh-CN.js"></script>
2、在页面中使用
在页面中如vm、jsp中使用,需要两个基本的元素
- <table id="jqGridId"></table> //这个是必须的
- <div id="pager"></div> //这个是显示分页bar的信息,根据需要
然后在js中
- $("#jqGridId").jqGrid({options})
这样就是一个最基本的设置,重点是在这里的options上,包括基本参数设定和函数。具体可见官网的文档:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
3、参数(options)
参数是指jqGrid对象中设置各种特性的属性,具体的设置在http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
下面一个例子,罗列了常用的参数,并对参数进行了说明:
- $("#jqGridId").jqGrid({
- url: s2web.appURL + "jq/queryWare.action",
- datatype:"local", //为local时初始化不加载,支持json,xml等
- mtype: "POST",
- colNames:['编号', '作者', 'ISBN','重量','描述'], //表头
- colModel:[ //这里会根据index去解析jsonReader中root对象的属性,填充cell
- {name:'id', index:'id', width:55, align:"center",sortable:false},
- {name:'author', index:'author', width:100, sortable:false},
- {name:'isbn', index:'isbn', width:120,align:"right", sortable:false},
- {name:'weight', index:'weight', width:80,align:"center", sortable:false},
- {name:'wareDesc', index:'wareDesc', width:400, sortable:false}
- ],
- width: 'auto', //数字 & 'auto','100%'
- height: 200,
- rowNum: 5, //每页记录数
- rowList:[5, 10,20,30], //每页记录数可选列表
- pager: '#pager2', //分页标签divID
- viewrecords: true, //显示记录数信息,如果这里设置为false,下面的不会显示 recordtext: "第{0}到{1}条, 共{2}条记录", //默认显示为{0}-{1} 共{2}条 scroll: false, //滚动翻页,设置为true时翻页栏将不显示
- /**这里是排序的默认设置,这些值会根据列表header点击排序时覆盖*/ sortable: false,
- sortname: "warename",
- sortorder: "desc",
- caption:"商品列表", //显示查询结果表格标题
- rownumbers: true, //设置列表显示序号,需要注意在colModel中不能使用rn作为index
- rownumWidth: 20, //设置显示序号的宽度,默认为25
- multiselect: true, //多选框
- multiboxonly: true, //在点击表格row时只支持单选,只有当点击checkbox时才多选,需要multiselect=true是有效
- prmNames : { //如当前查询实体为ware,这些可以在查询对象的superObject中设定
- page: "wareDetail.page",
- rows: "wareDetail.rows",
- sort: "wareDetail.sidx",
- order: "wareDetail.sord",
- search: "wareDetail.search"
- },
- jsonReader:{ //server返回Json解析设定
- root: "list", //对于json中数据列表
- page: "page",
- total: "totalPage",
- records: "totalCount",
- repeatitems: false,
- }
- });
- $("#jqGridId").jqGrid('navGrid','#pager2'{edit:false,add:false,del:false,search:false});//这里设定分页bar显示的信息
以上各个参数的含义已经做了说明,具体可见上面文档的详细介绍。
prmNames: 这些参数每次会作为请求参数传递给server端,一般维持分页、排序等信息。可在查询对象中统一声明这些属性,与这里设置保持一致。如:
- public class JqGridQueryBase implements Serializable {
- private static final long serialVersionUID = -2849625318773684220L;
- /** 当前页面 */
- private int page;
- /** 每页的记录数 */
- private int rows;
- /** 查询字段值 */
- private String search;
- /** 排序字段和排序方式如:username/asc */
- private String sidx;
- private String sord;
- /** 分页信息:总记录数 */
- private int totalCount;
jsonReader: 与prmNames一样,是与server端Json格式交互的解析方式,root元素是一个json数组,解析colModel中的元素,而其他则涉及分页等信息。比如我们在Action中每次返回的对象为PageModule,可定义为:
- public class PageModule<T> extends JqGridQueryBase {
- private static final long serialVersionUID = -663611670315885315L;
- /** 查询返回结果数据 */
- private List<T> list = new ArrayList<T>();
colModel: colModel对json数组中对象如何解析填充到表格的cell的设定,包括基本的name、index、width、formater等,具体见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
比如下设置:
- name :为Grid中的每个列设置唯一的名称,这是一个必需选项,其中保留字包括subgrid、cb、rn。
- index :设置排序时所使用的索引名称,这个index名称会作为sidx参数(prmNames中设置的)传递到Server。
- label :当jqGrid的colNames选项数组为空时,为各列指定题头。如果colNames和此项都为空时,则name选项值会成为题头。
- width :设置列的宽度,目前只能接受以px为单位的数值,默认为150。
- sortable :设置该列是否可以排序,默认为true。
- search :设置该列是否可以被列为搜索条件,默认为true。
- resizable :设置列是否可以变更尺寸,默认为true。
- hidden :设置此列初始化时是否为隐藏状态,默认为false。
- formatter :预设类型或用来格式化该列的自定义函数名。常用预设格式有:integer、date、currency、还支持custom的方式
以上个参数含义来自http://blog.csdn.net/jpr1990/article/details/6891115
比如对价格需要加前缀和分割可以如下设定:
- {name:'price',index:'price', width:80,align:"right", formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},
支持下拉select的设定:
- {name:'valid',index:'valid', width:100,align:"center", formatter:'select',edittype:'select', editoptions:{value:"0:现货;1:可配货;2:无货"}}
显示链接:
- {name:'warename', index:'warename', width:300,sortable:false, formatter:'showlink', formatoptions:{baseLinkUrl:'query.action', addParam: '&action=edit'}},
4、常用方法(methods)
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
jqGrid支持两种方式调用函数方法:
- jQuery("#grid_id").jqGridMethod( parameter1,...parameterN );
- jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
下面是新的API,推荐使用新的调用方法,也支持链式调用,如:
- jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");
1、新增{rowid, data, position(first、before、last、after)}
- $("#jqGrid_id").jqGrid("addRowData", "1" ,{'name':'zhangsan', 'age': 20}, "first" );
2、清空grid
- $("#jqGrid_id").jqGrid("clearGridData");
3、返回当前grid序号
- $("#jqGrid_id").jqGrid('getDataIDs');
4、根据rowID获取当前row的值
- $("#jqGrid_id").jqGrid('getRowData', rowIds[i]);
5、设置某row值
- $("#jqGrid_id").jqGrid('setRowData', rowIds[i], {});
- var rowIds = $("#jqGrid_id").jqGrid('getDataIDs');
- if(rowIds){
- for(var i = 0, j = rowIds.length; i < j; i++) {
- var curRowData = $("#jqGrid_id").jqGrid('getRowData', rowIds[i]);
- //curRowData = {"name1":"value1","name2":"value2","name3":"value3"...}
- if(curRowData['name1'] == ""){
- //dosomething
- }
- //更改:更改name1的值
- $.extend(curRowData, {"name1":"newValue1"})
- $("#jqGrid_id").jqGrid('setRowData', rowIds[i], curRowData);
- }
- }
6、获取grid参数.
name表示grid的options:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
- $("#jqGrid_id").jqGrid('getGridParam','name');
7、设置grid参数,与上面的方法对应
- $("#jqGrid_id").jqGrid('setGridParam', 'name');
如下常见需要获取的参数:
- #获取总记录数
- $("#jqGrid_id").jqGrid('getGridParam','records');
- #获取请求参数
- $("#jqGrid_id").jqGrid('getGridParam','postData');
- #获取选中的row,返回string
- $("#jqGrid_id").jqGrid("getGridParam","selrow");
- #获取选中的多个row,返回Array
- $("#jqGrid_id").jqGrid("getGridParam","selarrrow");
例子:对当前默认请求添加新的请求参数
- var postData = $("#jqGrid_id").jqGrid('getGridParam','postData'); $.extend(postData , {"name1":"newValue1"}) $("#jqGrid_id").jqGrid("setGridParam", {datatype: "json" }).trigger("reloadGrid", [{page:1}]);
同时,在实际的使用场景中,我们可能是需要选择通过选择表单的值再进行查询:
- $("#queryBtn").bind("click", function() {
- var sdata = {
- "ware.warename" : $("#warenameId").val(),
- "ware.number" : $("#numberId").val(),
- "ware.valid" : $("#validId").val()
- };
- var postData = $("#jqGridId").jqGrid("getGridParam", "postData");
- $.extend(postData, sdata);
- $("#jqGridId").jqGrid("setGridParam", {search: true}).trigger("reloadGrid", [{page:1}]);
- });
8、删除
- $("#jqGrid_id").jqGrid("delRowData", rowid); //前台删除
在使用上述API进行批量删除时,是根据rowid去删除指定的行,但是在删除过程中rowid会导致变化,如果采用下面的方式删除会导致某些行不能被删除:
- var gr = $("#jqGrid_id").jqGrid("getGridParam","selarrrow"); //删除选中的出库单
- for ( var i = 0, j = gr.length; i < j; i++) {
- $("#jwGrid_id").jqGrid('delRowData', gr[i]);
- }
在网上找到一个解决方案是:
- jqgird
- jqGird
- JQGird中几点
- JQGird API
- JqGird 格式化(三)
- JQgird 方法大全
- jqGird 学习小结
- JqGird 事件 方法(二)
- JqGird 翻页 按钮(四)
- jqGird错误“decimalSeparator”的解决办法
- jQuery 表格插件jqGird学习
- jqgird 毫秒值转换成日期
- jQuery学习之:jqGird表格插件,第一个demo
- jqgird 设置多选 只能选中 最后一行 选不中鼠标点击的一行
- LPWAN时代LoRa的机遇与挑战浅析
- response.setContentType(MIME)的作用
- LPWAN技术在智慧城市中的应用
- 决策树系列算法总结(ID3, C4.5, CART, Random Forest, GBDT)
- 数据库事务的四大特性和隔离级别
- jqGird
- 1.JSON基础语法
- JDBC事务与Hibernate事务
- 故障树定性分析
- Python垃圾回收机制(二)
- springboot基础学习
- 技术不断突破 未来3年LoRa芯片将连续翻倍增长
- python pprint模块
- 解读The Python Tutorial(九)——类