1. 設置固定列

ID日期星期

propName -- 屬性名

valCalc -- 設置值時, 特定回調函數

2. 動態生成可變列

這里模擬服務器獲取數據

// 返回數據的格式:

/*

{

points : Array,

pointDate : Date,

reportId : Number,

reportDatas : Map

}

*/

function getDate(date) {

var datas = [];

for (var i = 0; i < 5; i++) {

var reportDatas = {};

reportDatas['1002'] = {reportVal:rd(203), reportTotal:203};

reportDatas['1003'] = {reportVal:rd(204), reportTotal:204};

reportDatas['1007'] = {reportVal:rd(205), reportTotal:205};

reportDatas['2003'] = {reportVal:rd(206), reportTotal:206};

reportDatas['2007'] = {reportVal:rd(207), reportTotal:207};

datas[i] = {

reportId : 1000 - i,

titles : ['1002', '1003', '1007', '2003', '2007'],

pointDate : date.addDays(0 - i),

reportDatas : reportDatas

}

};

return datas;

}

Ps :

通常開發順序是: 先設計前端UI, 再根據需要的數據項生成對應的 JSON 對象

這里生成剩余的表頭信息

// 生成需要的表頭信息

function initTitles(grid, titles) {

var map = {};

// 留存數據

map["1002"] = "次日留存";

map["1003"] = "三日留存";

map["1007"] = "七日留存";

map["10015"] = "十五日留存";

// 保留數據

map["2003"] = "三日保留";

map["2007"] = "七日保留";

// 找到表頭區域

var heads = grid.find("thead").find("tr");

$.each(titles, function(idx, val) {

var title = $("

", {

typeVal : val,

html : map[val],

floor : "2"

}).appendTo(heads);

});

}

3. 填充數據

// 填充數據

function fillDatas(grid, datas) {

// 獲取表頭

var heads = grid.find("thead>tr>th");

// 填充值

var tbody = grid.find("tbody");

$.each(datas, function(dIdx, data) {

// 每次循環數據數組, 得到一個新的行對象

var tr = $("

").appendTo(tbody);

$.each(heads, function(idx, head) {

head = $(head);

var floor = parseInt(head.attr("floor"));

fillData(floor, grid, data, head).appendTo(tr);

});

});

}

下面是填充單行數據時需要用到的回調函數

function fillData(floor, grid, data, head) {

switch(floor) {

// 一級屬性

case 1 :

// 獲取一級屬性值

var val = data[head.attr("propName")];

// 調用處理函數

var fn = head.attr("valCalc");

fn && (val = eval(fn)(data));

// 追加到數據區域

var td = $("

", {

html : val

});

return td;

// 二級屬性

case 2 :

var td = $("

", {

html : getPercent(head, data)

}).css({

"text-align" : "right"

});

return td;

default :

window.console && console.log("無匹配的floor值:" + floor);

}

}

如果對應的 floor 值為 1, 則表示可直接獲取當前屬性值. 否則需要解析后才能獲取值(假設當前僅有兩種屬性層次定義), 作者當前需求很簡單, 僅僅獲取百分比

// 獲取二級屬性指定值 --

function getPercent(head, data) {

var typeVal = head.attr("typeVal");

var thisData = data.reportDatas[typeVal];

var percent = thisData.reportVal / thisData.reportTotal * 10000;

var val = parseInt(percent) / 100 + "";

var idx = val.lastIndexOf(".");

if (idx == -1) {

val += ".";

idx = val.lastIndexOf(".");

}

if (idx == val.length - 1) {

val += "00";

}

return val + "%";

}

運行效果如圖, 關于下面圖表部分, 請參閱 HighCharts 文檔

總結

以上是生活随笔為你收集整理的html js 动态表格数据,HTML+JS动态表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。