通過數據操作表格
阿新 • • 發佈：2018-03-02
ini com mode clas pan rip 初始化 代碼分析 相關
主要的數據分表頭（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)});
},
通過數據操作表格