《dwz嵌入jqGrid.docx》由会员分享,可在线阅读,更多相关《dwz嵌入jqGrid.docx(9页珍藏版)》请在金锄头文库上搜索。
1、dwz嵌入jqGrid前言:本篇主要介绍如何在dwz框架中嵌入jqGrid组件,因为dwz自带的表格组件功能不够全面,而jqGrid使用起来的确非常的不错,于是我们来看看两者结合起来有什么不一样吧。第一步:准备jqgrid组件,主要以下几个文件,见下图第二步:在index页面进行jqGrid组件的导入和本地化,见代码相关文章: dwz中对jqGrid设置a标签第三步:jsp中引入对应的js文件,一般情况下,我们都会把jsp和对应的js进行分离,通过script标签调用jqgrid初始化方法proxyListpageGrid.initjqgridPage();第四步:检索区域的页面构成见如下代码
2、,注意点:1.id一定要使用本页面特有的id,name也一样,如proxyListpage_pid;2.条件的内容初始化通过controller处理后,直接在页面上加载,如以下代码中的“类型”下拉框3.检索button调用jqgrid的检索方法,见如下proxyListpageGrid.gridReolad()。代理编号:代理名称:类型:$item.value状态:全部启用停收新单停用账户第五步:表格区域(jqgrid)的构成见如下代码,注意点:1.table上加上layoutH属性(可以根据页面调整)和class=jqgrid属性新建代理第六步:页面对应的js文件,详细介绍见以下表格及代码部
3、分这是第一部分,也就是jqgrid初始加载的方法1.整个js必须有自己的方法命名空间,如proxyListpageGrid2.jqgrid的id也必须是整个dwz中唯一的,限于dwz的框架处理方式3.指定url,如common.ctx + /member/jqgridProxysList.do,4.postData传递参数,如 pid : $(#proxyListpage_pid).val(),5.colNames中指定列名,colModel指定列格式6.其他参照左侧内容,保持不变var proxyListpageGrid = / 初期化设置 initSearch : function() $
4、(#proxyListpageGrid).jqGrid( url : common.ctx + /member/jqgridProxysList.do, datatype : xml, mtype : POST, postData : / 代理编号 pid : $(#proxyListpage_pid).val(), / 代理名称 pname : $(#proxyListpage_pname).val(), / 状态 status : $(#proxyListpage_status).val(), / 等级 proxylevel : $(#proxyListpage_style).val()
5、, loadui : disable, subGrid : true, autowidth : true, shrinkToFit : true, viewrecords : false, rownumbers : false, colNames : ID, 代理序列号, 代理编号, 代理名称, 会员编号, 会员数, 已开数, 未开数, 所属代理, 下级代理数, 停用账户时间, 最后登录时间, 停收新单时间, 状态, 操作, 解锁状态, colModel : name : id, index : id, hidden : true , name : proxyserial, index : p
6、roxyserial, hidden : true , name : pid, index : pid, width : 80, resizable : false, sorttype : text, align : left第二部分,指定jqgrid的数据格式以及分页标签1.xmlReader和左侧保持一致2.rowNum指定为50和后台的默认行数保持一致3.rowList指定分页的当前行数4.subGridRowExpanded为扩展的子表格xmlReader : repeatitems : false, root : PageGrid, row : map, page : page, t
7、otal : total, records : records, id : ID , rowNum : 50, rowList : 50, 100, 200, 300, pager : #proxyListpageGridPager, subGridRowExpanded : function(subgrid_id, row_id) 第三部分,配置子表格的创建方式1.基本内容都保持和左侧一致就可以了2.注意表格的id指定属性/ 获取会员请求地址 var initUrl = common.ctx + /member/jqgridMembersList.do; / 当前选择的父级代理信息 var rowData = $(#proxyListpageGrid).jqGrid(getRowData, row_id); / 创建子表格 var subgrid_table_id, pager_id; subgrid_table_id = subgrid_id + _t;