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

<div id="bigbox" style="margin:15px;display:!none;">
      <div id="gridbox" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:200px;width:700px;" ></div>
    </div>
    <div id="bigboxDetails" style="margin:15px;display:!none;">
      <div id="gridboxDetails" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:250px;width:700px;" ></div>
    </div>

并对父grid进行自定义表头

table id="myHead" style="display:none">
<tr>
  <td rowspan="2" columnId='chk' resizable='false'>
  <input id="g1_chk" type="checkbox"/></td>
    <td rowspan="2" columnId='no' resizable='false'>Order No</td>
    <td rowspan="2" columnId='employee' resizable='false'>Employee</td>
  <td colspan="7">Order Info</td>
</tr>
<tr>
    <td columnId='country'>Country</td>
    <td columnId='customer'>Customer<img src="./images/customer.gif"/></td>
    <td columnId='bill2005'>2005</td>
    <td columnId='bill2006'>2006</td>
    <td columnId='bill2007'>2007</td>
    <td columnId='bill2008'>2008</td>
    <td columnId='orderDate'>Ship Date</td>
</tr>
</table>

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

javas代码：

首先定义两个grid的id变量

var grid_demo_id = "myGrid1" ;
var grid_details_id = "myGrid2";

构建父grid的数据格式

var dsOption= {

    fields :[
        {name : 'no'  },
        {name : 'country'  },
        {name : 'customer'  },
        {name : 'employee'  },
        {name : 'bill2005' ,type: 'float' },
        {name : 'bill2006' ,type: 'float' },
        {name : 'bill2007' ,type: 'float' },
        {name : 'bill2008' ,type: 'float' },
        {name : 'orderDate' ,type:'date'  }

    ],
  uniqueField : 0 ,
    recordType : 'object'
}

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

var dsOptionDetails= {

    fields :[
        {name : 'no'  },
        {name : 'product'  },
        {name : 'unitPrice' ,type:'float'  },
        {name : 'quantity' ,type: 'int' },
        {name : 'discount' ,type: 'float'  },
        {name : 'taxFree'  ,type: 'int'  },
        {name : 'taxRate'  ,type: 'float'  },

        {name : 'shipTo', type: 'int'},
        {name : 'shipment'},
        {name : 'note'},

        {name : 'tax',type: 'float' , initValue : function(record){
        var avg = record[5]*record[6];
                return avg.toFixed(2);
    }},
        {name : 'totalPrice' ,type: 'float' , initValue : function(record){
        var avg = record[2]*record[3]*record[4]*record[5]*record[6];
                return avg.toFixed(2);
    }}
    ],

    recordType : 'array'
}

配置父grid属性

var colsOption = [
     {id: 'chk' ,isCheckColumn : true, filterable: false, exportable:false},
     {id: 'no' , header: "Order No" , width :60  },
     {id: 'employee' , header: "Employee" , width :80  },
       {id: 'country' , header: "Country" , width :70  },
       {id: 'customer' , header: "Customer" , width :80  },
       {id: 'bill2005' , header: "2005" , width :60, inChart :true, chartColor : 'eecc99'},
       {id: 'bill2006' , header: "2006" , width :60, inChart :true, chartColor : '66eeaa'  },
       {id: 'bill2007' , header: "2007" , width :60, inChart :true, chartColor : 'd65555'  },
       {id: 'bill2008' , header: "2008" , width :60, inChart :true, chartColor : 'eeaa33'  },
       {id: 'orderDate' , header: "Delivery Date" , width :100}

];

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

配置子grid属性

var colsOptionDetails = [
     {id: 'no' , header: "Item No" , width :60  , editor:{type:"text"},
      frozen : true},
       {id: 'product' , header: "Product" , width :100,
       grouped : true , frozen : true , sortOrder : 'asc',
     editor : { type :"select" ,
     options : {"Abalone":"Abalone","Amber":"Amber","Amethyst":"Amethyst","Aquamarine":"Aquamarine",
                "Cameos":"Cameos","Citrine":"Citrine","Coral":"Coral","Crystal":"Crystal","Cubic Zirconia":"Cubic Zirconia",
                "Emerald":"Emerald","Enamel":"Enamel","Garnet":"Garnet","Glass":"Glass","Moissanite":"Moissanite",
                "Onyx":"Onyx","Opal":"Opal","Pearl":"Pearl"} ,defaultText : '' }},
       {id: 'unitPrice' , header: "Unit Price" , width :60 ,
     editor: { type :"text" ,validRule : ['R','F'] } },
       {id: 'quantity' , header: "Quantity" , width :80,
     editor: { type :"text" ,validRule : ['R'] } },
       {id: 'discount' , header: "Discount" , width :100 ,renderer : example_renderDiscount,
     editor: { type :"text" ,validRule : ['R','F'] } },

        {id: 'taxFree' , header: "Tax Free" , width :60 ,renderer : example_renderTaxFree },
        {id: 'taxRate' , header: "Tax Rate" , width :60 ,
    editor: { type :"text" ,validRule : ['R','F'] } },
        {id: 'tax' , header: "Tax" , width :60},
        {id: 'totalPrice' , header: "Total Price" , width :60, align:"right"
        },
        {id: 'shipTo' , header: "Ship To" , width :100  },
        {id: 'shipment' , header: "Shipment" , width :100  },
        {id: 'note' , header: "Note" , width :150  }


 ];

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对象并输出

var mygrid=new Sigma.Grid( gridOption );
var mygridDetails = new Sigma.Grid(gridOptionDetails);

Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );
Sigma.Util.onLoad( Sigma.Grid.render(mygridDetails) );