jquerygrid参考.doc

使用UI组件就必须导入所需要的架包Ui组件属于jquery的插件，故也需要导入核心包/jquery核心包/jqueryUI包/jquery 布局包/jquery国际化包 en代表英文/UI包/jquerygrid综合包在美观上，网页中优化美化方面使用CSS，故我们也需要导入CSS文件表格由 表头 数据构成，故我们需要对表格的大小等进行必要的设置jQuery(document).ready(function()jQuery(#gridTable).jqGrid( 设置一个加载完成后执行的事件url:aaa, 表格的数据有目标 aaa提供（servlet）datatype: json, 数据类型为jsonheight: 250,表的高度为 250colNames:编号,用户名, 性别, 邮箱, QQ,手机号,出生日期,设置由7列构成，列名分别为数组里内容colModel: name:bh,index:id, width:60, , name:userName,index:userName, width:90, name:gender,index:gender, width:90, name:email,index:email, width:125,sorttype:string, name:QQ,index:QQ, width:100, name:mobilePhone,index:mobilePhone, width:120, name:birthday,index:birthday, width:100 , 设置每列的name名 （与返回的数据相关联） index名（暂时未用到）以及列的宽度rowNum:10, rowList:10,20,30, 分页属性的设置，当前显示10条数据每页显示的数据选项pager:#gridPager,分页div的idcaption: TABLE整个表格显示的说明文字为servlet对json的支持需要导入些jar的架包（放入WEB-INF/LIB中）commons-beanutils-bean-collections.jarcommons-beanutils-core.jarcommons-beanutils.jarcommons-collections.jarcommons-lang-2.4.jarcommons-logging.jarezmorph-1.0.4.jarjson-lib-2.1-jdk15.jarlog4j-1.2.12.jar类中返回一个JSONObject（键/值）的数据（JSONObject代表Map JSONArray代表List数组）需要返回的数据包括jsonObj.put(page, 1); / 当前页 jsonObj.put(total, 2); / 总页数 jsonObj.put(records, 12); / 总记录数 jsonObj.put(rows, rows);/生成表格内容的数据其中rows是一个数组（表格由多行构成）数组里面放入的是MAP（每行有多列构成）故rows定义为JSONArray而rows.add的为一个JSONObject例：即ListMap的结构JSONObject jsonObj = new JSONObject(); / 根据jqGrid对JSON的数据格式要求给jsonObj赋值 jsonObj.put(page, 1); / 当前页 jsonObj.put(total, 2); / 总页数 jsonObj.put(records, 12); / 总记录数 / 定义rows，存放数据 JSONArray rows = new JSONArray(); / 放入4条数据 for(int i=0;i13;i+) / 存放一条记录的对象 JSONObject cell = new JSONObject(); cell.put(id, i); if(i%2=0) cell.put(userName, 王五); cell.put(gender, 女); else cell.put(userName, 张三丰); cell.put(gender, 男); cell.put(email, ); cell.put(QQ, 772+i+1837+i); cell.put(mobilePhone, 132+i+1837+i+3+i); cell.put(birthday, 198+i+-10-+1+i); / 将该记录放入rows中 rows.add(cell); / 将rows放入json对象中 jsonObj.put(rows, rows); 在通过response返回1. jquery ajax提交向struts2jquery对ajax进行的非常的简单化即如同做了个模具，我们只要简单的设置就可以实现起提交$.post(“aa.action”,bz:”fdfd”,function(da)alert(da.bz)实现struts2对json的支持需要导入2个新包(除struts2基本包以外的包)分别为：32为对struts2.0的支持在struts.xml中page需要 extends=json-default而返回类型也需要设置为type=json在Action类中注意：1. 不能继承actionsupport类2. 返回数据必须为”success”需要接收或返回什么数据只需要有对应属性以及其get/set方法即可、2. jquerygrid与struts2的集成由昨天所学习的内容可以知道jquery ajax与struts2的集成而jgrid使用struts2实现数据传递变化并不大。只需要将url提交向struts2的action，并将struts.xml按照要求进行配置在Action类中返回数据发生了变化：4个必须的属性Int page / 当前页Int total / 总