《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;
