LigerUI之Grid使用详解(一)——显示数据 --分页
http://www.cnblogs.com/jerehedu/p/4218560.html
首先给大家介绍最常用的数据展示组件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();
});

运行效果如下:
LigerUI之Grid使用详解(一)——显示数据 --分页的更多相关文章
- LigerUI之Grid使用详解(一)——显示数据
目录: 一.概述 二.Grid使用步骤 三.使用Grid展示数据 四.源码下载 一.概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏 ...
- 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 ...
随机推荐
- 原子动作检测 A Better Baseline for AVA
本文将Faster-RCNN用在了I3D的feature map上,用于视频中多人多动作的检测 challege比赛第二名的整体方法是将Faster-RCNN作用在I3Dfeature上.训练时,以标 ...
- Consideration about improving mathematics study
In this article, I’ll present my ideas about how to improve mathematics study, which are the forewor ...
- 你好!酷痞Coolpy 之 Linux篇
欢迎你进入酷痞的物联网世界.这里有着自由的空气和自然的气息.接下来我将告诉你如果一步步建立一个自己专属的物联网平台. 由于目前的酷痞的官方域名还没有通过备案所以现在用临时域名解说本说明. 最终酷痞的官 ...
- Codeforces 840C On the Bench dp
On the Bench 两个数如果所有质因子的奇偶性相同则是同一个数,问题就变成了给你n个数, 相同数字不能相邻的方案数. dp[ i ][ j ]表示前 i 种数字已经处理完, 还有 j 个位置需 ...
- 20175312 2018-2019-2 《Java程序设计》结对编程练习_四则运算(第二周:整体性总结)
20175312 2018-2019-2 <Java程序设计>结对编程练习_四则运算(第二周:整体性总结) 结对对象与其博客链接 20175309 刘雨恒:https://www.cnbl ...
- CodeForces 721C Journey(拓扑排序+DP)
<题目链接> 题目大意:一个DAG图有n个点,m条边,走过每条边都会花费一定的时间,问你在不超过T时间的条件下,从1到n点最多能够经过几个节点. 解题分析:对这个有向图,我们进行拓扑排序, ...
- 使用boost.python封装C++库
使用boost.python封装C++库 C++以高性能著称,但是编写较为复杂.而简洁是Python的强项.如果能珠联璧合,就能发挥两家之长.本文尝试用boost库的python模块封装C++ 前期准 ...
- Ganglia 调试技巧
转自:http://blog.csdn.net/xxd851116/article/details/25109043 Gmond # 检查Gmond服务是否正在运行,发出如下命令:ps aux | g ...
- tp3.2 模块单独配置数据库
一 $User = M('test','tp_','mysql://root:123456@localhost/new_lezhu#utf8'); 1.test -->表名 2.tp ...
- Ubuntu 安装 Redis和phpredis扩展
服务器Ubuntu16.04 环境php7.0+Apache /****************************开始安装Redis****************************/ 1 ...