qdjianghao 2015-1-14 15:04
Web前端框架LigerUI之Grid使用方法(一)
[font=Georgia,] 在开发web信息管理系统时，使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果，而且能够解决大多数浏览器兼容问题，提升开发效率。比较常见的有extjs、easyui、MiniUI、JQuery UI、DWZ、Liger UI、QUI等等，这些框架中有国外的，有国内的，有收费的、也有开源免费的，他们有各自的优势，也有各自的不足。在这里看一下杰瑞教育的老师给大家介绍Liger UI框架中一些常见组件的用法。[/font]
[font=Georgia,] LigerUI演示地址：www#ligerui#com[/font]
[font=Georgia,] LigerUI API地址：api#ligerui#com/[/font]
[font=Georgia,][/font]
[font=Georgia,] 首先给大家介绍最常用的数据展示组件Grid，使用步骤如下：[/font]
[font=Georgia,][/font]
[font=Georgia,][img=600,476]http://s2.sinaimg.cn/mw690/005Bjkdlzy6PaLsMdtnb1&690[/img]
[/font]
[font=Georgia,] 发布应用后可查看效果如下：[/font]
[font=Georgia,][img=600,77]http://images.cnitblog.com/blog/708076/201501/121604090119160.png[/img][/font]
[font=Georgia,] 以上只是grid简单的构建过程，下面看看如何使用grid展示数据[/font]
[font=Georgia,][/font]
[font=Georgia,][/font]
[font=Georgia,] ligerGrid显示数据采用 json对象，杰瑞教育的老师强调只需要给grid的url属性指定一个后台地址，默认情况下grid会自动发送异步请求向指定程序请求数据。注意默认情况下grid要求的json数据格式如下：[/font]
{Rows:[{},{}],Total:2};
[font=Georgia,] 我们可以通过指定ligerGrid的root和record属性来改变数据源属性和数据总记录属性。[/font]
[font=Georgia,] 以下代码为后台加载数据的Serlvet的关键代码，如要用来构建grid需要的json格式的字符串数据。[/font]
[font=Georgia,][/font]
[font=Georgia,][img=600,449]http://s7.sinaimg.cn/mw690/005Bjkdlzy6PaLx49iCb6&690[/img]
[/font]
[font=Georgia,] 执行效果如下：[/font]
[font=Georgia,][img=600,301]http://images.cnitblog.com/blog/708076/201501/121546565266456.png[/img][/font]
[font=Georgia,] 在这里要注意，杰瑞教育的老师强调在实际应用中采用的分页方式基本上都是后台分页，即在数据库中分页，这里主要是演示，直接采用了客户端分页，默认情况下dataAction的值为server即为服务器分页。[/font]
[font=Georgia,] 从效果图中我们可以看到，性别列显示的内容是代码，显然不符合要求，ligerGrid为我们提供了单元格渲染器，可以帮助我们完成我们想要的效果。[/font]
[font=Georgia,] 继续修改grid 列属性如下：[/font]
[font=Georgia,][img=600,343]http://s9.sinaimg.cn/mw690/005Bjkdlzy6PaLDAh4Ye8&690[/img]
[/font]
[font=Georgia,] 运行程序，效果如下：[/font]
[font=Georgia,][img=600,171]http://images.cnitblog.com/blog/708076/201501/121548033543206.png[/img][/font]
[font=Georgia,] 由上可知利用render我们可以完成自定义单元格。[/font]
[font=Georgia,] 当数据大用户多的时候，我们不希望用户打开页面立即显示数据，这样会服务器造成不小的压力，而是当用户输入查询条件并点击查询后，在进行加载数据。[/font]
[font=Georgia,] 针对此问题，杰瑞教育老师说修改js代码如下可以实现根据输入条件加载数据：[/font]
[font=Georgia,][img=600,646]http://s5.sinaimg.cn/mw690/005Bjkdlzy6PaLIgO7ae4&690[/img]
[/font]
[font=Georgia,] 运行效果如下：[/font]
[font=Georgia,][img=600,138]http://images.cnitblog.com/blog/708076/201501/121549026049504.png[/img][/font]
[font=Georgia,][/font]
[font=Georgia,]杰瑞教育原创，转载请注明出处！查看原文点击：杰瑞教育博客园！源码下载请到：杰瑞教育百度云盘！[/font]