LigerUI之Grid使用详解(一)——显示数据 --分页
2024-10-07 08:11:39
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();
});
运行效果如下:
最新文章
- vnc服务的安装与配置
- Retrofit源码分析(一)
- c# BlowFish 高速 对称加密
- 一个App需要的东西
- MVC学习笔记--跟小静学MVC相关语法特性小补习
- PLSQL_性能优化工具系列16_Best Practices: Proactively Avoiding Database
- C语言的本质(11)——指针与数组
- Centos6.5升级gcc for qt5.3.1
- ASP.NET Web API 自定义 HttpParameterBinding
- 第14章 Linux开机详细流程
- Power BI连接SSAS(微软的分析服务)进行权限控制(本地部署)
- Springboot入门之分布式事务管理
- 【极简】如何挑选合适的百度BCC,并安装宝塔控制面板
- 《精通Oracle SQL(第2版)》PDF
- Spring Security的核心拦截器
- Appium Hybrid混合应用测试——Native切换WebView
- 使用linux计划任务自动拉起停止的通达OA服务apache和mysql服务
- 配置nginx实现windows/iis应用负载均衡(转载)
- Zabbix显示乱码解决办法
- java 实例化泛型且赋值
热门文章
- net core体系-web应用程序-4asp.net core2.0 项目实战(任务管理系统)-2项目搭建
- Android-XML
- RxJAVA notes
- 将ActiveX打包成CAB发布的注意事项
- 归并排序&;&;归并排序求逆序对
- 【ASP.NET】Validation 服务器控件
- 十三、事务、连接池 、ThreadLocal 、BaseServlet自定义Servlet父类 、 DBUtils &#224; commons-dbutils
- Java是如何加载资源文件的?(源码解毒)
- 107个JS常用方法(持续更新中)
- doubleclick cookie、动态脚本、用户画像、用户行为分析和海量数据存取 推荐词 京东 电商 信息上传 黑洞 https://blackhole.m.jd.com/getinfo