Sigma Grid 2.4 探究 2

Sigma Grid实例探究

以“example_master_details.html”为例，该实例中应用了两个Grid,一个是父Grid，一个是子Grid，根据点击父grid中的项，子grid联动显示详细信息。

html代码：

先在html中声明两个grid的装载容器

<div id="gridbox"...和 <div id="gridboxDetails"...

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进行自定义表头

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="./p_w_picpaths/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> 

接下来就在javascript中对两个grid进行定义，并配置其相应的属性。

javas代码：

首先定义两个grid的id变量

1. var grid_demo_id = "myGrid1" ; 
2. var grid_details_id = "myGrid2"; 

构建父grid的数据格式

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 , 
16.     recordType : 'object' 
17. } 

 recordType：Record type. Could be "array" or "object".  构建子grid数据格式

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. } 

• 定义计算公式，并显示计算结果
• initValue : function(record){ 
•         var avg = record[5]*record[6]; 
•                 return avg.toFixed(2); 
•     }}

配置父grid属性

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. ]; 

isCheckColumn : 是否为选择列  
filterable: 是否可过滤 
exportable:是否可导出 
inChart :在chart中显示 
chartColor : 在chart中显示的颜色 

配置子grid属性

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.          
29.  ]; 

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：位置
 

创建Grid对象并输出

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

 

转载于:https://blog.51cto.com/tinyking/646164