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 文档
html js 动态表格数据,HTML+JS动态表格相关推荐
- ant 改变表格数据_React ant design表格导出数据为EXCEL表格数据
一.由于公司项目需要,需要将表格数据导出为EXCEL表格数据.环境React+Ant Design 二.安装插件js-export-excel yarn安装-记得以管理员身份执行 yarn add j ...
- matlab批量导入excel表格数据,matlab导入excel表格数据-如何用matlab读取多个excel表格数据,将每个表格数......
如何用matlab读取多个excel表格数据,将每个表格数... 一xlsread()函数,比import简单的多,具体语句:A = xlsread('yourfilename.xls')望高手支招! ...
- matlab批量合并表格数据,用matlab合并excel表格数据-如何用matlab读取多个excel表格数据,将每个表格数......
用matlab如何识别excel里的单元格是否为合并单元格 方法如下: 使用函数xlsread读取单个文件. num=xlsread(filename) filename是单引号括起来的带路径的文件名 ...
- js 操作vuex数据_Vue.js中使用Vuex实现组件数据共享案例
当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --sav ...
- 前端进行表格数据导出到Excel表格
在一些项目中,会有可以导出表格数据的需求,这个导出的功能,前端就可以来完成,不过需要后端配合传过来表格头所对应的属性名以及这些属性名所对应的中文,搭配返回的数据,前端进行处理即可,虽然百度里面会有一大 ...
- jqgrid如何渲染表格数据_Jqgrid入门-操作表格的数据(二)
上一篇中,Jqgrid已经可以从服务端获得数据,并显示在Grid表格中了.下面说一下,如何操作表格及其数据. jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jqGrid的方法有两种 ...
- vue + element 表格数据导出为excel表格
由于业务内容的需要,我们有时候需要将表格中的数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击图中导出按钮时 ...
- 计算机高配置表格,数据大的excel表格对显卡有要求-求excel大量数据处理的电脑配置...
EXCEL表格数据太大运行很卡,怎样处理 处理办法: [我的电脑],打开[资源管理器],点击[菜单栏]中]菜单下的[文件夹选项]. 在刚打开的[文件夹选项]中选择[文件类型]. 在[已注册的文件类型] ...
- python 显示表格数据_python显示excel表格数据-怎么用python读取excel表格的数据
怎么用python读取excel表格的数据 #导入包 import xlrd #设置路径 path='C:\\Users\\jyjh\\Desktop\\datap.xlsx' #打开 data=xl ...
- php修改excel表格数据,php修改excel表格数据-php怎么导入Excel表格到数据库,根据表格内的字段......
php怎么导入Excel表格到数据库,根据表格内的字段... 昨天项目里有个新知需求,客户希望把一些数据能导出成为Excel表格道,刚开始用PHP原生输入Excel表格,发现效果不是很理想,于是找到一 ...
最新文章
- IBM谢东:2nm芯片可让手机4天一充电,量子计算机大规模应用的未来不会太远|MEET2022...
- GD32的flash读、擦除、写操作
- mysql:视图,触发器,事务,存储过程,函数
- boost.asio系列——socket编程
- python输入一组数据、进行简单的统计_《利用Python进行数据分析》学习笔记——第二章(3)...
- 博士申请 | 荷兰代尔夫特理工大学陶倩教授招收医学人工智能全奖博士生
- delphi socket 流的使用_Socket
- 使用pinyin4j将中文转换为拼音
- 小沙的步伐(枚举+暴力)
- C语言运算符优先级(超级详细)
- 如何在IPv6下观看网络电视直播
- 【着色器实现Shine局部或整体扫光效果_Shader效果第三篇】
- 集成百度做敏感词鉴定
- substrate介绍
- 2023年【安徽省安全员C证】免费试题及安徽省安全员C证证考试
- Your build settings specify a provisioning profile with the UUID, no provisioni(没多大用)
- 如何在微信小程序中实现实时会话(聊天)系统
- 新手如何选择 视频配音软件(文字转语音)
- Excel 取消单元格合并,并且将空值填充
- RV1109_RV1126 EVB板连接时List of devices attached
热门文章
- 学好单片机必须要了解的的8个电路设计
- 系统服务器如何给指定磁盘扩容_刀片服务器如何选择操作系统?
- a标签去下划线或文字添加下修饰_HTML标签:字体标签和超链接
- 清默网络linux班,linux笔记(26)grep
- python安装不上怎么办_python安装不了怎么办
- python diango 并发_python - django Model 并发写数据出现重复值
- 170525、解决maven隐式依赖包版本问题
- Struts01---入门小案例
- [转] 微信小程序 页面跳转 传递参数
- javaweb学习总结九(xml解析以及调整JVM内存大小)