Spread JS 随笔二简单表格 (配置列，列分组)

----添加列配置信息，Spread.Views决定将哪些列显示出来。我们对一个列指定一个宽度并且将数据格式化。

----实现远程加载数据。远程加载数据需要引用zepto.js文件并且在ajsx请求中调用$.getJSON()方法才能实现对远程数据加载显示。你可以自己写ajax请求也可以借用库文件帮你实现。

1.head部分引用

1    <script src="js/gc.spread.common.10.1.1.min.js" type="text/javascript"></script>
2     <script src="js/gc.spread.views.dataview.10.1.1.min.js" type="text/javascript"></script>
3     <script src="js/plugins/gc.spread.views.gridlayout.10.1.1.min.js" hg type="text/javascript"></script>
4     <script src="js/locale/gc.spread.views.dataview.locale.zh-CN.10.1.1.min.js"></script>
6     <script src="data/northwind_orders.js" type="text/javascript"></script>
7     <script src="js/locale/gc.spread.views.dataview.locale.zh-CN.10.1.1.min.js"></script>

2.对于动态修改列属性，当宽度设置为'*'时，该列会自适应宽度。

 1     var columns = [
 2       { id: 'CountryID', caption: '国家', dataField: 'CountryID',  110 },
 3       { id: 'ProvinceName', caption: '省份', dataField: 'CountryDetails.ProvinceName',  120 },
 4       { id: 'date', caption: '成立时间', dataField: 'OrderDate', format: 'mm/dd/yyyy',  150 },
 5       { id: 'population', caption: '人口', dataField: 'population',  80 },
 6       { id: 'Economics', caption: '经济', dataField: 'CountryDetails.Economics', format: '$#,##',  '*'} 8         ];
9   var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout( ));

效果如图：

3、列计算显示

对于有些列需要进行计算，统计后结果的一个显示，这时可进行公式的配置。

　　1.正常的列

　 { id: 'population', caption: '人口', dataField: 'population', 80 },

需要计算的列

添加一个名为'total'的列，用来计算人均GDP。使用以“=”开头的字符串就代表了是使用公式计算得出的数据源

{ id: 'total', caption: '人均GDP', dataField: '=([Economics])/([population])', format: '$#,##', 200, dataType: 'number' }

此处主要在 dataField 内进行需要的计算公式，其他的不变

效果图如下

4、列分组

对于需要对表格进行列分组显示。

    var columns = [
      { id: 'CountryID', caption: '国家', dataField: 'CountryID',  110 },
      { id: 'ProvinceName', caption: '省份', dataField: 'CountryDetails.ProvinceName',  120 },
      { id: 'date', caption: '成立时间', dataField: 'OrderDate', format: 'mm/dd/yyyy',  150 },
      { id: 'population', caption: '人口', dataField: 'population',  80 },
      { id: 'Economics', caption: '经济', dataField: 'CountryDetails.Economics', format: '$#,##',  100 },
      { id: 'total', caption: '人均GDP', dataField: '=([Economics])/([population])', format: '$#,##',  200, dataType: 'number' }
    ];
    //定义分组变量
  var gridConfig = {
      colMinWidth: 60,
      grouping: [{
                field: 'CountryID'
                }]
    };
   var data = [
         {
           "CountryID": "中国",
           "CountryDetails": {
               "ProvinceName": "北京市",
               "Economics": 170000,
           },
           "OrderDate": "1902-03-15",
           "population": 18.44,
       },
       {
          "CountryID": "中国",
          "CountryDetails": {
              "ProvinceName": "浙江省",
              "Economics": 200000,
          },
          "OrderDate": "1940-05-15",
          "population": 18.44,
      },
      {
        "CountryID": "美国",
        "CountryDetails": {
            "ProvinceName": "纽约",
            "Economics": 10000,
      },
        "OrderDate": "1933-06-15",
        "population": 6.19,
     }];
 var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout(gridConfig));  // 注意--这里要将分组变量传过来

　　效果图

Spread JS 随笔二 简单表格 (配置列，列分组)

Spread JS 随笔二简单表格 (配置列，列分组)