html js 动态表格数据,HTML+JS动态表格

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 文档