mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
6.2 KiB
226 lines
6.2 KiB
<!-- 引用自 https://gitee.com/layui/layui/issues/I6V5VY --> |
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Document</title> |
|
<link rel="stylesheet" href="../src/css/layui.css" href2="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.6/css/layui.css" |
|
href3="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/css/layui.css" /> |
|
</head> |
|
|
|
<body> |
|
<div class="layui-fluid" style="padding: 15px;"> |
|
<button class="layui-btn" lay-on="asyncLoad">asyncLoad</button> |
|
<button class="layui-btn" lay-on="flatData">flatData</button> |
|
<table id="demo"></table> |
|
</div> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script> |
|
<script src="../src/layui.js" src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.7/layui.js" |
|
src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"></script> |
|
<script> |
|
layui.use(["treeTable", "util"], function () { |
|
var treeTable = layui.treeTable; |
|
var util = layui.util; |
|
|
|
treeTable.set({ |
|
|
|
}); |
|
|
|
util.on({ |
|
asyncLoad: function () { |
|
treeTable.reload('demo', { |
|
url: "/getDatas", |
|
tree: { |
|
data: { |
|
isSimpleData: false |
|
}, |
|
async: { |
|
enable: true, |
|
autoParam: ["parentId=id"] |
|
} |
|
}, |
|
}, true) |
|
}, |
|
flatData: function () { |
|
treeTable.reload('demo', { |
|
data: testDatas, |
|
url: false, |
|
tree: { |
|
data: { |
|
isSimpleData: true |
|
}, |
|
async: { |
|
enable: false, |
|
autoParam: ["parentId=id"] |
|
} |
|
}, |
|
}, true) |
|
} |
|
}) |
|
|
|
// 生成随机ID函数 |
|
const createId = (() => { |
|
let nextId = 1; |
|
return () => nextId++; |
|
})(); |
|
|
|
// 生成节点函数 |
|
const createNode = (parentId = null, level = 0) => { |
|
const id = createId(); |
|
const children = |
|
level < 3 |
|
? Mock.mock({ |
|
"array|0-5": [createNode.bind(null, id, level + 1)] |
|
}).array |
|
: []; |
|
|
|
return { |
|
id, |
|
name: `User${id}`, |
|
type: Mock.mock("@d6"), |
|
status: Mock.Random.d4(), |
|
score: Mock.Random.d100(), |
|
experience: Mock.Random.integer(1000, 99999), |
|
sex: Mock.Random.cword("男女", 1), |
|
city: Mock.Random.city(), |
|
description: Mock.mock("@cparagraph"), |
|
createTime: Mock.mock("@datetime"), |
|
parentId, |
|
children, |
|
isParent: !!children.length |
|
}; |
|
}; |
|
|
|
// 生成树 |
|
const rootNodes = Mock.mock({ |
|
"array|10-20": [createNode] |
|
}).array; |
|
|
|
// 将树展开 |
|
const flattenTree = (nodes, parentId = null) => { |
|
let result = []; |
|
nodes.forEach((node) => { |
|
result.push({ |
|
...node, |
|
parentId, |
|
children: undefined |
|
}); |
|
if (node.children.length > 0) { |
|
result = result.concat(flattenTree(node.children, node.id)); |
|
} |
|
}); |
|
return result; |
|
}; |
|
|
|
const getTreeData = function (nodes) { |
|
let result = []; |
|
nodes.forEach((node) => { |
|
result.push({ |
|
...node, |
|
parentId: null, |
|
children: getTreeData(node.children) |
|
}); |
|
}); |
|
return result; |
|
}; |
|
|
|
var testDatas = flattenTree(rootNodes); |
|
//var testDatas = getTreeData(rootNodes); |
|
|
|
Mock.mock(/getDatas/, "get", (config) => { |
|
console.log(config); |
|
var params = layui.url(config.url); |
|
var search = params.search; |
|
var parentId = search.parentId; |
|
var dataRet = testDatas.filter(function (value, index, array) { |
|
return value.parentId == parentId; |
|
}); |
|
|
|
var sortColumn = search.sortColumn; |
|
var sortType = search.sortType; |
|
|
|
dataRet = layui.sort(dataRet, sortColumn, sortType === "desc"); |
|
|
|
var curr = search.page; |
|
if (!curr) { |
|
curr = 1; |
|
} else { |
|
curr = parseInt(curr); |
|
curr = curr || 1; |
|
} |
|
var limit = search.limit; |
|
if (!limit) { |
|
limit = dataRet.length; |
|
} else { |
|
limit = parseInt(limit); |
|
limit = limit || dataRet.length; |
|
} |
|
var start = (curr - 1) * limit; |
|
|
|
return { |
|
code: 0, |
|
data: dataRet.slice(start, start + limit), |
|
count: dataRet.length |
|
}; |
|
}); |
|
|
|
treeTable.render({ |
|
elem: "#demo", |
|
url: "/getDatas", |
|
totalRow: true, |
|
tree: { |
|
async: { |
|
enable: true, |
|
autoParam: ["parentId=id"] |
|
} |
|
}, |
|
maxHeight: "full-95", |
|
cols: [ |
|
[ |
|
{ type: "numbers", fixed: "left" }, |
|
{ |
|
field: "id", |
|
title: "ID", |
|
width: 145, |
|
sort: true, |
|
fixed: "left", |
|
totalRow: "合计：" |
|
}, |
|
{ field: "name", title: "用户名", width: 180, fixed: "left" }, |
|
{ |
|
field: "experience", |
|
title: "积分", |
|
width: 90, |
|
sort: true, |
|
totalRow: "{{= d.TOTAL_NUMS }}" |
|
}, |
|
{ field: "sex", title: "性别", width: 80, sort: true }, |
|
{ |
|
field: "score", |
|
title: "评分", |
|
width: 80, |
|
sort: true, |
|
totalRow: true |
|
}, |
|
{ field: "city", title: "城市", width: 150, templet: "#tpl1" }, |
|
{ |
|
field: "description", |
|
title: "描述信息", |
|
minWidth: 200, |
|
templet: "#tpl2" |
|
}, |
|
{ field: "createTime", title: "创建时间", width: 170 } |
|
] |
|
], |
|
done: function (res, curr, count) { |
|
console.log('渲染完成', res, curr, count, this); |
|
} |
|
}); |
|
}); |
|
|
|
</script> |
|
</body> |
|
|
|
</html>
|
|
|