jquerygrid参考.doc_第1页
jquerygrid参考.doc_第2页
jquerygrid参考.doc_第3页
jquerygrid参考.doc_第4页
jquerygrid参考.doc_第5页
已阅读5页,还剩1页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

使用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 / 总

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论