Web前段框架LigerUI之Grid使用方法(一)

目录:

一、概述

二、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();
              });

  运行效果如下:

源码下载见:百度云代码分享

时间: 2024-11-02 23:24:55

Web前段框架LigerUI之Grid使用方法(一)的相关文章

学习ASP.NET Web API框架揭秘之“HTTP方法重写”

最近在看老A的<ASP.NET Web API 框架揭秘>,这本书对于本人现阶段来说还是比较合适的(对于调用已经较为熟悉,用其开发过项目,但未深入理解过很多内容为何可以这样“调用”).看到第四章了,有些内容看着虽能理解,但未遇到过具体的问题,看起来也就没有豁然开朗之感.同时,有些内容是一眼就觉得“这是干货”,可能是之前遇到过某些问题,当时用一些搓办法解决,但现在看到书中的示例就如获至宝.所以,就挑些单独能拎出来且马上就能在项目中应用的内容出来与大家分享交流下吧.其中会穿插一些框架中的知识点.不

基于Selenium的web自动化框架

1 什么是selenium Selenium 是一个基于浏览器的自动化工具,它提供了一种跨平台.跨浏览器的端到端的web自动化解决方案.Selenium主要包括三部分:Selenium IDE.Selenium WebDriver 和Selenium Grid: Selenium IDE:Firefox的一个扩展,它可以进行录制回放,并可以把录制的操作以多种语言(例如java,python等)的形式导出成测试用例. Selenium WebDriver:提供Web自动化所需的API,主要用作浏览

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

一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家介绍了表格的基本的展示数据用法.(传送门:LigerUI之Grid使用详解(一)--显示数据 .LigerUi之Grid使用详解(二)--数据编辑 ) 在实际应用开发中,我们会经常遇到这样的场景,在展示业务数据的时候需要把业务数据中的参数项或者字典项的编码转换成参数名称或者字典名称展示出来.在这里本

LigerUI之Grid(一)

目录: 一.概述 二.Grid使用步骤 三.使用Grid展示数据 四.源码下载 一.概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.比较常见的有extjs.easyui.MiniUI.JQuery UI.DWZ.Liger UI.QUI等等,这些框架中有国外的,有国内的,有收费的.也有开源免费的,他们有各自的优势,也有各自的不足.在这里给大家介绍Liger UI框架中一些常见组件的用法. LigerU

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

一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.所以上一篇文章为大家介绍了LigerGrid的显示数据的基本用法(传送门:http://www.cnblogs.com/jerehedu/p/4218560.html ),本次为大家继续介绍Grid的其他用法,比如使用LigerGrid如何进行数据编辑与保存. 我们在做应用时可能会遇到这样的需求,要求在同一个页面可以同时编辑主从表数据并传递到后台

推荐几个精致的web UI框架及常用前端UI框架

以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. gitHub地址:https://github.com/aliceui/aliceui.github.io 2.Amazeui Amaze UI 是一个轻量级. Mobile first 的前端框架, 基于开源社区流行前端框架编写的. 官网地址:http://amazeu

Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案 (精髓)

前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说起.问题大概有以下几点: 1.项目层的文件夹结构 2.解决MVC的Controller和Web API的Controller类名不能相同的问题 3.给MVC不同命名空间的Area的注册不同的路由 4.让Web API路由配置也支持命名空间参数 5.MVC及Web API添加身份验证及错误处理的过滤器

Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案

前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说起.问题大概有以下几点: 1.项目层的文件夹结构 2.解决MVC的Controller和Web API的Controller类名不能相同的问题 3.给MVC不同命名空间的Area的注册不同的路由 4.让Web API路由配置也支持命名空间参数 5.MVC及Web API添加身份验证及错误处理的过滤器

React 还是 Vue: 你应该选择哪一个Web前端框架?

学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西,请使用Vue    如果你的应用需要尽可能的小和快,请使用Vue    如果你计划构建一个大型应用程序,请使用React    如果你想要一个同时适用于Web端和原生App的框架,请选择React    如果你想要最大的生态圈,请使用React    如果你已经对其中一个用得满意了,就没有必要换了