jqgrid 备忘
来源:互联网 发布:ubuntu uefi 安装 u盘 编辑:程序博客网 时间:2024/04/27 00:40
项目中应用到jqgird,然后研究了下,会了基本的表格搭建,今天总结一下。
在学习jqgrid的过程中,最主要的还是要阅读官方文档,官方文档里有大量的demo及源码非常实用。
中文官网:http://blog.mn886.net/jqGrid/
英文官网:http://www.trirand.com/blog/jqgrid/jqgrid.html
gridComplete 每次加载完数据或者jqGrid中的数据变动都会加载一次里面的函数,如果addRowData写在这里面则会无限循环执行里面的函数
loadComplete jqGrid加载完毕之后执行里面的函数,jqGrid中的数据变动不会执行loadComplete中的代码
项目中用过的jqgird实例:
- /**
- * options:创建表格所需要配的参数:<br>
- * { <br>
- * sid: service ID (必配)<br>
- * pagerId: 分页栏ID (必配,不显示分页栏可配为空字符串)<br>
- * colNames: 表格列的列名 (必配)<br>
- * colModels:表格列的属性 (必配)<br>
- * datatype : 服务器端返回的数据类型,默认为local(不加载),json(初始化就加载数据)(选配)<br>
- * height : 手动设置表格高度,默认为auto (选配)<br>
- * rowNum : 设置初始化显示表格记录数,默认显示10条数据,默认显示所有数据配为-1(选配)<br>
- * searchParam:搜集查询条件 (选配)<br>
- * formId : 条件查询formId (选配)<br>
- * shrinkToFit: 是否按比例初始化表格宽度(选配,默认按比例初始化,不按比例(即显示横向滚动条)配为true)<br>
- * rownumbers:是否显示行号 (选配,默认不显示,显示配为true)<br>
- * viewrecords:是否显示总记录数 (选配,默认显示,不显示配为true)<br>
- * rowList:是否显示可选记录数 (选配,默认为[10,20,50],不显示配为{},修改可配为 例:[5,10,20])<br>
- * multiselect:是否支持多选 (选配,默认支持,不支持配为true)<br>
- * pgbuttons:是否显示翻页按钮 (选配,默认显示,不显示配为true)<br>
- * pginput:是否显示跳转页面的输入框 (选配,默认显示,不显示配为true)<br>
- * caption:是否显示表格标题 (选配,默认不显示,显示直接配表格标题字符串)<br>
- * } <br>
- var grid_selector = "#grid-table";//定义一个变量grid_selector 值为"#grid-table" var pager_selector = "#grid-pager";//定义一个变量 pager_selector 值为 "#grid-pager" jQuery(grid_selector).jqGrid({ //jqgrid datatype:function(postData){ //ajax $.ajax({ url:"${pageContext.request.contextPath}/role/listRoleModifyHistory?roleId="+getQueryString("id"), data:postData, dataType:'json', complete:function(jsondata,stat){ if(stat=="success") { var thegrid = jQuery(grid_selector)[0]; thegrid.addJSONData(jsondata.responseJSON); } } }); }, height: 320, rownumbers :true, colNames:['日期','操作','内容','原因'], colModel:[ {name:'updatedOn',index:'updatedOn',width:100, sortable:false}, {name:'oper',index:'oper', width:180, sortable:false}, {name:'modifyData',index:'modifyData', width:180, sortable:false}, {name:'opDesc',index:'opDesc', width:160, sortable:false} ], viewrecords : true, // 是否记录总数 rowNum:10, //显示记录条数 rowList:[10,20,30],//下拉框 改变显示条数 pager : pager_selector,//定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置 altRows: true,// zebra-striped multiselect: false,//定义是否可以多选 multiboxonly: true, //只有选择checkbox才会起作用 loadComplete : function() {//jqgrid加载完毕后执行函数 var table = this; setTimeout(function(){//0秒后执行一次 updatePagerIcons(table);//调用updatePagerIcons(table) enableTooltips(table);}, 0);//调用enableTooltips(table) }, caption: "修改记录",//表头 autowidth: true//根据父元素比例调整宽度 }); //begin--table分页按钮 function updatePagerIcons(table) { var replacement = { 'ui-icon-seek-first' : 'icon-double-angle-left bigger-140', 'ui-icon-seek-prev' : 'icon-angle-left bigger-140', 'ui-icon-seek-next' : 'icon-angle-right bigger-140', 'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'}; $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);}) } function enableTooltips(table) { $('.navtable .ui-pg-button').tooltip({container:'body'});//提示框 $(table).find('.ui-pg-div').tooltip({container:'body'}); //提示框 }//end--table分页按钮 });
阅读全文
0 0
- JQGrid 备忘
- jqgrid 备忘
- JqGrid相关操作备忘
- JqGrid相关操作备忘 方法列表
- JqGrid相关操作备忘 方法列表
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘
- jqGrid
- Jqgrid
- JQGrid
- JQGrid
- jqGrid
- jqgrid
- jqgrid
- jqgrid
- jqgrid
- jqgrid
- jqgrid
- jqgrid
- 浅谈Python3.6版本的几种拷贝方式
- solr批量导入数据,配置步骤示例
- 内存对齐
- 悉尼峰会:Oslo组件的重大更新
- [NOIP2017普及组]T3棋盘
- jqgrid 备忘
- 2.6 数据连接的处理
- 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等
- Java Web后端--入职技能任务单(plugin表的dao层增删改查)六
- Linux Kernel 4.14 LTS RC7开发接近尾声,即将发布
- C++按位操作
- js
- solr删除指定id文档,删除查询到是所有索引数据,删除所有数据
- 20171115 自省