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教程