登录
注册
一键加入QQ群
友善之臂官方网站
首 页
联系我们
淘宝店铺
维基教程
资料下载
搜索帖子!
NanoPC-T2
Core4418
NanoPC-T3 Plus
Core6818
NanoPi-M4B
NanoPC-T4
NanoPC-T6
NanoPi-NEO
NanoPi-NEO Core
NanoPi-NEO Air
NanoPi-M1 Plus
NanoPi-Duo2
NanoPi-NEO3
核心板:
Smart210
Tiny210
Smart4418
Smart6818
SOM-RK3399V2
CM3588(新品)
路由器:
R1
R1S
R2S
R2S Plus
R2C Plus
R4S
R5S
R5C
R6C
R6S
热门版块:
Linux技术交流区
友善之臂最新动态
开发板实战手册及教程
NanoPi 玩家交流区
ROM发布区
Android技术交流区
默认风格
用户中心首页
编辑个人资料
查看个人资料
好友列表
用户权限查看
积分管理
积分转换
特殊组购买
收藏夹
我的主题
基本统计信息
到访IP统计
管理团队
管理统计
在线统计
会员排行
版块排行
帖子排行
个人首页
我的收藏
好友近况
友善之家
Linux技术交流区
Web前端框架LigerUI之Grid使用方法(一)
友友粉丝快线
开发板销售中心
嵌入式最新资讯
友善之臂最新动态
友善之臂官方客服中心
开发板实战手册及教程
应用方案和定制开发
NanoPi 交流与讨论
NanoPi 玩家交流区
ROM发布区
硬软DIY及开发
嵌入式交流与讨论
Android技术交流区
Linux技术交流区
U-boot技术交流区
WinCE技术交流区
Ubuntu技术交流区
裸机程序和微型OS
OpenWRT讨论区
开发板硬件讨论区
相关资料下载及使用技巧
站点服务
二手交易区
我的论坛我的贴
站务管理与公告
上一主题
下一主题
新 帖
主题 : Web前端框架LigerUI之Grid使用方法(一)
复制链接
|
浏览器收藏
|
打印
qdjianghao
级别: 新手上路
作者资料
发送短消息
加为好友
UID:
111595
精华:
0
发帖:
19
金钱:
95 两
威望:
19 点
贡献值:
0 点
综合积分:
38 分
注册时间:
2014-12-31
最后登录:
2016-04-29
楼主
发表于: 2015-01-14 15:05
只看楼主
|
小
中
大
Web前端框架LigerUI之Grid使用方法(一)
在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率。比较常见的有extjs、easyui、MiniUI、JQuery UI、DWZ、Liger UI、QUI等等,这些框架中有国外的,有国内的,有收费的、也有开源免费的,他们有各自的优势,也有各自的不足。在这里看一下杰瑞教育的老师给大家介绍Liger UI框架中一些常见组件的用法。
LigerUI演示地址:www#ligerui#com
LigerUI API地址:api#ligerui#com/
首先给大家介绍最常用的数据展示组件Grid,使用步骤如下:
发布应用后可查看效果如下:
以上只是grid简单的构建过程,下面看看如何使用grid展示数据
ligerGrid显示数据采用 json对象,杰瑞教育的老师强调只需要给grid的url属性指定一个后台地址,默认情况下grid会自动发送异步请求向指定程序请求数据。注意默认情况下grid要求的json数据格式如下:
{Rows:[{},{}],Total:2};
我们可以通过指定ligerGrid的root和record属性来改变数据源属性和数据总记录属性。
以下代码为后台加载数据的Serlvet的关键代码,如要用来构建grid需要的json格式的字符串数据。
执行效果如下:
在这里要注意,杰瑞教育的老师强调在实际应用中采用的分页方式基本上都是后台分页,即在数据库中分页,这里主要是演示,直接采用了客户端分页,默认情况下dataAction的值为server即为服务器分页。
从效果图中我们可以看到,性别列显示的内容是代码,显然不符合要求,ligerGrid为我们提供了单元格渲染器,可以帮助我们完成我们想要的效果。
继续修改grid 列属性如下:
运行程序,效果如下:
由上可知利用render我们可以完成自定义单元格。
当数据大用户多的时候,我们不希望用户打开页面立即显示数据,这样会服务器造成不小的压力,而是当用户输入查询条件并点击查询后,在进行加载数据。
针对此问题,杰瑞教育老师说修改js代码如下可以实现根据输入条件加载数据:
运行效果如下:
杰瑞教育原创,转载请注明出处!查看原文点击:杰瑞教育博客园!源码下载请到:杰瑞教育百度云盘!
顶端
回复
引用
分享
上一主题
下一主题
友善之家
Linux技术交流区
http://www.aiothome.net
访问内容超出本站范围,不能确定是否安全
继续访问
取消访问