基于EasyUI框架的Datagrid数据呈现.pdfVIP

ELECTRONICS WORLD ・技术交流 基于EasyUI框架的Datagrid数据呈现 成都理工大学信息科学与技术学院 朱 鹏 郭亚莎 【摘要】 随着web技术的发展 ，web应用逐渐趋向复杂化和大型化 。如何让开发人 员在短时间开发 出功能丰富易用的web程序是一个 亟待解决的问题 。EasyUI是一套基于J Query 的Web前端开发插件集合 ，使 用它可以比较容 易开发 出丰富美观的界 面。其 中Datagrid是 在Web开发 中使 用比较频繁的一种显示技术。Datagrid 涉及到J SON数据格式技术和异步加载模式技术。通过具体示例 ，对Easy UI框 架中的Datagrid具体 实现进行 了探讨。 【关键词】 EasyUI；Datagrid；web前端；J SON { 1.EasyUI技术介绍 total:14, rows:[{ JQuery EasyUI是一组基于JQuery 的用户界面插件集合，它在 “username ”:”张三” 优化了 Aj ax使用接口的同时，为Web开发提供了一系列的常用UI age:2 1, [1] 组件，包括菜单、对话框、布局、窗帘、表格、表单等等 。通 过它，开发人员不需要深入了解css样式，也不需要编写大量的 }] JavaScript代码，即可实现功功能丰富种类漂亮大方的前端界面。 } 该框架具有以下一系列特性： （1）插件小巧，占用资源较少，并 以下是j ava后台生成J SON 数据的部分代码，J SONArray. 且使用简单。 （2 ）跨浏览器的 Aj ax 解决方式，支持的市面上主 fromObj ect方法将集合对象转换成JSON字符串： 流浏览器，包括Internet Explorer 、Firefox 、Safari、Google Chrome String j son {\total\: 等。 （3 ）EasyUI支持两种渲染方式分别为j avascript方式 （如： + userDao.getTotal() + ,\rows\: $( ‘#d ’). datagrid ( {...}) ）和html标记方式 （如：class ”easyui- + JSONArray.fromObj ect(uList).toString() + }; datagrid “）。 （4 ）Jquery Easy UI框架支持HTML5[2] 。 其中total字段代表返回前端的总记录条数，datagrid根据当 前页数和每页大小来分页显示内容。当datagrid进行翻页查询 2.Datagrid功能分析 时，服务器端接收datagrid 自动发送的当前页数、每页大小、排