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' 
 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' 
    • 定义计算公式,并显示计算结果
    • 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) );