目录:

一、概述

二、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使用详解(一)——显示数据的更多相关文章

  1. LigerUI之Grid使用详解(一)——显示数据 --分页

    http://www.cnblogs.com/jerehedu/p/4218560.html 首先给大家介绍最常用的数据展示组件Grid,使用步骤如下: 1.页面中正确引入样式文件及相应组件 < ...

  2. LigerUI之Grid使用详解(三)——字典数据展示

    一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家 ...

  3. LigerUi之Grid使用详解(二)——数据编辑

    一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.所以上一篇文章为大家介绍了LigerGrid的显 ...

  4. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  5. linux dmesg命令参数及用法详解(linux显示开机信息命令)

    linux dmesg命令参数及用法详解(linux显示开机信息命令) http://blog.csdn.net/zhongyhc/article/details/8909905 功能说明:显示开机信 ...

  6. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

  7. 详解Kafka: 大数据开发最火的核心技术

    详解Kafka: 大数据开发最火的核心技术   架构师技术联盟 2019-06-10 09:23:51 本文共3268个字,预计阅读需要9分钟. 广告 大数据时代来临,如果你还不知道Kafka那你就真 ...

  8. LWIP network interface 即 LWIP 的 硬件 数据 接口 移植 首先 详解 STM32 以太网数据 到达 的第一站: ETH DMA 中断函数

    要 运行  LWIP  不光 要实现  OS  的 一些 接口  ,还要 有 硬件 数据 接口 移植 ,即 网线上 来的 数据 怎么个形式 传递给  LWIP ,去解析 做出相应的 应答  ,2017 ...

  9. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

随机推荐

  1. [CC-FNCS]Chef and Churu

    [CC-FNCS]Chef and Churu 题目大意: 一个长度为\(n(n\le10^5)\)的数列\(A_{1\sim n}\),另有\(n\)个函数,第\(i\)个函数会返回数组中标号在\( ...

  2. node-webkit开发桌面应用

    Node-Webkit能够做什么呢?(打开链接看discuss) github 项目源:https://github.com/rogerwang 导言 node-webkit 是一个很神奇的桌面客户端 ...

  3. npm 升级自身

    用cue-cli 生成新项目 提示升级npm 解决方案: npm install -g npm 呵呵呵,简直太简单了   然而今天是2016.11.11

  4. 【原】Spring整合Redis(第三篇)—盘点SDR搭建中易出现的错误

    易错点01:Spring版本过低导致的错误[环境参数]Redis版本:redis-2.4.5-win32-win64Spring原来的版本:4.1.7.RELEASESpring修改后的版本:4.2. ...

  5. 关于 TRegEx.Split()

    表达式中的括号将严重影响分割结果. uses RegularExpressions; const FSourceText = '1: AAA 2: BBB 3: CCC'; // 分隔符将有三部分构成 ...

  6. QNJR-GROUP/EasyTransaction: 依赖于Spring的一个柔性事务实现,包含 TCC事务,补偿事务,基于消息的最终一致性事务,基于消息的最大努力交付事务交付QNJR-GROUP/EasyTransaction: 依赖于Spring的一个柔性事务实现,包含 TCC事务,补偿事务,基于消息的最终一致性事务,基于消息的最大努力交付事务交付

    QNJR-GROUP/EasyTransaction: 依赖于Spring的一个柔性事务实现,包含 TCC事务,补偿事务,基于消息的最终一致性事务,基于消息的最大努力交付事务交付 大规模SOA系统的分 ...

  7. 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 ...

  8. 使用git pull文件时和本地文件冲突怎么办

    在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息:error: Your local changes to 'c/environ.c' would be overwritten by ...

  9. Android内存机制分析——堆和栈

    昨天用Gallery做了一个图片浏览选择开机画面的功能,当我加载的图片多了就出现OOM问题.以前也出现过这个问题,那时候并没有深究.这次打算好好分析一下Android的内存机制. 因为我以前是做VC+ ...

  10. .NET开源作业调度框架(Quartz.NET和FluentScheduler)实战项目演练

    一.课程介绍 明人不说暗话,跟着阿笨一起玩NET .本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享 ...