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
智能推荐
Delphi dbgrideh序号_dbgrideh增加序号和箭头-程序员宅基地
文章浏览阅读267次。数据库里面的数据没有序号的数据，在dbgrideh上新增一列自定义其字段，例如：id。在dbgrideh控件上的‘OnDrawColumnCell’事件下写下代码。在unidatesource的‘OnDataChange’事件下写下。if DataCol = 0 then //设置在第一列。在编码的开头定义i，为integer。_dbgrideh增加序号和箭头
samber/lo 库的使用方法： 处理切片-程序员宅基地
文章浏览阅读1.4k次，点赞27次，收藏26次。是一个 Go 语言库，提供了一些常用的集合操作函数，如 Filter、Map 和 FilterMap。这个库函数太多，因此我决定按照功能分别介绍，本文介绍的是 samber/lo 库中处理切片的函数。主要参考库的README。_samber/lo
verilog乘法器以及booth编码改进_改进booth编码-程序员宅基地
文章浏览阅读4.6k次，点赞7次，收藏28次。第一章 整数乘法器1.1 整数的概念整数在IEEE 的规定上有，短整数short integer , 中整数integer 和 长整数long integer ，它们之间的关系如下： 整数字节空间取值范围短整数一个字节-127 ~ 127中整数两个字节-32767~32767长整数和四个字节-2147483647~2147483647 在这里笔者以短整数..._改进booth编码
C语言课程笔记知识总结与感想_c语言知识点感想-程序员宅基地
文章浏览阅读1.3k次。 C数据类型。{常量与变量}第2章常量:整型常量: 有符号整型常量:默认int定义为有符号整数，无需使用signed. 无符号整型常量:不能表示成小于零的数。 长整型常量。 无符号长整型常量。 实型..._c语言知识点感想
1.1 基于B/S 结构的 Web 应用_b/s应用-程序员宅基地
文章浏览阅读1.5k次，点赞5次，收藏4次。选项，弹出首选项对话框，在左侧导航树中找到General->Content Types,在右侧Context Types树中展开Text,选择“Java Source File”节点,在下面的“Default encoding"输入框中输入“UTF-8",单击“Update”按钮，即可设置Java文件编码为UTF-8，如图1-9所示。而服务器端有两种，- -种是数据库服务器端，客户端通过数据库连接访问服务器端的数据，另一种是Socket服务器端，服务器端的程序通过Socket与客户端的程序通信。_b/s应用
使用 Docker 和 Traefik v1 搭建轻量代码仓库（Gogs）_gogs sqlite 性能-程序员宅基地
文章浏览阅读710次。本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 署名 4.0 国际 (CC BY 4.0)本文作者: 苏洋创建时间: 2020年02月04日统计字数: 12336字阅读时间: 25分钟阅读本文链接: https://soulteary.com/2020/02/04/gogs-git-server-with-docker-and-..._gogs sqlite 性能
随便推点
苍穹外卖day8（2）用户下单、微信支付
用户下单因为订单信息中包含了其他业务中的数据，在逻辑处理中涉及了多个其他业务，比如要判断地址簿、购物车数据是否为空（查询地址簿和购物车）订单表字段多，在插入数据的时候，要确保每个字段都有值向订单表插入数据后，也得向订单明细表插入数据：具体来说，就是遍历购物车数据，把购物车中的商品详细信息（菜品、套餐、数量、价格…）赋给订单详情表完成下单后要清空购物车订单支付需要商家号，跳过支付，模拟实现订单支付功能。
伯克利大模型排名-程序员宅基地
文章浏览阅读202次。网站： https://arena.lmsys.org/
【已解决】Python的坑：os.system()运行带有空格的长路径和双引号参数有bug_os.system怎么调试-程序员宅基地
文章浏览阅读4.7k次，点赞6次，收藏7次。当DOS命令行带有双引号路径、双引号参数时，os.system()运行的结果总是显示：“XXX（路径名）不是内部或外部命令，也不是可运行的程序或批处理文件。”_os.system怎么调试
基于FPGA的交通灯系统_vivado实例交通灯-程序员宅基地
文章浏览阅读3.6k次，点赞4次，收藏72次。基于FPGA的交通灯系统一、实验目的1．学习和掌握将实践中的要求抽象为逻辑需求关系的方法。2．掌握将小型数字系统划分为控制器和处理器的方法。3．掌握依据ASM图设计小型数字系统的方法4．掌握小型数字系统的调测方法5．掌握可编程器件及其开发软件的使用方法二、主要仪器设备及软件硬件：FPGA核心板（xc7a35tftg256_1)软件：vivado2018.3三、实验任务十字路口的交通灯管理系统。在主干道和小道的十字交叉路口，设置交通灯管理系统，管理车辆运行。小道路口设有传感器C（此处以按_vivado实例交通灯
MLP理解_mlp是什么意思-程序员宅基地
文章浏览阅读3.7w次，点赞97次，收藏245次。一直不理解MLP的作用，今天细看了下几篇博客，记录下自己心得：MLP实质MLP中文叫法是多层感知机，其实质就是神经网络。其提出主要是为了解决单层感知机无法解决的非线性问题。个人理解个人理解，MLP的forward结构可以简单看成:Output=Input×Weights+biases其中：Input：N×C1Weights：C1×C2biases：C2×1Output：N×C2Input一共N行，每行C1个Feature，MLP能够实现将C1维转换为C2维。这C2维中每一维都整合了原_mlp是什么意思
zabbix监控深信服_zabbix3 通过snmpv3监控linux主机-程序员宅基地
文章浏览阅读685次。一、zabbix 3 通过snmp v3监控linux主机原因是第三方系统，无法安装zabbix客户端，只能通过snmp 协议来监控深信服：在AC和SSL_×××等设备中，SNMP默认是开启的，而且默认密码为sinfors(早期版本)或sangfor，而在NGAF中，这个功能不是默认开启的，在“网络/高级网络配置”中，设置了团体名，也无法访问SNMP。后来，经过查询各种资料，得知在NGAF开启SN..._深信服 mib zabbix