backbone經過數據生成表格

主要的數據分表頭（head）和表內容（body）

 

下面是表頭須要的數據

是一個二維數組

每個數組表明一行表頭每個健值對錶明一個表頭單元格

最大每行單元格數依據最一個數組的健值對個數

 當數據的pid 和 id 同樣的話向下合併

model_name 指的是單元格顯示內容

model_id 指的是單元格對應的值的key

id 單元格惟一標示

pid 在哪一個單元格下面

[
    [
        {
            "model_name": "標題1-a",
            "model_id": "value1",
            "id":1,
            "pid":null
        },
        {
            "model_name": "標題1-b",
            "model_id": "value2",
            "id":2,
            "pid":null
        },
        {
            "model_name": "標題1-c",
            "model_id": "value3",
            "id":3,
            "pid":null
        },
        {
            "model_name": "標題1-d",
            "model_id": "value4",
            "id":4,
            "pid":null
        }
    ],
    [
        {
            "model_name": "標題2-a",
            "model_id": "value5",
            "id":5,
            "pid":1
        },
        {
            "model_name": "標題2-b",
            "model_id": "value6",
            "id":6,
            "pid":1
        },
        {
            "model_name": "標題2-c",
            "model_id": "value7",
            "id":7,
            "pid":2
        },
        {
            "model_name": "標題2-d",
            "model_id": "value8",
            "id":8,
            "pid":2
        },
        {
            "model_name": "標題2-e",
            "model_id": "value9",
            "id":9,
            "pid":2
        },
        {
            "model_name": "標題2-f",
            "model_id": "value3",
            "id":3,
            "pid":3
        },
        {
            "model_name": "標題2-g",
            "model_id": "value4",
            "id":4,
            "pid":4
        }
    ]
]

下面是body 數據

是一個數據每個健值對錶明一行數據

健名對應着表頭最後一行數據 對於的model_id（每一行數據的健值對個數也是根據表頭最後一行數據的個數而定的）

sign 單元格的標示同樣的合併

value 是單元格的值

 

[
      {
        "value_value5": {"sign": "1", "value": "123.00"},
        "value_value6": {"sign": "1", "value": "123.00"},
        "value_value7": {"sign": "3", "value": "123.00"},
        "value_value8": {"sign": "4", "value": "123.00"},
        "value_value9": {"sign": "5", "value": "123.00"},
        "value_value3": {"sign": "6", "value": "123.00"},
        "value_value4": {"sign": "7", "value": "123.00"}
      },
      {
        "value_value5": {"sign": "1", "value": "123.00"},
        "value_value6": {"sign": "2", "value": "123.00"},
        "value_value7": {"sign": "3", "value": "123.00"},
        "value_value8": {"sign": "3", "value": "123.00"},
        "value_value9": {"sign": "3", "value": "123.00"},
        "value_value3": {"sign": "6", "value": "123.00"},
        "value_value4": {"sign": "7", "value": "123.00"}
      }
    ]

 生成的結果是效果圖以下

 

主要代碼分析

表頭生成涉及代碼

表頭（thead）單元格數據模型

var Model = Backbone.Model.extend({

        defaults:{
            "colspan":1,
            "rowspan":1,
            "model_name":"",
            "model_id":"",
            "ishas":false,  //之後已經擁有子表頭
            "id":"",
            "pid":null

        }

    });

 表頭（thead）單元格視圖相關文件

var Tpl = require('text!../../../tpl/reportDemo/reportDemoTh.html');

    var view = Backbone.View.extend({

        tagName:'th',
        events:{

        },
        template: _.template(Tpl),
        initialize: function (options) {

            this.listenTo(this.model,'change',this.render);

        },
        render: function (model) {
            // 初始化viewer 並渲染
            if(model){
                if(model.hasChanged('colspan')){  //級連效果 當本身的colspan 增長時候對於改變上級單元格的 colspan
                    this.changeParentViewModel();
                }
            }

            this.$el.attr({rowspan:this.model.get('rowspan'),colspan:this.model.get('colspan')});

            this.$el.html(this.template(this.model.toJSON()));

            return this;

        },
        changeParentViewModel: function(){  //改變父親元素 colspan
            if(this.parentView){
                var headView = this.parentView;

                var colspan = headView.model.get('colspan');
                var ishas = headView.model.get('ishas');  // 是否已經擁有子表頭

                if(colspan == 1 && !ishas){
                    headView.model.set("ishas",true);
                }else{
                    headView.model.set("colspan",colspan+1);
                }
            }
        }


    });

    return view;

 主要程序對應的代碼

　　

initTableHandle: function (headList) { // 表頭數據

            var self = this, _thead = $('.main-table thead');
            _.each(headList, function (ths) {
                _thead.append(self.createHeaderTr(ths));
            });

            return _thead;
        },
        createHeaderTr: function (ths) {  // 建立tr

            var self = this, _headerTr = $('<tr class="info"></tr>');
            _.each(ths, function (th) {
                var thEl = self.createHeaderTh(th);
                if (!_.isNull(thEl)) _headerTr.append(thEl);
            });
            return _headerTr
        },
        createHeaderTh: function (th) { // 建立th 表頭當元格
            if (th.pid !== th.id) {  
                var thView = new ViewTh({model: new ThModel(th)});
                this.changeHeadSpan(thView);
                this.headViews.push(thView); // 記錄全部表頭
                return thView.render().$el;
            } else {
                this.changeHeadSpan(th);
                return null;
            }

        },
        // 有新的th（單元個加入） 檢測 關係表頭
        changeHeadSpan: function (view) { //view 多是一個th對象或者是th 數據
            
            var isView = view instanceof Backbone.View; //判斷是不是 view 對象

            var th = isView ? view.model.toJSON() : view; // 獲取新加入th 的數據

            _.each(this.headViews, function (headView) {

                if (headView.model.get('id') == th.pid && th.pid == th.id) { // 當數據的pid 和 id 同樣的話向下合併

                    var rowspan = headView.model.get('rowspan');
                    headView.model.set("rowspan", rowspan + 1);

                } else if (headView.model.get('id') == th.pid) { // 查到對於的上級表頭

                    var colspan = headView.model.get('colspan');
                    var ishas = headView.model.get('ishas');  // 是否已經擁有子表頭
                    view.parentView = headView;
                    if (colspan == 1 && !ishas) {
                        headView.model.set("ishas", true);
                    } else {
                        headView.model.set("colspan", colspan + 1);
                    }

                }
            });
        },

 

主要代碼分析

表內容生成涉及代碼

表內容（tbody）單元格數據模型

 var Model = Backbone.Model.extend({

        defaults:{
            "colspan":1,
            "rowspan":1,
            "isBold":"0",
            "sign":"",
            "value":"",
            "color":''
        }

    });

    return Model;

 

 表內容（tbody）單元格視圖相關文件

var Tpl = require('text!../../../tpl/reportDemo/reportDemoTd.html');

    var view = Backbone.View.extend({

        tagName:'td',
        events:{

        },
        template: _.template(Tpl),
        initialize: function () {

            this.listenTo(this.model,'change',this.render);

        },
        render: function (model) {
            // 初始化viewer 並渲染
            

            this.$el.attr({rowspan:this.model.get('rowspan'),colspan:this.model.get('colspan')});
          
            this.$el.html(this.template(this.model.toJSON()));

            return this;

        },
     

    });

    return view;

 主要程序對應的代碼

dataKeys生成的代碼

result.tableHead表明表頭數據

var dataKeys = _.map(result.tableHead[result.tableHead.length - 1], function (item) {
                            return item.model_id
                        });

 

 createTableBody: function (data, dataKeys) { //data:tbody對應的數據，dataKeys:thead對於的數據最後一個數組的全部健值對的健名


            var self = this, _tbody = $('.main-table tbody');

            _.each(data, function (item) {

                var bodyViewItem = new ViewItem();
                var _bodyTr = bodyViewItem.render().$el;

                _.each(dataKeys, function (key) {

                    var tdView = self.createBodyTd(item[preDefaultKey + key], bodyViewItem);
                    if (!_.isNull(tdView)) {
                        bodyViewItem.viewTds.push(tdView);
                        _bodyTr.append(tdView.render().el);
                    }

                });

                _tbody.append(_bodyTr);
            })

        },
        createBodyTd: function (td, viewItem) {

            var viewTds = viewItem.viewTds, itemLastViewTd = undefined;
            if (viewTds.length !== 0) {
                itemLastViewTd = viewTds[viewTds.length - 1];
            }
            if (itemLastViewTd) {
                if (itemLastViewTd.model.get('sign') === td.sign) {
                    var colspan = itemLastViewTd.model.get('colspan');
                    var value = td.value !== '-' && td.value ? td.value : itemLastViewTd.model.get('value')
                    itemLastViewTd.model.set({colspan: colspan + 1, value: value})
                    return null;
                }
            }

            return new ViewTd({model: new TdModel(td)});

        },