php复杂表格样式,复杂表格设计数据格式-程序员宅基地
技术标签： php复杂表格样式
1. 表头设计
原理：
和多叉树的原理类似，参考了它的展示形式。
image
表头说明：
如果没有孩子节点就只返回如下一个字段：
name ：名字
如果有孩子节点，就把数据加在children里面，层层嵌套，返回字段如下：
name ：名字
children : 孩子节点
数据结构格式，参考如下代码：
headerData:[
{
name: '地区',
},
{
name: '总数据',
children: [
{
name: '数据1',
children: [
{
name: '数据11',
children: [
{
name: '数据111',
},
{
name: '数据112',
}
]
},
{
name: '数据12',
children: [
{
name: '数据121',
},
{
name: '数据122',
}
]
},
{
name: '数据13',
children: [
{
name: '数据131',
},
{
name: '数据132',
}
]
},
{
name: '数据14',
},
]
}
]
}
];
表头的宽高方面，前端计算，后端不用管，按照如下格式返回数据即可。
表格数据格式
每一项按照表头展示的顺序返回，通过数组的形式
返回一个参数：
bodyData：总数据
数据结构格式参考代码如下：
bodyData:[
["地区最先","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
["地区最后","数据111","数据112","数据121","数据122","数据131","数据132","数据14"],
]
3. 效果
如上表头与表格数据代码生成的效果如图：
image
4. 代码
语法高亮用到 codemirror 插件
/**
* 递归遍历 格式化数组
* @param { Array } paramArr 目标数组
* @param { Number } level 层级
*/
export function formatArray(paramArr, level) {
let levelFirst = Number(level)
const arr = []
let childArr = []
for (let i = 0; i < paramArr.length; i++) {
let obj = {}
for (let j in paramArr[i]) {
if (j != 'children') {
obj[j] = paramArr[i][j]
}
obj['level'] = levelFirst
obj['width'] = getLeafCountTree(paramArr[i])
if (!paramArr[i].children) {
obj['childrenNumber'] = 0
// LeafNode: 叶子节点就是树中最底段的节点
// obj['isLeafNode'] = true
} else {
// obj['isLeafNode'] = false
obj['childrenNumber'] = paramArr[i].children.length
}
}
arr.push(obj)
if (paramArr[i].children) {
let lev = Number(levelFirst) + 1
childArr = childArr.concat(formatArray(paramArr[i].children, lev));
}
}
let endArr = arr.concat(childArr)
return endArr
}
/**
* 获取 节点的所有叶子节点个数
* @param {Object} json Object对象
*/
export function getLeafCountTree(json) {
if(!json.children){
return 1;
}else{
var leafCount = 0;
for(var i = 0 ; i < json.children.length ; i++){
leafCount = leafCount + getLeafCountTree(json.children[i]);
}
return leafCount;
}
}
// json对对象字符串的格式化，美化
export function jsonFromat (text_value){
if(text_value == ""){
alert("不能为空");
return false;
} else {
var json=eval('(' + text_value + ')');
text_value=JSON.stringify(json);
var res="";
for(var i=0,j=0,k=0,ii,ele;i
{//k:缩进，j:""个数
ele=text_value.charAt(i);
if(j%2==0&&ele=="}")
{
k--;
for(ii=0;ii
ele="\n"+ele;
}
else if(j%2==0&&ele=="{")
{
ele+="\n";
k++;
for(ii=0;ii
}
else if(j%2==0&&ele==",")
{
ele+="\n";
for(ii=0;ii
}
else if(ele=="\"") j++;
res+=ele;
}
return res
}
}
复杂表头 json 数据格式验证：
{ {l.name}}
{ { x | valueFromt }}
提交
[
{
name: '地区',
},
{
name: '总数据',
children: [
{
name: '数据1',
children: [
{
name: '数据11',
children: [{
name: '数据111',
},
{
name: '数据112',
}
]
},
{
name: '数据12',
children: [{
name: '数据121',
},
{
name: '数据122',
}
]
},
{
name: '数据13',
children: [{
name: '数据131',
},
{
name: '数据132',
}
]
},
{
name: '数据14',
},
{
name: '数据15',
},
{
name: '数据16数据16数据16数据16',
},
{
name: '数据17',
},
]
}
]
}
];
// 说明这个 demo 是给 pc 端用的，单位要为 px
import { formatArray, getLeafCountTree, jsonFromat } from "libs/common/common";
import { Button, MessageBox } from 'mint-ui';
import * as CodeMirror from 'codemirror/lib/codemirror'
// 根据设置的主题，引入相应的主题包,主题包存储在theme下，使用其他主题包时设置option中theme为对应主题
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/neat.css'
import 'codemirror/theme/elegant.css'
import 'codemirror/theme/night.css'
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/theme/rubyblue.css'
import 'codemirror/theme/xq-dark.css'
// styleActiveLine: 设置光标所在行高亮true/false，需引入工具包：
import 'codemirror/addon/selection/active-line'
// 根据设置的编辑器语言，引入相应工具包,以下为常用语言包
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/go/go'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'
import 'codemirror/mode/css/css'
import 'codemirror/mode/sass/sass'
import 'codemirror/mode/jsx/jsx'
import 'codemirror/mode/django/django'
// keyMap：快捷键，default使用默认快捷键，除此之外包括emacs，sublime，vim快捷键，使用需引入工具
import 'codemirror/keymap/sublime.js'
import 'codemirror/keymap/emacs.js'
import 'codemirror/keymap/vim.js'
// extraKeys 快捷键,例如 {“Ctrl-Q”: “autocomplete”}：自动补全使用需要引入工具
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/show-hint'
export default {
data() {
return {
mapArray: [],
keyMap: 'default',
mode: 'javascript',
editor: '',
selected: 'monokai',
header: '',
maxHeight: '100%',
theadHeight: '100%',
offsetHeight: 0,
scroll: {
scroller: null
},
headerList: [],
bodyList: [],
}
},
filters: {
valueFromt: function (value) {
let realValue = ''
if (!value) return ''
value = value.toString()
if (value.length > 20) {
realValue = value.slice(0, 15) + '...'
} else {
realValue = value
}
return realValue
},
},
methods: {
selectKeyMap(){
this.editor.addKeyMap(this.keyMap)
},
selectMode(){
this.editor.setOption("mode",this.mode)
},
selectTheme() {
this.editor.setOption("theme", this.selected);
},
setInputValue() {
this.header = this.editor.getValue();
if(this.header){
this.change()
}
},
change() {
try {
const newData = formatArray(eval(this.header), 0)
let maxLevel = newData[newData.length - 1].level
this.setHeight(newData, maxLevel + 1)
this.arayLayered(newData, maxLevel)
this.headerList = this.arayLayered(newData, maxLevel)
} catch (e) {
console.log('e:', e)
MessageBox('提示', '请检查 json 格式是否正确！！!');
}
},
setHeight(arr, maxLevel) {
// console.log("setHeight maxLevel", maxLevel)
for (let i = maxLevel; i >= 0; i--) {
for (let j = 0; j < arr.length; j++) {
// 设置高
if (arr[j].childrenNumber) {
arr[j].height = 1
} else {
arr[j].height = maxLevel - arr[j].level
}
}
}
return arr
},
arayLayered(arr, maxLevel) {
let returnArr = []
for (let i = 0; i <= maxLevel; i++) {
let arrLevel = []
for (let j = 0; j < arr.length; j++) {
if (arr[j].level == i) {
arrLevel.push(arr[j])
}
}
returnArr[i] = arrLevel
}
return returnArr
}
},
mounted() {
let bodyListA = [
["地区最先", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
["地区最后", "数据111", "数据112", "数据121", "数据122", "数据131", "数据132", "数据14"],
]
const data = [
{
name: '地区',
},
{
name: '总数据',
children: [
{
name: '数据1',
children: [
{
name: '数据11',
children: [{
name: '数据111',
},
{
name: '数据112',
}
]
},
{
name: '数据12',
children: [{
name: '数据121',
},
{
name: '数据122',
}
]
},
{
name: '数据13',
children: [{
name: '数据131',
},
{
name: '数据132',
}
]
},
{
name: '数据14',
},
{
name: '数据15',
},
{
name: '数据16数据16数据16数据16',
},
{
name: '数据17',
},
]
}
]
}
];
this.header = jsonFromat(JSON.stringify(data))
const newData = formatArray(data, 0)
let maxLevel = newData[newData.length - 1].level
this.setHeight(newData, maxLevel + 1)
this.arayLayered(newData, maxLevel)
this.headerList = this.arayLayered(newData, maxLevel)
this.editor = CodeMirror.fromTextArea(document.getElementById("code"), {
// value : data, // 文本域默认显示的文本
lineNumbers: true, /* 定义是否显示行号 */
mode: "javascript", /* 定义语法的类型，如果是html则为：text/html */
theme: "monokai", /* 定义主题 */
smartIndent: true, // 是否智能缩进
styleActiveLine: true,
keymap:"defaule"
});
// this.editor.on("changes",() =>{
// //编译器内容更改事件
// this.setInputValue();
// });
this.editor.setSize(1200,500)
}
}
.CodeMirror {
border: 1px solid black;
line-height: 16px;
font-size: 16px;
text-align: left;
}
.submit{
margin-left: 580px;
margin-top: 20px;
}
textarea{
width: 1300px;
height: 1300px;
}
.content{
font-size: 16px;
}
.textarea{
text-align: center;
font-size: 20px;
.title{
margin-top: 20px;
font-size: 30px;
color: #333;
}
textarea{
border: 1px solid #eee;
font-size: 16px;
resize: both;
width: 800px;
min-height: 900px;
}
}
.message{
color: red;
font-size: 16px;
}
.waterMask {
position: absolute;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
}
.pages-tables {
-webkit-overflow-scrolling: touch; // ios滑动顺畅
position: relative;
margin-left: 5%;
padding-bottom: 160px;
margin: 0 auto;
width: 1200px;
}
.rolling-table {
height: 100%;
font-size: 0.28rem;
color: #86939a;
background-color: #fff;
width: 100%;
-webkit-overflow-scrolling: touch;
position: relative;
top: 0;
// overflow: hidden;
}
.rows {
position: relative;
z-index: 3;
}
.cross {
position: relative;
z-index: 5;
}
table td {
border: 0px solid #000;
font-size: 25px;
background: #fff;
}
::-webkit-scrollbar {
display: none;
}
.table {
border-collapse: collapse; //去掉重复的border
color: #86939e;
font-size: 25px;
border: 0px solid #000;
min-height: 100%;
text-align: center;
td {
border-bottom: 1px solid #eee;
height: 30px;
line-height: 30px;
padding: 0 0.2rem;
// white-space: nowrap;
white-space: inherit;
max-width: 500px;
min-width: 50px;
// overflow:hidden;
// text-overflow:ellipsis;
// -webkit-line-clamp:2;
}
th {
color: #43484d;
white-space: pre-wrap;
height: 36px;
line-height: 36px;
padding: 5px 6px;
background-color: #f3f4f6;
font-weight: normal;
padding-bottom: 0;
padding-top: 0;
max-width: 200px;
border: 1px solid red;
&:last-child{
// border-right: 0rem solid #e4e8f5;
}
}
}
tr{
position: relative;
background-color: #fff;
&:nth-of-type(odd){
td{
background-color: #ebf9fc;
}
}
}
5. 效果链接：
效果链接如下:
动态效果：
image
智能推荐
上采样(upsample)-程序员宅基地
文章浏览阅读1.7k次。转载链接：https://blog.csdn.net/wydbyxr/article/details/83819089上采样(upsample)的方法 在神经网络中，扩大特征图的方法，即upsample/上采样的方法 1）unpooling：恢复max的位置，其余部分补零 2）deconvolution(反卷积)：先对input补零，再conv 3）插值方法，双线性插值等； ..._upsample
ESP8266开发之旅 网络篇⑪ WebServer——ESP8266WebServer库的使用_esp8266开发之旅 网络篇 webserver——esp8266webserver库的使用-程序员宅基地
文章浏览阅读2.6w次，点赞28次，收藏25次。1. 前言 在前面章节的博客中，博主介绍了ESP8266WiFi库 Tcp server的用法，并模拟了Http webserver的功能。但是，可以看出通过Tcp server 处理http请求，我们需要自己解析请求协议以及判断各种数据，稍微不小心就很容易出现错误。 那么有没有针对Http webserver操作的库呢？答案肯定是有的，这就是博主本篇需要跟大家讲述的知识——ESP..._esp8266开发之旅 网络篇 webserver——esp8266webserver库的使用
Betaflight通过OSD设置摄像头参数(F*V Camera Control)_平头哥摄像头osd调参-程序员宅基地
文章浏览阅读6.3k次。简介在无人机飞行中，有些摄像头支持通过飞控的OSD界面进入到摄像头系统，从而设置摄像头的相关参数，如白平衡、亮度、个性化字符信息等参数。（F*V Camera Control）设置步骤DALRC F405飞控支持此项功能，需要配合OSD界面进行，USB连接后进入Betaflight Configurator的CLI命令模式下按如下步骤设置命令： 1.映射端口（飞控固件内已默认映射..._平头哥摄像头osd调参
知三角形三边和两点坐标计算另外一点的坐标_已知两点坐标以及三边边长-程序员宅基地
文章浏览阅读6.8k次，点赞4次，收藏27次。问题：已知三角形A、B点的坐标和三边长，求C点坐标，如图： 原理：方位角和三角函数关系求解过程：计算边AC和AB的夹角θ，即： 2. 计算边AB与x轴的夹角根据方位角一般公式 ..._已知两点坐标以及三边边长
【Python计量】自相关性（序列相关性）的检验_用残差图诊断模型的误差项是否存在自相关。-程序员宅基地
文章浏览阅读1.4w次，点赞11次，收藏97次。多元线性回归模型的基本假设之一就是模型的随机干扰项相互独立或不相关。如果模型的随机感染项违背了相互独立的基本假设，则称为存在序列相关性（自相关性）。我们以伍德里奇《计量经济学导论：现代方法》的”第12章 时间序列回归中序列相关和异方差性“的案例12.4为例，使用BARIUM中的数据来进行序列相关性的检验。import wooldridge as wooimport pandas as pdimport numpy as npimport statsmodels.api as smimport s_用残差图诊断模型的误差项是否存在自相关。
neo4j使用详解（十六、索引之语义索引＜向量索引＞——最全参考）_neo4j如何向量化查询-程序员宅基地
文章浏览阅读772次，点赞22次，收藏28次。节点矢量搜索索引在Neo4j 5.11中作为公测版本发布，在Neo4j 5.13中作为通用版本发布。向量索引允许用户从大型数据集查询向量嵌入。嵌入是数据对象(如文本、图像、音频或文档)的数字表示。例如，文本中的每个单词或标记通常表示为高维向量，其中每个维表示单词含义的某个方面。语义上相似或相关的词通常用向量空间中彼此更接近的向量来表示。这允许像加法和减法这样的数学运算带有语义意义。例如，“国王”减去“男人”加上“女人”的向量表示可能接近于“女王”的向量表示。_neo4j如何向量化查询
随便推点
WPF程序_spy++分析wpf程序-程序员宅基地
文章浏览阅读597次。WPF程序通过spy++只有一个窗口句柄, 下面的子控件是看不到句柄的。所以也就没办法通过Win32 API FindWindow来查找子控件了。 如果您的代码没有经过代码混淆的话，别人是可以用ILSPY来查看其exe的代码的。_spy++分析wpf程序
77. 组合_77.组合-程序员宅基地
文章浏览阅读64次。77. 组合https://leetcode-cn.com/problems/combinations/难度中等748给定两个整数n和k，返回范围[1, n]中所有可能的k个数的组合。你可以按任何顺序返回答案。示例 1：输入：n = 4, k = 2输出：[ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4],]示例 2：输入：n = 1, k = 1输出：[[1]]提示：1 &l..._77.组合
Android开发都需要使用什么语言？_安卓开发的编程语言-程序员宅基地
文章浏览阅读2.2w次，点赞9次，收藏16次。Android是以Linux为核心的手机操作平台，作为一款开放式的操作系统，随着Android的快速发展，如今已允许开发者使用多种编程语言来开发Android应用程序，而不再是以前只能使用Java开发Android应用程序的单一局面。那么，Android系统都能使用哪些语言来开发呢？ 在Android中，开发者可以使用Java作为编程语言来开发应用程序，也可以通过Android N_安卓开发的编程语言
四级单词列表_四级单词a到d有多少个-程序员宅基地
文章浏览阅读1.7k次。四级单词列表置顶2018年11月09日 13:27:35多多单词阅读数：5551、四级英语单词（1-100）2、四级英语单词（101-200）3、四级英语单词（201-300）4、四级英语单词（301-400）5、四级英语单词（401-500）6、四级英语单词（501-600）7、四级英语单词（601-700）8、四级英语单词（701-800）9、四级..._四级单词a到d有多少个
linux电子设计软件,集成电路eda软件-程序员宅基地
文章浏览阅读357次。立创EDA软件是一款用于电子线路设计的仿真设计工具，立创EDA为用户提供了原理图和PCB模块，用户可以轻松方便的绘制原理图，同时多层板流畅布线，能够有效提升使用者工作效率，减轻工作压力。软件介绍立创EDA是一款电子设计仿真软件，用户可以在这款软件上进行电子线路的仿真设计，其中软件自带了很多功能，例如电气工具等，以此达到让用户快速设计电路图的效果。软件功能1、原理图绘制：方便快速的绘制原理图，轻松分..._ltspice linux
Eyeriss中的RS（行固定）数据流-程序员宅基地
文章浏览阅读3.6k次，点赞45次，收藏59次。Eyeriss中的RS（行固定）数据流Eyeriss想必大家都读过，但是你在第一次读v1的时候可能并不清楚他所讲的RS数据流具体是什么样的。笔者在这里专门对Eyeriss v1中的RS（行固定）数据流进行详细举例说明。原文中有关RS数据流的部分：“Eyeriss: An Energy-Efficient Reconfigurable Accelerator for Deep Convolutional Neural Networks”中的第四段。“Eyeriss: A Spatial Archite_eyeriss