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 


Sigma Grid 2.2特征: 
CSS based themes 
Sigma grid appearance is controled via a stand-alone CSS(style sheet). Developer can change grid skin by defining themes in different CSS files.  Classic, Vista, Mac, XP Style built in 2.0. 

Event handlers & user API 
Plentiful attibutes and event handlers give you more flexibility without coding too much. 

Inline cell editing 
Inline cell editing just as you would in MS Excel. Navigate with the tab or enter key to move between cells . End user also can remove / add / append rows. Dropdownlist, calendar, text editor built in 2.0. 

Linkable grids  
Allow you to create multiple grid instances on one web page. With events and JavaScript API, Developers can implement one-to-many or many-to-many relationships (master-detail) at ease. 

Lockable header and column 
This feature enable you to keep some columns and/or header always visible in spite of user scrolling grid. Similar to the window freeze panes option in MS Excel. 

Math formulas for cells 
Developer can specify some cells to be a formula instead of a value. What is more, whether a cell is editable could depend on a boolean formula. 

Flexible  headers 
One of the new features is the ability to enable developer to work out as complex header as they wish. Nested header, image header, dropdown list control embeded header are all supported. 

Online one-key printing 
Online printing, to make it easy to print tabular data in WYSIWYG way. Built in button, no coding. 

Pure javascript codes 
Seamless Integration with any server side solution, such as j2ee, .net, PHP, perl. v Cross browers 

More browser supported  
IE 6.0+ \ FireFox 2.0+ \ Safari 3.0+ \ Opera9.0+  supported. 

Paging  
This feature enable developer display data page by page. Data will not be retrieved from server side until end user come to the page it is at. Developer can control how many rows are displayed at one time. 

Resizable Columns 
Columns width could be changed by end user draging columns header. 

Single selection & multi selection  
Sigma grid has the ability to select non-contiguous rows. This allows for more robust manipulation of records in the Grid.  

Slice rendering  
You may load thousands rows of data into grid in one time.Slice rendering could help you increase user experience. When this mode activated, everytime the vertical scroll bar is dragged, SigmaGrid will detemine which rows are visible and paint them out. 

Sorting & various data types 
End user can sort records by clicking on the header of a column. Developer can specify sorting way for various types including string,number,boolean,link,select and percent. Developer may define a new data type and a new way to sort. 

User defined editor & renderer 
Extensibility enable you to replace built-in cell editor with custom external component, present cell data as your customers' wish.  

Various load sources  
Developers can export data to / load data from variouse sources, including in JSON, XML, CSV (Comma Separated Values) format, to support further editing within spreadsheet or any other applications. 

Flash chart built  
Bar diagram, line diagram and pie diagram built in. Translation tabular data into diagram without any server-side coding. 

Data filter  
Data filter enables sigma grid to present the data users are interested in only. 

这里以master/details和Sigma Grid CRUD为例,说明Sigma Grid的使用方法,各个参数的作用,数据的传输,及数据的保存  

master/details的demo演示页面为example_master_details.html 
此demo演示了父子关系的grid。子grid为明细信息,通过鼠标点击父grid的某条记录关联出子grid内容。 
下面着重介绍此grid的使用方法: 
首先在页面中定义两个grid的位置 

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=0;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=0;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=0;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,)


参考资料:http://karlhell.iteye.com/blog/454411

官方案例:http://www.sigmawidgets.com/products/sigma_grid2/demos/

官方api:http://www.sigmawidgets.com/products/sigma_grid2/docs/index.html


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我可以帮您解答。 要使用MATLAB生成高斯sigma点集,您可以按照以下步骤进行: 1. 首先,确定您需要生成的sigma点数量。通常,sigma点的数量应该是状态向量维数的2倍加1,其中状态向量的维数是您要估计的系统的状态数量。 2. 然后,使用MATLAB的"chol"函数计算一个正定对称矩阵的Cholesky分解。这里,您可以使用系统噪声的协方差矩阵,这是一个对称半正定矩阵。 例如,如果系统噪声的协方差矩阵为P,则可以使用以下代码进行Cholesky分解: ``` L = chol(P,'lower'); ``` 3. 接下来,您可以使用以下公式计算sigma点集: ``` X = [x, x+sqrt(n)*L, x-sqrt(n)*L]; ``` 在这个公式中,"x"是状态向量的均值,"n"是状态向量维数的2倍加1,"L"是通过Cholesky分解获得的下三角矩阵。 这个公式会生成一个维度为"n x m"的矩阵,其中"n"是状态向量的维数,"m"是sigma点数量。每一列都是一个sigma点。 4. 最后,您可以在MATLAB中使用生成的sigma点集来执行卡尔曼滤波或扩展卡尔曼滤波等估计算法。 希望这可以帮助您生成所需的高斯sigma点集。 ### 回答2: 使用Matlab生成高斯sigma点集的方法如下: 首先,确定需要生成的高斯sigma点集的维度和均值向量 mean,以及协方差矩阵 covariance。 接下来,我们需要求解协方差矩阵的特征值和特征向量,并根据特征值的大小对特征向量进行排序。 然后,根据高斯分布的定义,我们可以通过 mean 和 covariance 的特征值和特征向量来计算 sigma 点集。 具体操作如下: 1. 在Matlab中调用函数 eig(),输入协方差矩阵 covariance,得到特征值矩阵 eig_val 和特征向量矩阵 eig_vec。 2. 对特征值矩阵 eig_val 进行排序,按照从大到小的顺序排列。 3. 对特征向量矩阵 eig_vec 进行重排,使其与特征值矩阵 eig_val 对应。 4. 计算每个维度的 sigma 点集。假设维度为 n,我们可以计算 2n 维的 sigma 点集。 - 首先,我们需要计算每个维度上的平移量 delta。 delta = sqrt(n+c)*eig_val(i) 这里,i 表示当前计算的维度。 - 然后,我们计算当前维度的正向和负向的 sigma 点。 sigma_point(i, :) = mean + delta * eig_vec(i, :) sigma_point(i+n, :) = mean - delta * eig_vec(i, :) - 最后,我们得到了一个 2n*dim 维的 sigma 点集。 以上就是使用Matlab生成高斯sigma点集的方法。通过这些步骤,我们可以快速生成高斯分布的 sigma 点集,用于后续的计算和模拟。 ### 回答3: 要使用Matlab生成高斯sigma点集,可以使用以下代码: ```matlab function sigmaPoints = generateGaussianSigmaPoints(mean, covariance, scaling_factor) % 确定状态向量的维度 num_states = numel(mean); % 计算sigma点的个数 num_sigma_points = 2 * num_states + 1; % 初始化sigma点矩阵 sigmaPoints = zeros(num_states, num_sigma_points); % 计算sigma点权重 lambda = scaling_factor^2 * (num_states + scaling_factor) - num_states; weights = [lambda / (num_states + lambda); 0.5 / (num_states + lambda) * ones(num_states * 2, 1)]; % 计算sigma点的平方根协方差矩阵 sqrt_matrix = chol((num_states + lambda) * covariance); % 计算均值为mean的sigma点集 sigmaPoints(:, 1) = mean; for i = 1:num_states sigmaPoints(:, i+1) = mean + sqrt(num_states + lambda) * sqrt_matrix(:, i); sigmaPoints(:, i+1+num_states) = mean - sqrt(num_states + lambda) * sqrt_matrix(:, i); end % 返回生成的sigma点集 sigmaPoints = kron(sigmaPoints, eye(num_states)) + repmat(mean, 1, num_sigma_points); % 返回生成的sigma点集 sigmaPoints = [mean, sigmaPoints]; end ``` 这个函数使用了Cholesky分解的方法,将协方差矩阵开方得到sigma点集。输入参数为平均值`mean`、协方差矩阵`covariance`和缩放因子`scaling_factor`。输出为生成的sigma点集`sigmaPoints`。 在主程序中,你可以按照下面的方式使用这个函数: ```matlab mean = [0; 0]; % 平均值 covariance = [1, 0.5; 0.5, 2]; % 协方差矩阵 scaling_factor = 3; % 缩放因子 sigmaPoints = generateGaussianSigmaPoints(mean, covariance, scaling_factor); disp(sigmaPoints); % 输出生成的sigma点集 ``` 这样就可以使用Matlab生成高斯sigma点集了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值