ligerui+json_001_实现表格（grid）的后台数据显示、分页

代码下载地址：

http://download.csdn.net/detail/poiuy1991719/8556841

效果：

需要导入的包：

01：编写界面：index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

<!-- 1:引入：js、css -->
<link
    href="${pageContext.request.contextPath }/ui/lib/ligerUI/skins/Aqua/css/ligerui-all.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript"
    src="${pageContext.request.contextPath }/ui/lib/jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/ui/lib/ligerUI/js/core/base.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath }/ui/lib/ligerUI/js/plugins/ligerGrid.js"></script>

<script type="text/javascript">
    /*
        1:编写js：利用ligerGrid创建数据显示区,：从Json获取数据:4:com.west.study.servlet.JsonServlet
     */

    $(function() {

        var grid = $("#main_grid").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/jsonServlet.action?reqCode=findStudents",
                //数据书否分页，默认为true
                usePager : true,
                pageSize : "8",//分页页面大小
                pageSizeOptions : [ 8, 16, 32 ],//可指定每页页面大小
                //数据刷新
                parms : [ {
                    name : "stuname",
                    value : name
                } ]
            });
            grid.loadData();
        });

    });
</script>

</head>

<body>
    ${pageContext.request.contextPath }
    <br>

    <button id="btnLoad">加载数据</button>
    <input type="text" name="stuname" id="stuname">
    <!-- 2：添加div -->
    <div id="main_grid"></div>
</body>
</html>

02:编写Json，servlet：

package com.west.study.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

@SuppressWarnings("serial")
public class JsonServlet extends HttpServlet {
    /** 4：doGet()，5：web.xml */
    @Override
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        String stuName = request.getParameter("stuName");
        System.out.println("获取名字！" + stuName);

        out.write(getJsonGridString());
        out.flush();
        out.close();

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        System.out.println("执行：doPost(),调用doGet()");
        doGet(req, resp);
    }

    /** 3：返回Json字符串 */
    public String getJsonGridString() {
        JSONObject jobj = new JSONObject();
        try {
            List<Map<String, String>> lm = initStudentData();
            jobj.put("Rows", lm);// 将lm放入Json
            jobj.put("Total", lm.size());// 将lm大小放入Json
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println("返回的字符串是：" + jobj.toString());
        return jobj.toString();
    }

    /** 2：创建数据List的Map数组 */
    public List<Map<String, String>> initStudentData() {
        List<Map<String, String>> lm = new ArrayList<Map<String, String>>();
        Map<String, String> map_01 = new HashMap<String, String>();
        map_01.put("stuNo", "J001");
        map_01.put("stuName", "张");
        map_01.put("stuAge", "21");
        map_01.put("stuSex", "1");
        lm.add(map_01);

        Map<String, String> map_02 = new HashMap<String, String>();
        map_02.put("stuNo", "J002");
        map_02.put("stuName", "张2");
        map_02.put("stuAge", "22");
        map_02.put("stuSex", "0");
        lm.add(map_02);

        Map<String, String> map_03 = new HashMap<String, String>();
        map_03.put("stuNo", "J003");
        map_03.put("stuName", "张3");
        map_03.put("stuAge", "23");
        map_03.put("stuSex", "1");
        lm.add(map_03);

        Map<String, String> map_04;
        for (int i = 0; i < 100; i++) {
            map_04 = new HashMap<String, String>();
            map_04.put("stuNo", i + "J003");
            map_04.put("stuName", i + "张");
            map_04.put("stuAge", i + "23");
            map_04.put("stuSex", "1");
            lm.add(map_04);
        }
        return lm;
    }

}

03：配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>JsonServlet</servlet-name>
        <servlet-class>com.west.study.servlet.JsonServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>JsonServlet</servlet-name>
        <url-pattern>/main/jsonServlet.action</url-pattern>
    </servlet-mapping>
</web-app>

总结：

1、igerGrid显示数据采用 json对象，我们只需要给grid的url属性指定一个后台地址，默认情况下grid会自动发送异步请求向指定程序请求数据。注意默认情况下grid要求的json数据格式如下：

{Rows:[{},{}],Total:2};

2、我们可以通过指定ligerGrid的root和record属性来改变数据源属性和数据总记录属性。

3、在这里要注意，我们在实际应用中采用的分页方式基本上都是后台分页，即在数据库中分页，这里主要是演示，直接采用了客户端分页，默认情况下dataAction的值为server即为服务器分页。

4、由上可知利用render我们可以完成自定义单元格。

5、当数据大用户多的时候，我们不希望用户打开页面立即显示数据，这样会服务器造成不小的压力，而是当用户输入查询条件并点击查询后，在进行加载数据。

6、parms：刷新，jQuery的刷新方法

7、ligerGrid：定义：var grid = $("#组件id").ligerGrid

　　7.1：columns（行），其属性有：display（列名称），name（指定那一列），render（语句返回的值，显示在界面上）。

　　7.2：set（设置），其属性有：dataAction（分页，local：浏览器分页），url（需要提交到的地址，处理数据地址），usePager（数据是否分页），pageSize（分页大小），pageSizeOptions（可设置的分页大小），parms（数据刷新），var=grid.loadData();（加载数据）

时间： 2024-10-14 14:02:41

ligerui+json_001_实现表格（grid）的后台数据显示、分页的相关文章

[ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel

继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目录 poi项目下载及加载 extjs前端导出设置 extjs后台对应的解决方案 创建excel工作簿 创建一个excel页签 生成excel样式并初始化 产生表格标题行build headers 构造数据行build rows poi项目下载及加载 POI项目是apache官网的一个开源项目,其主要

ExtJS4.2实例：表格Grid嵌套(内部Grid)-MVC模式

前文ExtJS4.2 Grid嵌套实例中讲解了如何在表格Grid中嵌套Grid,即外部Grid中每行分别展现为不同的内部Grid,比如常见的费用报销业务,费用类别有往返车费和住宿费,其中往返车费需要填写往返类型.交通工具.费用日期.出发地.目的地和金额,住宿费只需填写入住日期.离开日期.单价和金额,在一个表格中包含多种费用类别,每个费用类别下又有多条明细,所需实现的业务场景图片如: 在线演示  /  示例代码 由于前文未采用MVC模式来组织代码,代码可读性不强,本文将在前文基础上按照MVC模式来

ExtJS4.2 Grid知识点三：改变表格Grid单元格背景颜色

在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中单元格的背景颜色,显示结果如图片: 在线演示  /  示例代码 实现方式同样是为Grid中该列自定义renderer函数,查询ExtJS 4.2 API得知,Ext.grid.column.Column的renderer属性可以是一个函数也可以是字符串,这个知识点是通过函数来实现的.函数参数列表如下: value : 当前待渲染的单元格值,即表格中某行某列的

ExtJS4.2 Grid知识点四：改变表格Grid行文字颜色,划过Grid行时文字变粗

在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中整行文字的颜色,这样就不需要为每列单独定义renderer函数,显示结果如图片: 在线演示  /  示例代码 实现方式是在Grid中设置viewConfig属性的getRowClass函数,函数参数列表如下: record: 当前待渲染行数据Model,类型为:Ext.data.Model rowIndex: 当前待渲染行数,类型为:Number rowPa

使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用.Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询.分页.排序.复选框.设置显示列.Card view视图.主从表显示.合并列.国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行.移动列位置等一些特殊的功能,插件可

Entity Framework后台采用分页方式取数据与AspNetPager控件的使用

转载至:http://www.cnblogs.com/jaxu/p/3655582.html 本文是一个对AspNetPager控件使用的笔记! 有关AspNetPager控件可以查看杨涛主页.这是一个开放的自定义ASP.NET控件,支持各种自定义的数据分页方式,使用很方便,而且功能也很强大,网站开发过程中使用该控件可以省去很多不必要的麻烦. 本页下载:AspNetPager745DLL.zip 然后看一下在页面上如何通过Entity Framework将分页数据传递给该控件以实现真分页. 页面

Excel表格从指定部分重新分页打印的两种方法

Excel表格现在已经成为了一个极其重要的办公工具,尤其是在数据处理方面,它可以进行各种数据的处理.统计分析和辅助决策操作,但是在日常工作中我们经常对一些功能无从下手,例如在进行表格内容打印时,需要将其中内容从某行开始从新的一张纸继续打印,但是往往会发现内容会连续打印,保证每一页都不留空白.下面就通过具体的例子教大家如何让Excel表格内容从指定部分重新分页固定打印. Excel表格从指定部分重新分页打印的方法一 1.如图所示,是一份共10页的表格文档,每一页均是连续打印的,现假设需要让文档从第

织梦(dedecms)后台删除文章后台还有分页显示解决方法

鸡哥今天在给单位改一个织梦网站的时候发现了一个问题,由于本来的程序有7000多篇文章,鸡哥就直接执行了个sql语句给删除了,但是发现删除之后后台文章的分页还在显示着,错误截图给大家看看 看到没,经过鸡哥百度搜索发现这其实并不是鸡哥的操作问题,而是这本就是织梦5.7的一个bug,下边就给大家写下修复方法很简单: 先找到你的根目录中/dede/content_list.php这个文件打开找到 这段代码,可以直接搜索缓存处理就能找到 把红框中的代码修改为: $arr = $dsql->GetOne(&qu

LigerUI 使用教程表格篇

阅读目录 第一个例子 数据结构 两种绑定数据的方式 配置column 自定义表头 自定义单元格 排序与分页 事件与方法 第一个例子 简介 ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等. 支持本地数据和服务器数据(配置data或者url) 支持排序和分页(包括Javascript排序和分页) 支持列的“显示/隐藏” 支持多表头 支持固定列 支持明细行 支持汇总行 支持单元格模板 支持编辑表格(三种编辑模式,