html 表格 左侧表头,左侧是表头的JS表格控件(自写,网上没有的)
今天,项目中要用到该表格,找了一遍,发现没有合适的,于是自己动手丰衣足食。
最终呈现效果如上图,
1、左侧是表头的表格数据展现,
2、支持多行,多表头
3、固定表头的功能
4、能够支持标题
5、获取表格中的数据
6、支持IE/CHROME
7、 表格能够自适应根据内容行居中
Grid左侧固定测试
var test = new LeftHeadGrid({
id: "leftHeadGrid",
width: 800,
title:"danielinbiti",
perUnitWidth:300,
rowHeads:[{
width:"60",
rowname:[{name:"日期"},{name:"数值"}]
}],
columnDatas:[{
width:[1,1],
rows:[[10130501,101011],[2,3]]
}]
});
test.RenderTo("testdiv");
LeftHeadGrid.js
var LeftHeadGrid = function(config) {
this.rowHeads = config.rowHeads != null ? config.rowHeads: [];//name
this.columnDatas = config.columnDatas != null ? config.columnDatas: [];
this.width = config.width != null ? config.width: "";
this.id = config.id != null ? config.id: "TreGrid";
this.perUnitWidth = config.perUnitWidth != null ? config.perUnitWidth: 10;
this.innerWidth = 0;
this.innerLWidth = 0;
this.height = 0;
this.title = config.title != null ? config.title: "";
this.noDataStr = config.noDataStr != null ? config.noDataStr: "no data";
}
LeftHeadGrid.prototype.createGrid = function(){
var totalwidth = 0;
var tableHtml = "
for(var i=0;i
var obj = this.rowHeads[i];
var width = obj.width;
totalwidth = totalwidth + parseInt(width);
var rownameobj = obj.rowname;
for(var j=0;j
var nameobj = rownameobj[j];
if(j==rownameobj.length-1){
tableHtml = tableHtml + "
" + nameobj.name + "";
}else{
tableHtml = tableHtml + "
" + nameobj.name + "";
}
this.height = this.height + 40;
}
}
tableHtml = tableHtml + "
";
var headHtml = "
headHtml = headHtml + tableHtml + "
";
this.innerLWidth = totalwidth;
this.innerWidth = this.width-totalwidth-5;
return headHtml;
}
LeftHeadGrid.prototype.RenderTo =function(divId){
//var innerWidth = this.width-100;
var headHtml = this.createGrid();
var html = "
+ headHtml
+ "
+ "
+ "
"
+ "
"
+ "
"
html = "
"
+ html + "
";
html 表格 左侧表头,左侧是表头的JS表格控件(自写,网上没有的)相关推荐
- web day02 表格 表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
- axure树形表格_Axure教程:Axure中继器实现动态树结构控件详解
树结构是原型设计中常用的控件之一,常用于组织架构等功能.本文作者参照钉钉后台组织架构样式,使用Axure中继器实现动态树结构控件. 一.交互样式 初始样式(以钉钉后台-通讯录-组织架构为例): 初始载 ...
- Xceed WinForm数据表格控件Xceed Grid For .NET详细介绍
2019独角兽企业重金招聘Python工程师标准>>> Xceed Grid For .NET是一款高级的,多功能的.扩展性极强的数据表格控件,具有分组.主从表.多种主题外观.固定列 ...
- PYQT5(17)-高级界面控件-表格与树
表格与树解决的问题是如何在一个控件中有规律地呈现更多的数据.PyQt提供了两种控件类用于解决该问题,其中一种是表格结构的控件类:另一种是树形结构的控件类. QTableView 以表格形式输出信息,可 ...
- C#Winform的DataGridView控件使用详解2—DataGridView表格样式设置及表格操作
C#Winform的DataGridView控件使用详解2-DataGridView表格样式设置及表格操作 DataGridView表格样式设置 DataGridView行序号设置 右键弹出控件表格操 ...
- 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场
提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...
- 根据从日期控件选定的时间以表格形式显示数据_VB项目开发FlexGrid控件使用讲解...
FlexGrid控件使用介绍 大家好,在VB开发管理系统中,FlexGrid控件使用是非常普遍的.用FlexGrid ActiveX控件可以在 Visual Basic的窗体中创建一个电子数据表格,也 ...
- python表格控件_python表格控件
广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! pyqt5表格控件qtableview简介在通常情况下,一个应用需要和一批数据进 ...
- 表头合并_多个Excel表格合并数据麻烦?试试Power Query轻松帮你解决
Hi!大家好!欢迎来到小龙自修室! 又到了小龙分享时间!(今天的内容有点多,希望各位看官一定要看到最后!有惊喜) 上一篇文字小龙和大家一起制作了一个限定数据内容录入的电子表格,我的表格我做主! 表格做 ...
最新文章
- 从多维度解析神经科学中的视觉编码
- 《网络攻防实践》第八周作业
- 天玑机器人颈椎_烟台一女子车祸致颈椎重度骨折 骨科机器人助力救治
- Data Set 投票
- php 自动验证表单类,thinkPHP 表单自动验证功能
- 《小小梦魇2》直击青少年的深层焦虑
- 力扣算法题—075颜色分类
- 【图文】如何在centos上安装tomcat
- 李纪为:初入NLP领域的一些小建议
- 不再支持Postman集合v1格式,无法直接导入
- 锐起无盘服务器优化,锐起无盘系统制作系统优化教程.docx
- 实验一 常用元器件的识别与简单测试
- python论文画图模板
- spss进行偏相关分析
- 朴素贝叶斯应用-垃圾邮件过滤
- background 渐变背景
- Typora 0.11.18 beta版不能使用解决方法
- 二元logistic回归、ROC曲线及cutoff值
- bh1750采集流程图_基于BH1750光照强度数据采集系统的设计
- AWS 赞助 Rust 中文社区创业者
热门文章
- .NETStandard FreeSql v0.0.9 功能预览
- 微软热门开源项目及代码库地址
- ASP.NET Core中Ocelot的使用:基于服务发现的负载均衡
- 从明面上学习ASP.NET Core
- 【给中高级开发者】构建高性能ASP.NET应用的几点建议
- HoloLens开发手记-全息Hologram
- 自定义地图怎么做成html,自定义html为谷歌地图制作标记
- 第三方app_为什么第三方APP不能下载呢?
- 将WebApiTestClient添加到ASP.NET Web API帮助页面
- 【QGIS入门实战精品教程】5.1:QGIS地理坐标转火星坐标系(GCJ02)案例教程