Sigma Grid 表格的研究及使用

時間  2019-11-08
標籤 sigma grid 表格 研究 使用 简体版
原文   原文鏈接
Sigma Grid 純javascript，Sigma grid 用Ajax作grid展示並可實現數據的編輯，支持滾動表格及排序。它是很是強大的而且簡單易用而且能整合php，asp.net,jsp,RoR 

研究版本：Sigma Grid 2.2 

Grid目錄結構： 
grid 
|--->calendar 
|      |--calendar.js 
|      |--calendar-blue.css 
|      |--calendar-cn.js 
|      |--calendar-cn-utf8.js 
|      |--calendar-en.js 
|      |--calendar-setup.js 
|      |--simple-1.html 
|--> flashchart 
|      |---->fusioncharts 
|      |       |--->charts 
|      |       |      |--FCF_Area2D.swf 
|      |       |      |--略……(.swf) 
|      |       |--ChangeDataXML.html 
|      |       |--Chart.html 
|      |       |--ChartChange.html 
|      |       |--FusionCharts.js 
|--->skin 
|      |---->china 
|      |       |--->images 
|      |       |      |--cell_index_bg.gif 
|      |       |      |--略……(.gif) 
|      |       |--skinstyle.css  
|      |---->default 
|      |       |--->images 
|      |       |      |--button_bg.gif 
|      |       |      |-- 略……(.gif) 
|      |       |--skinstyle.css 
|      |---->mac 
|      |       |--->images 
|      |       |      |--button_bg.gif 
|      |       |      |-- 略……(.gif) 
|      |       |--skinstyle.css 
|      |---->vista 
|      |       |--->images 
|      |       |      |--cell_index_bg.gif 
|      |       |      |-- 略……(.gif) 
|      |       |--skinstyle.css 
|--gt_grid_all.js 
|--gt_grid_height.css 
|--gt_grid.css 

|--gt_msg_en.js javascript


這裏以master/details和Sigma Grid CRUD爲例，說明Sigma Grid的使用方法，各個參數的做用，數據的傳輸，及數據的保存。 

master/details的demo演示頁面爲example_master_details.html 
此demo演示了父子關係的grid。子grid爲明細信息，經過鼠標點擊父grid的某條記錄關聯出子grid內容。 
下面着重介紹此grid的使用方法： 
首先在頁面中定義兩個grid的位置 

php

Html代碼    收藏代碼
  1. <div id="bigbox" style="margin:15px;display:!none;">  
  2.       <div id="gridbox" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:200px;width:700px;" ></div>  
  3. </div>  
  4. <div id="bigboxDetails" style="margin:15px;display:!none;">    
  5.        <div id="gridboxDetails" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:250px;width:700px;"    ></div>  
  6. </div>  


自定義grid列頭 
Html代碼    收藏代碼
  1. <table id="myHead" style="display:none">  
  2. <tr>  
  3.   <td rowspan="2" columnId='chk' resizable='false'>  
  4.   <input id="g1_chk" type="checkbox"/></td>  
  5.         <td rowspan="2" columnId='no' resizable='false'>Order No</td>  
  6.         <td rowspan="2" columnId='employee' resizable='false'>Employee</td>  
  7.   <td colspan="7">Order Info</td>  
  8. </tr>  
  9. <tr>  
  10.         <td columnId='country'>Country</td>  
  11.         <td columnId='customer'>Customer<img src="./images/customer.gif"/></td>  
  12.         <td columnId='bill2005'>2005</td>  
  13.         <td columnId='bill2006'>2006</td>  
  14.         <td columnId='bill2007'>2007</td>  
  15.         <td columnId='bill2008'>2008</td>  
  16.         <td columnId='orderDate'>Ship Date</td>  
  17. </tr>  
  18. </table>  

//定義兩個grid 
Js代碼    收藏代碼
  1. var grid_demo_id = "myGrid1" ;  
  2. var grid_details_id = "myGrid2";  

構建父grid數據結構  
Js代碼    收藏代碼
  1. var dsOption= {  
  2.   
  3.         fields :[  
  4.                 {name : 'no'  },  
  5.                 {name : 'country'  },  
  6.                 {name : 'customer'  },  
  7.                 {name : 'employee'  },  
  8.                 {name : 'bill2005' ,type: 'float' },  
  9.                 {name : 'bill2006' ,type: 'float' },  
  10.                 {name : 'bill2007' ,type: 'float' },  
  11.                 {name : 'bill2008' ,type: 'float' },  
  12.                 {name : 'orderDate' ,type:'date'  }  
  13.                   
  14.         ],  
  15.   uniqueField : 0 ,  //It could be unique field name or unique field index in fields  
  16.         recordType : 'object'  //記錄類型只能是：'object' or 'array'  
  17. }  


構建子grid數據結構  

Js代碼    收藏代碼
  1. var dsOptionDetails= {  
  2.   
  3.         fields :[  
  4.                 {name : 'no'  },  
  5.                 {name : 'product'  },  
  6.                 {name : 'unitPrice' ,type:'float'  },  
  7.                 {name : 'quantity' ,type: 'int' },  
  8.                 {name : 'discount' ,type: 'float'  },  
  9.                 {name : 'taxFree'  ,type: 'int'  },  
  10.                 {name : 'taxRate'  ,type: 'float'  },  
  11.                   
  12.                 {name : 'shipTo', type: 'int'},  
  13.                 {name : 'shipment'},  
  14.                 {name : 'note'},  
  15.                   
  16.                 {name : 'tax',type: 'float' , initValue : function(record){  
  17.         var avg = record[5]*record[6];  
  18.                                 return avg.toFixed(2);  
  19.     }},  
  20.                 {name : 'totalPrice' ,type: 'float' , initValue : function(record){  
  21.         var avg = record[2]*record[3]*record[4]*record[5]*record[6];  
  22.                                 return avg.toFixed(2);  
  23.     }}  
  24.         ],  
  25.   
  26.         recordType : 'array'  
  27. }  
  28. //渲染成checked.gif  
  29. function example_renderTaxFree(value ,record,columnObj,grid,colNo,rowNo){  
  30.                                 if(value==0) return "<img src='./images/unchecked.gif'>";  
  31.                                 return "<img src='./images/checked.gif'>";  
  32.   
  33. }  


//渲染成星星 five_star 
Js代碼    收藏代碼
  1. function example_renderDiscount(value ,record,columnObj,grid,colNo,rowNo){  
  2.         var i = Math.round(value / 0.4 * 5);  
  3.         if(i>5)i=5;if(i<1)i=1;  
  4.                                 return "<IMG SRC=\"./images/five_star" + i + ".gif\" />"  
  5.   
  6.   
  7. }  


構建父grid 列樣式 
/* 
isCheckColumn:選項列 
filterable：是否能夠過濾此列 
exportable：輸出表格 
id：id 
header：顯示的名稱 
width:寬度 
inChart：是否在圖表中統計 
chartColor：圖表顏色 
*/  
Js代碼    收藏代碼
  1. var colsOption = [  
  2.      {id: 'chk' ,isCheckColumn : true, filterable: false, exportable:false},  
  3.      {id: 'no' , header: "Order No" , width :60  },  
  4.      {id: 'employee' , header: "Employee" , width :80  },  
  5.            {id: 'country' , header: "Country" , width :70  },  
  6.            {id: 'customer' , header: "Customer" , width :80  },  
  7.            {id: 'bill2005' , header: "2005" , width :60, inChart :true, chartColor : 'eecc99'},  
  8.            {id: 'bill2006' , header: "2006" , width :60, inChart :true, chartColor : '66eeaa'  },  
  9.            {id: 'bill2007' , header: "2007" , width :60, inChart :true, chartColor : 'd65555'  },  
  10.            {id: 'bill2008' , header: "2008" , width :60, inChart :true, chartColor : 'eeaa33'  },  
  11.            {id: 'orderDate' , header: "Delivery Date" , width :100}  
  12.          
  13. ];  

構建子grid 列樣式  
/* 

editor：能夠編輯此列 {type：類型 
                   options：爲下拉列表提供數據 
                   defaultText：默認值 
                   validRule：驗證'R' - Required 
                                                                   'N' - Number 
                                 'E' - Email 
                                 'F' - Float} 
frozen：是否鎖定此列 若是被鎖定 在拖動滾動條時候此列不會發生變化 
sortOrder：排序 asc 或 desc 
renderer：渲染效果 參數爲function(value ,record,colObj,grid,colNo,rowNo) 
align：位置 
  
*/  

Js代碼    收藏代碼
  1. var colsOptionDetails = [  
  2.      {id: 'no' , header: "Item No" , width :60  , editor:{type:"text"},  
  3.       frozen : true},  
  4.            {id: 'product' , header: "Product" , width :100,  
  5.            grouped : true , frozen : true , sortOrder : 'asc',  
  6.                      editor : { type :"select" ,  
  7.                      options : {"Abalone":"Abalone","Amber":"Amber","Amethyst":"Amethyst","Aquamarine":"Aquamarine",  
  8.                 "Cameos":"Cameos","Citrine":"Citrine","Coral":"Coral","Crystal":"Crystal","Cubic Zirconia":"Cubic Zirconia",  
  9.                 "Emerald":"Emerald","Enamel":"Enamel","Garnet":"Garnet","Glass":"Glass","Moissanite":"Moissanite",  
  10.                 "Onyx":"Onyx","Opal":"Opal","Pearl":"Pearl"} ,defaultText : '' }},  
  11.            {id: 'unitPrice' , header: "Unit Price" , width :60 ,  
  12.      editor: { type :"text" ,validRule : ['R','F'] } },  
  13.            {id: 'quantity' , header: "Quantity" , width :80,   
  14.      editor: { type :"text" ,validRule : ['R'] } },  
  15.            {id: 'discount' , header: "Discount" , width :100 ,renderer : example_renderDiscount,  
  16.      editor: { type :"text" ,validRule : ['R','F'] } },  
  17.              
  18.                 {id: 'taxFree' , header: "Tax Free" , width :60 ,renderer : example_renderTaxFree },  
  19.                 {id: 'taxRate' , header: "Tax Rate" , width :60 ,  
  20.     editor: { type :"text" ,validRule : ['R','F'] } },  
  21.                 {id: 'tax' , header: "Tax" , width :60},  
  22.                 {id: 'totalPrice' , header: "Total Price" , width :60, align:"right"  
  23.                 },  
  24.                 {id: 'shipTo' , header: "Ship To" , width :100  },  
  25.                 {id: 'shipment' , header: "Shipment" , width :100  },  
  26.                 {id: 'note' , header: "Note" , width :150  }  
  27.                   
  28.  ];  


父grid屬性  
/* 
width:寬度 
height：高度 
container：grid建立的位置 
dataset：數據 
columns：列樣式 
pageSizeList：頁面顯示條數 
customHead：自定義grid頭 
onClickCell：點擊觸發事件 
SigmaGridPath：未知 
loadURL：獲取數據地址 
exportURL：輸出地址  用於輸出EXCEL XML CSV PDF 
exportFileName：輸出名稱 
remotePaging:指定服務器端不分頁工做 
defaultRecord：當點擊添加按鈕時默認的加入一行的數據 
pageSize：頁面顯示記錄數 
toolbarContent：grid 工具條{ 
        nav goto - 分頁 
        pagesize - 顯示記錄數 
        reload - 刷新 
        print - 打印 
        csv - 輸出CSV格式文件 
        xls - 輸出xls格式文件 
        pdf - 輸出pdf格式文件 
        filter - 過濾查詢 
        chart - 圖表 
        state - 狀態 
} 
*/  
Js代碼    收藏代碼
  1. var gridOption={  
  2.         id : grid_demo_id,  
  3.         width: "700",    
  4.         height: "350",            
  5.         container : 'gridbox',   
  6.         replaceContainer : true,   
  7.         dataset : dsOption ,  
  8.         columns : colsOption ,  
  9.         pageSizeList : [5,10,15,20],  
  10.         customHead : 'myHead',  
  11.         onClickCell  : function(value, record , cell, row,  colNO, rowNO,columnObj,grid){  
  12.                 var no = record["no"]>"070-19"?"070-19":record["no"];  
  13.     var grid=Sigma.$grid(grid_details_id);  
  14.     grid.loadURL = "./data/" + no + ".js";  
  15.     grid.reload();  
  16.         },  
  17.         SigmaGridPath : '../grid/',  
  18.         loadURL : 'test.jsp?actionMethod=list',  
  19.         saveURL : 'test.jsp?actionMethod=save' ,  
  20.         exportURL : './export_php/testMasterList.php?export=true',  
  21.         exportFileName : 'Sales Master Report',  
  22.         remotePaging : false,  
  23.         defaultRecord : ["","","","",0,0,0,0,"2008-01-01"],  
  24.         pageSize:20,  
  25.         toolbarContent : 'nav goto | pagesize | reload | print csv xls xml pdf filter chart | state'  
  26. };  


子grid屬性  
/* 
editable:表格是否可編輯 
groupable：true分組菜單將會出如今主菜單中，而且啓動分組功能 
clickStartEdit:點擊鼠標出發編輯事件 
showGridMenu:是否顯示主菜單 
allowCustomSkin：是否制定skin出如今菜單上 
allowFreeze：是否被凍結欄出如今主菜單 
allowHide：隱藏是否出如今主菜單 
allowGroup：組是否出如今主菜單 

*/  

Js代碼    收藏代碼
  1. var gridOptionDetails={  
  2.         id : grid_details_id,  
  3.         loadUrl : './data/010-0.js',  
  4.         saveURL : 'test.jsp?actionMethod=save' ,  
  5.         width: "700",  
  6.         height: "260",           
  7.         container : 'gridboxDetails',   
  8.         replaceContainer : true,   
  9.         editable : true,  
  10.   groupable : true,  
  11.         pageSizeList : [5,10,15,20],  
  12.         dataset : dsOptionDetails ,  
  13.         columns : colsOptionDetails ,  
  14.         clickStartEdit : true ,  
  15.         defaultRecord : ["","",0,0,0.0,0,0.0,"Customer","UPS",""],  
  16.         pageSize:30,  
  17.         toolbarContent : 'reload | add del save | print | state',  
  18.         showGridMenu : true,  
  19.         allowCustomSkin        : true ,  
  20.         allowFreeze        : true ,  
  21.         allowHide        : true ,  
  22.         allowGroup        : true,  
  23.         customRowAttribute : function(record,rn,grid){  
  24.                 if (record[11]>80){  
  25.                         return 'style="height:50px; background-color:#ffddcc"';  
  26.                 }  
  27.         }  
  28. };  

建立Grid對象並輸出 
Js代碼    收藏代碼
  1. var mygrid=new Sigma.Grid( gridOption );  
  2. var mygridDetails = new Sigma.Grid(gridOptionDetails);  
  3.   
  4. Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );  
  5. Sigma.Util.onLoad( Sigma.Grid.render(mygridDetails) );  


Sigma Grid CRUD的demo演示頁面爲list1.jsp 
此例子用來講明 先後臺的數據交互 及grid的增刪改查及保存功能 

獲取數據屬性： 
loadURL 
保存數據屬性： 
saveURL 

例： 
loadURL : APP_PATH+'/views/controller.jsp?actionMethod=list' 
saveURL : APP_PATH+'/views/controller.jsp?actionMethod=save' 

這裏爲了實現功能效果只簡單的使用jsp直接訪問數據庫實現查詢CRUD的工做。 
固然也使用MVC結構來實現，只要返回的數據類型是JOSN而且符合Sigma Grid的數據格式便可 
controller.jsp  
Java代碼    收藏代碼
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <%@ page import="java.sql.*,java.util.*"%>  
  3. <%@ page import="com.fins.gt.server.*"%>  
  4. <%!  
  5.         Connection getConnection(){  
  6.                   
  7.                 String url="jdbc:mysql://localhost:3306/sigma_grid_server";  
  8.                 Connection conn= null;  
  9.                 try{  
  10.                         Class.forName("com.mysql.jdbc.Driver").newInstance();  
  11.                         conn = DriverManager.getConnection(url,"root","");  
  12.                 }catch(Exception e){  
  13.                           
  14.                 }  
  15.                 return conn;  
  16.         }  
  17.   
  18.         void closeConnection(Connection conn){  
  19.                 try{  
  20.                         conn.close();  
  21.                 }catch(Exception e){  
  22.                           
  23.                 }  
  24.         }  
  25.   
  26.   
  27.         List listOrders(){  
  28.            Connection conn = getConnection();  
  29.            if(conn==null)   
  30.                          return new ArrayList();  
  31.            Statement stmt = null;  
  32.              
  33.            ResultSet rs = null;  
  34.            List list = new ArrayList();  
  35.              
  36.            try{  
  37.                    stmt = conn.createStatement();  
  38.                    rs = stmt.executeQuery("select * from orders");  
  39.                    while(rs.next()){  
  40.                                 Map map = new HashMap();  
  41.                                 map.put("order_no",new Long(rs.getLong("order_no")));  
  42.                                 map.put("employee",rs.getString("employee"));  
  43.                                 map.put("country",rs.getString("country"));  
  44.                                 map.put("customer",rs.getString("customer"));  
  45.                                 map.put("order2005",new Float(rs.getFloat("order2005")));  
  46.                                 map.put("order2006",new Float(rs.getFloat("order2006")));  
  47.                                 map.put("order2007",new Float(rs.getFloat("order2007")));  
  48.                                 map.put("order2008",new Float(rs.getFloat("order2008")));  
  49.                                 map.put("delivery_date",rs.getString("delivery_date"));  
  50.                                 list.add(map);  
  51.                    }  
  52.                    rs.close();  
  53.                    stmt.close();  
  54.            }catch(Exception e){  
  55.            }  
  56.            closeConnection(conn);  
  57.            return list;  
  58.         }  
  59.           
  60.         int[] insertOrders( List updatedList){  
  61.                   
  62.                 int[] opresults=null;  
  63.                 String sql="INSERT INTO  orders (employee,country,customer,order2005,order2006,order2007,order2008,delivery_date) VALUES (?,?,?,?,?,?,?,?)";  
  64.                         Connection conn=null;  
  65.                         PreparedStatement pstmt = null;  
  66.                         try {  
  67.                                 conn = getConnection();  
  68.                                 pstmt = conn.prepareStatement(sql);  
  69.                                 for (int i=;i<updatedList.size();i++){  
  70.                                         Map record= (Map)updatedList.get(i);  
  71.                                         pstmt.setString(1,String.valueOf(record.get("employee")));  
  72.                                         pstmt.setString(2,String.valueOf(record.get("country")));  
  73.                                         pstmt.setString(3,String.valueOf(record.get("customer")));  
  74.                                         pstmt.setString(4,String.valueOf(record.get("order2005")));  
  75.                                         pstmt.setString(5,String.valueOf(record.get("order2006")));  
  76.                                         pstmt.setString(6,String.valueOf(record.get("order2007")));  
  77.                                         pstmt.setString(7,String.valueOf(record.get("order2008")));  
  78.                                         pstmt.setString(8,String.valueOf(record.get("delivery_date")));  
  79.                                         pstmt.addBatch();  
  80.                                 }  
  81.                                 opresults = pstmt.executeBatch();  
  82.                         } catch (SQLException e) {  
  83.                                 opresults=null;  
  84.                         }finally{  
  85.                                 closeConnection(conn);  
  86.                         }  
  87.         return opresults;  
  88. }  
  89.           
  90.         int[] updateOrders( List updatedList){  
  91.                           
  92.                         int[] opresults=null;  
  93.                         String sql="UPDATE orders SET customer=?, order2008=?, delivery_date=? WHERE order_no= ? ";  
  94.                                 Connection conn=null;  
  95.                                 PreparedStatement pstmt = null;  
  96.                                 try {  
  97.                                         conn = getConnection();  
  98.                                         pstmt = conn.prepareStatement(sql);  
  99.                                         for (int i=;i<updatedList.size();i++){  
  100.                                                 Map record= (Map)updatedList.get(i);  
  101.                                                 pstmt.setString(1,String.valueOf(record.get("customer")));  
  102.                                                 pstmt.setString(2,String.valueOf(record.get("order2008")));  
  103.                                                 pstmt.setString(3,String.valueOf(record.get("delivery_date")));  
  104.                                                 pstmt.setString(4,String.valueOf(record.get("order_no")));  
  105.                                                 pstmt.addBatch();  
  106.                                         }  
  107.                                         opresults = pstmt.executeBatch();  
  108.                                 } catch (SQLException e) {  
  109.                                         opresults=null;  
  110.                                 }finally{  
  111.                                         closeConnection(conn);  
  112.                                 }  
  113.                 return opresults;  
  114.         }  
  115.           
  116.           
  117.         int[] deleteOrders( List updatedList){  
  118.                           
  119.                         int[] opresults=null;  
  120.                         String sql="DELETE FROM orders WHERE order_no= ? ";  
  121.                                 Connection conn=null;  
  122.                                 PreparedStatement pstmt = null;  
  123.                                 try {  
  124.                                         conn = getConnection();  
  125.                                         pstmt = conn.prepareStatement(sql);  
  126.                                         for (int i=;i<updatedList.size();i++){  
  127.                                                 Map record= (Map)updatedList.get(i);  
  128.                                                 pstmt.setString(1,String.valueOf(record.get("order_no")));  
  129.                                                 pstmt.addBatch();  
  130.                                         }  
  131.                                         opresults = pstmt.executeBatch();  
  132.                                 } catch (SQLException e) {  
  133.                                         opresults=null;  
  134.                                 }finally{  
  135.                                         closeConnection(conn);  
  136.                                 }  
  137.                 return opresults;  
  138.         }  
  139.           
  140.         boolean saveOrders(List insertedRecords , List updatedList, List deletedRecords){  
  141.                 //you can control transaction, commit, rollback here  
  142.                 int[] insertCodes = insertOrders(insertedRecords);  
  143.                 int[] updateCodes = updateOrders(updatedList);  
  144.                 int[] deleteCodes = deleteOrders(deletedRecords);  
  145.                 boolean success=insertCodes!=null && updateCodes!=null && deleteCodes!=null;  
  146.                 return success;  
  147.         }  
  148.   
  149. %>  
  150. <%  
  151.   
  152.         // GridServerHandler is server side wrapper, you can get all the info posted to server in your Java way instead of JavaScript  
  153.         GridServerHandler gridServerHandler=new GridServerHandler(request,response);  
  154.           
  155.         String operation = request.getParameter("actionMethod");  
  156.         if("save".equals(operation)){  
  157. System.out.println("----save-----");  
  158.                 boolean success=true;  
  159.                           
  160.                 //取得新增的數據集合, 每條數據記錄在 map 裏  
  161.                 List insertedRecords = gridServerHandler.getInsertedRecords();  
  162.                 //取得修改的數據集合, 每條數據記錄在 map 裏  
  163.                 List updatedList = gridServerHandler.getUpdatedRecords();  
  164.                 //取得刪除的數據集合, 每條數據記錄在 map 裏  
  165.                 List deletedRecords = gridServerHandler.getDeletedRecords();  
  166.   
  167.           
  168.                 // 若是但願取得bean的集合 那麼請使用有參方法: xxx.getXXXXXXRecords(Class beanClass);  
  169.                 //例如: List updateList = gridServerHandler.getUpdatedRecords(StudentVO.class);  
  170.                   
  171.                 //調用"相應的方法" 來update delete insert數據  
  172.                 success = saveOrders(insertedRecords , updatedList,  deletedRecords );  
  173.   
  174.                   
  175.                 //設置該次操做是否成功.  
  176.                 gridServerHandler.setSuccess(success);  
  177.                   
  178.                 //若是操做不成功 你也能夠自定義一些異常信息發送給客戶端.  
  179. //                gridServerHandler.setSuccess(false);  
  180. //                gridServerHandler.setException("... exception info ...");  
  181.   
  182.                 //向客戶端輸出json字符串.  
  183.                 out.print(gridServerHandler.getSaveResponseText());  
  184.                   
  185.         }else { //client is retrieving data  
  186.                 List list = listOrders();  
  187.                 System.out.println("----list-----");  
  188.   
  189.                 int totalRowNum= list.size();  
  190.                 // 取得總記錄數  
  191.                 gridServerHandler.setTotalRowNum(totalRowNum);  
  192.                   
  193.                 //調用"相應的方法" 來取得數據.下面4個方法 一般對於進行分頁查詢頗有幫助,根據須要使用便可.  
  194.                 // gridServerHandler.getStartRowNum() 當前頁起始行號  
  195.                 // gridServerHandler.getEndRowNum() 當前頁結束行號  
  196.                 // gridServerHandler.getPageSize() 每頁大小  
  197.                 // gridServerHandler.getTotalRowNum() 記錄總條數  
  198.                   
  199.                   
  200.                 // 本例中list裏的元素是 map,   
  201.                 // 若是元素是bean, 請使用 gridServerHelp.setData(list,BeanClass.class);  
  202.                 gridServerHandler.setData(list);  
  203. //                gridServerHandler.setException("your exception message");  
  204.                   
  205.                 //向客戶端輸出json字符串.  
  206.                 out.print(gridServerHandler.getLoadResponseText());  
  207.                 System.out.print(gridServerHandler.getLoadResponseText());  
  208.                 // 你也能夠 使用 gridServerHandler.getLoadResponseText() 來取得字符串.  
  209.                 // 而後自行向 客戶端輸出, 這樣作的好處是 你能夠本身來決定response的contentType和編碼.  
  210.                   
  211.   
  212.         }  
  213. %>  


經過上面的代碼能夠看出 操做grid的對象是GridServerHandler 
使用GridServerHandler對象，來操做grid中的數據。 

上傳了demo，部署後訪問demo地址爲：  http://localhost:8080/GtGridDemo/views/demo1.jsp  .................................................................demo2.html  .................................................................demo3.jsp  .................................................................demo4.html  .................................................................demo5.html  經過以上demo實現如下功能  簡單載入一個結果集（select top 20 * from  Orders），主要展現如下特色(如何load數據，如何鎖定表頭列頭，跨列表頭如何設定，如何設定客戶端按列排序)  帶2個條件查詢Orders表（如何傳入查詢條件查詢），  主從表的載入（orders, Order Details）  能夠的編輯單表Grid（單元格的編輯框如何定義，如何add和delete一行，編輯後的數據如何提交給jsp）  能夠的編輯主從表Grid（重點體現子表如何編輯，並保持主記錄和子記錄的關係，編輯後的數據如何提交給jsp） 打印功能的實現(pdf，excel，)
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程