LigerUI之Grid使用详解(一)——显示数据
目录:
一、概述
二、Grid使用步骤
四、源码下载
一、概述 |
在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率。比较常见的有extjs、easyui、MiniUI、JQuery UI、DWZ、Liger UI、QUI等等,这些框架中有国外的,有国内的,有收费的、也有开源免费的,他们有各自的优势,也有各自的不足。在这里给大家介绍Liger UI框架中一些常见组件的用法。
LigerUI演示地址:http://www.ligerui.com
LigerUI API地址:http://api.ligerui.com/
二、Grid使用步骤 |
首先给大家介绍最常用的数据展示组件Grid,使用步骤如下:
1、页面中正确引入样式文件及相应组件
<link href="<%=request.getContextPath()%>/ui/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/core/base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/lib/ligerUI/js/plugins/ligerGrid.js"></script>
2、 在body中添加div
<div id="maingrid"></div>
3、 编写js代码
<script type="text/javascript">
$(function(){
$("#maingrid").ligerGrid({
width:600,
columns:[
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex"},
{display:"年龄",name:"stuAge"}
]
});
});
</script>
发布应用后可查看效果如下:
以上只是grid简单的构建过程,下面看看如何使用grid展示数据
三、使用Grid展示数据 |
ligerGrid显示数据采用 json对象,我们只需要给grid的url属性指定一个后台地址,默认情况下grid会自动发送异步请求向指定程序请求数据。注意默认情况下grid要求的json数据格式如下:
{Rows:[{},{}],Total:2};
我们可以通过指定ligerGrid的root和record属性来改变数据源属性和数据总记录属性。
以下代码为后台加载数据的Serlvet的关键代码,如要用来构建grid需要的json格式的字符串数据。
resp.setContentType("text/html;charset=utf-8");
JSONObject obj = new JSONObject();
List<Map<String, String>> list =initStudentData();
obj.put("Rows", list);
obj.put("Total", list.size());
PrintWriter out = resp.getWriter();
out.write(obj.toString());
out.close();
修改js代码如下:
var grid=$("#maingrid").ligerGrid({
width:600,
columns:[
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex"},
{display:"年龄",name:"stuAge"}
],
//值为local,数据在客户端进行分页
dataAction:"local",
//数据请求地址
url:"main/studentServlet.action?reqCode=findStudents",
//数据书否分页,默认为true
usePager:true,
pageSize:"8",//分页页面大小
pageSizeOptions:[8,16,32]//可指定每页页面大小
});
执行效果如下:
在这里要注意,我们在实际应用中采用的分页方式基本上都是后台分页,即在数据库中分页,这里主要是演示,直接采用了客户端分页,默认情况下dataAction的值为server即为服务器分页。
从效果图中我们可以看到,性别列显示的内容是代码,显然不符合要求,ligerGrid为我们提供了单元格渲染器,可以帮助我们完成我们想要的效果。
继续修改grid 列属性如下:
columns:[
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex",
render:function(rowData){
if(rowData.stuSex=="0"){
return "男";
}else{
return "女";
}
}
},
{display:"年龄",name:"stuAge",
render:function(rowData){
if(parseInt(rowData.stuAge)<22){
return "<span style='color:red'>"+rowData.stuAge+"</span>";
}
return rowData.stuAge;
} }
]
运行程序,效果如下:
由上可知利用render我们可以完成自定义单元格。
当数据大用户多的时候,我们不希望用户打开页面立即显示数据,这样会服务器造成不小的压力,而是当用户输入查询条件并点击查询后,在进行加载数据。
修改js代码如下可以实现根据输入条件加载数据:
var grid=$("#maingrid").ligerGrid({ width:600,
columns:[
{display:"学号",name:"stuNo"},
{display:"姓名",name:"stuName"},
{display:"性别",name:"stuSex",
render:function(rowData){
if(rowData.stuSex=="0"){
return "男";
}else{
return "女";
}
}
},
{display:"年龄",name:"stuAge",
render:function(rowData){
if(parseInt(rowData.stuAge)<22){
return "<span style='color:red'>"+rowData.stuAge+"</span>";
}
return rowData.stuAge;
} }
] }); $("#btnLoad").click(function(){
var name=$("#stuname").val();
grid.set({
//值为local,数据在客户端进行分页
dataAction:"local",
//数据请求地址
url:"main/studentServlet.action?reqCode=findStudents",
//数据书否分页,默认为true
usePager:true,
pageSize:"8",//分页页面大小
pageSizeOptions:[8,16,32],//可指定每页页面大小
parms:[{name:"stuname",value:name}]
});
grid.loadData();
});
运行效果如下:
出处:http://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
LigerUI之Grid使用详解(一)——显示数据的更多相关文章
- LigerUI之Grid使用详解(一)——显示数据 --分页
http://www.cnblogs.com/jerehedu/p/4218560.html 首先给大家介绍最常用的数据展示组件Grid,使用步骤如下: 1.页面中正确引入样式文件及相应组件 < ...
- LigerUI之Grid使用详解(三)——字典数据展示
一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家 ...
- LigerUi之Grid使用详解(二)——数据编辑
一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.所以上一篇文章为大家介绍了LigerGrid的显 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- linux dmesg命令参数及用法详解(linux显示开机信息命令)
linux dmesg命令参数及用法详解(linux显示开机信息命令) http://blog.csdn.net/zhongyhc/article/details/8909905 功能说明:显示开机信 ...
- 详解vue的数据binding原理
自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...
- 详解Kafka: 大数据开发最火的核心技术
详解Kafka: 大数据开发最火的核心技术 架构师技术联盟 2019-06-10 09:23:51 本文共3268个字,预计阅读需要9分钟. 广告 大数据时代来临,如果你还不知道Kafka那你就真 ...
- LWIP network interface 即 LWIP 的 硬件 数据 接口 移植 首先 详解 STM32 以太网数据 到达 的第一站: ETH DMA 中断函数
要 运行 LWIP 不光 要实现 OS 的 一些 接口 ,还要 有 硬件 数据 接口 移植 ,即 网线上 来的 数据 怎么个形式 传递给 LWIP ,去解析 做出相应的 应答 ,2017 ...
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
随机推荐
- [CC-FNCS]Chef and Churu
[CC-FNCS]Chef and Churu 题目大意: 一个长度为\(n(n\le10^5)\)的数列\(A_{1\sim n}\),另有\(n\)个函数,第\(i\)个函数会返回数组中标号在\( ...
- node-webkit开发桌面应用
Node-Webkit能够做什么呢?(打开链接看discuss) github 项目源:https://github.com/rogerwang 导言 node-webkit 是一个很神奇的桌面客户端 ...
- npm 升级自身
用cue-cli 生成新项目 提示升级npm 解决方案: npm install -g npm 呵呵呵,简直太简单了 然而今天是2016.11.11
- 【原】Spring整合Redis(第三篇)—盘点SDR搭建中易出现的错误
易错点01:Spring版本过低导致的错误[环境参数]Redis版本:redis-2.4.5-win32-win64Spring原来的版本:4.1.7.RELEASESpring修改后的版本:4.2. ...
- 关于 TRegEx.Split()
表达式中的括号将严重影响分割结果. uses RegularExpressions; const FSourceText = '1: AAA 2: BBB 3: CCC'; // 分隔符将有三部分构成 ...
- QNJR-GROUP/EasyTransaction: 依赖于Spring的一个柔性事务实现,包含 TCC事务,补偿事务,基于消息的最终一致性事务,基于消息的最大努力交付事务交付QNJR-GROUP/EasyTransaction: 依赖于Spring的一个柔性事务实现,包含 TCC事务,补偿事务,基于消息的最终一致性事务,基于消息的最大努力交付事务交付
QNJR-GROUP/EasyTransaction: 依赖于Spring的一个柔性事务实现,包含 TCC事务,补偿事务,基于消息的最终一致性事务,基于消息的最大努力交付事务交付 大规模SOA系统的分 ...
- DMA : Timer Trigger Memory-to-memory mode,
The DMA channels can also work without being triggered by a request from a peripheral. This mode is ...
- 使用git pull文件时和本地文件冲突怎么办
在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息:error: Your local changes to 'c/environ.c' would be overwritten by ...
- Android内存机制分析——堆和栈
昨天用Gallery做了一个图片浏览选择开机画面的功能,当我加载的图片多了就出现OOM问题.以前也出现过这个问题,那时候并没有深究.这次打算好好分析一下Android的内存机制. 因为我以前是做VC+ ...
- .NET开源作业调度框架(Quartz.NET和FluentScheduler)实战项目演练
一.课程介绍 明人不说暗话,跟着阿笨一起玩NET .本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享 ...