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

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

阅读量：5297 次

发布时间：2019-06-14

本文共 4101 字，大约阅读时间需要 13 分钟。

代码下载地址：

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 + "/";%>My JSP 'index.jsp' starting page
     
     
     
     
     
     
     
         ${pageContext.request.contextPath }

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
      
       > 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
       
        
         > initStudentData() {        List
         
          
           > lm = new ArrayList
           
            
             >(); Map
             
               map_01 = new HashMap
              
               (); map_01.put("stuNo", "J001"); map_01.put("stuName", "张"); map_01.put("stuAge", "21"); map_01.put("stuSex", "1"); lm.add(map_01); Map
               
                 map_02 = new HashMap
                
                 (); 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
                 
                   map_03 = new HashMap
                  
                   (); 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
                   
                     map_04; for (int i = 0; i < 100; i++) { map_04 = new HashMap
                    
                     (); 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


     
         
              
       
        index.jsp
               
       
        default.html
           
              
              
       
        JsonServlet
               
       
        com.west.study.servlet.JsonServlet
           
          
              
       
        JsonServlet
               
       
        /main/jsonServlet.action

总结：

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();（加载数据）

转载于:https://www.cnblogs.com/zjsy/p/4387738.html

你可能感兴趣的文章