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

 　　運行效果如下：

 

 

 源碼下載見：百度雲代碼分享 

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。