mirror of
https://github.com/layui/layui.git
synced 2026-02-09 02:09:18 +08:00
8781976bcb
* refactor(tree): 使用 component 模块重构组件 * feat(core): 新增 `lay.treeToFlat(), lay.flatToTree()` 方法 * fix(tree): 优化 父、子节点的 checked 状态关系 * fix(tree): update * fix(tree): 修复点击复选框时触发了节点展开收缩的问题 * refactor(tree): update * refactor(tree): 优化叶子节点的图标 * refactor: 重写 `lay.treeToFlat` 和 `lay.flatToTree`
209 lines
5.5 KiB
HTML
209 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>基础方法测试用例 - layui</title>
|
||
<link href="../src/css/layui.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="layui-container" style="padding: 30px 0;">
|
||
<div class="" style="padding: 30px 0;">
|
||
<blockquote class="layui-elem-quote" style="color: #666;">
|
||
点击按钮开始测试，测试结果打开浏览器控制台查看
|
||
</blockquote>
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn" lay-on="sort">layui.sort</button>
|
||
<button class="layui-btn" lay-on="type">layui.type</button>
|
||
<button class="layui-btn" lay-on="isArray">layui.isArray</button>
|
||
<button class="layui-btn" lay-on="extend">lay.extend</button>
|
||
<button class="layui-btn" lay-on="treeToFlat">lay.treeToFlat</button>
|
||
<button class="layui-btn" lay-on="flatToTree">lay.flatToTree</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../src/layui.js"></script>
|
||
<script>
|
||
layui.use(['lay', 'util'], function() {
|
||
var lay = layui.lay;
|
||
var util = layui.util;
|
||
|
||
var style = 'color: orange; font-size: 16px;';
|
||
|
||
// 事件
|
||
util.on({
|
||
sort: function(){
|
||
//sort
|
||
console.log('%c> layui.sort: ', style);
|
||
console.log(
|
||
'数字-整数型',
|
||
layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a')
|
||
);
|
||
console.log(
|
||
'数字-浮点型',
|
||
layui.sort([{a: 3.5},{a: 0.5},{a: 0.5},{a: -1.5},{a: -5.5},{a: 6.5},{a: 9.5},{a: -333333.5}], 'a')
|
||
);
|
||
console.log(
|
||
'数字-混合型',
|
||
layui.sort([{a: 1},{a: 20.5},{a: 20.3},{a: 3},{a: 52},{a: 4.3}], 'a')
|
||
);
|
||
console.log(
|
||
'中文',
|
||
layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a')
|
||
);
|
||
console.log(
|
||
'英文',
|
||
layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a')
|
||
);
|
||
console.log(
|
||
'混合',
|
||
layui.sort([
|
||
{a: 3}
|
||
,{a: '男'}
|
||
,{a: 0}
|
||
,{a: 66}
|
||
,{a: 99}
|
||
,{a: 'C'}
|
||
,{a: '女'}
|
||
,{a: 3.5}
|
||
,{a: 0}
|
||
,{a: -1}
|
||
,{a: 'B'}
|
||
,{a: 5.5}
|
||
,{a: '男'}
|
||
,{a: 'A'}
|
||
,{a: -5}
|
||
,{a: '男'}
|
||
,{a: 6}
|
||
,{a: 9}
|
||
], 'a')
|
||
);
|
||
console.log(
|
||
'数组成员全为数字',
|
||
layui.sort([1, 20.5, 19.5, 52, 4.5])
|
||
);
|
||
console.log(
|
||
'数组成员为混合型',
|
||
layui.sort([1, {a: 32}, 20.5, {a: 6}, 52, 5.5], 'a') //按成员对象的 key 为 a 进行比较
|
||
);
|
||
},
|
||
|
||
type: function(){
|
||
console.log('%c> layui.type: ', style);
|
||
console.log(
|
||
'new RegExp()：', layui.type(new RegExp()),
|
||
'\nnew Date()：', layui.type(new Date()),
|
||
'\n[]：', layui.type([])
|
||
);
|
||
},
|
||
|
||
isArray: function(){
|
||
console.log('%c> layui.isArray: ', style);
|
||
console.log(
|
||
'[1,6]：', layui.isArray([1,6]),
|
||
'\nlay("div")：', layui.isArray(lay('div')),
|
||
'\ndocument.querySelectorAll("div")：', layui.isArray(document.querySelectorAll('div')),
|
||
'\n{"key": "value"}：', layui.isArray({key: 'value'})
|
||
);
|
||
},
|
||
|
||
extend: function(){
|
||
console.log('%c> lay.extend: ', style);
|
||
console.log(
|
||
lay.extend(
|
||
{},
|
||
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
|
||
{a: 111, b: 1, c: {bbb: 'bbb'}},
|
||
{a: 222222, arr: [5]}
|
||
)
|
||
);
|
||
console.log(
|
||
lay.extend([], [1,3,5])
|
||
);
|
||
},
|
||
|
||
treeToFlat: function() {
|
||
var data = [
|
||
{
|
||
"title": "节点 1",
|
||
"id": "1000",
|
||
"children": [
|
||
{
|
||
"title": "节点 1-1",
|
||
"id": "1001",
|
||
},
|
||
{
|
||
"title": "节点 1-2",
|
||
"id": "1002",
|
||
"children": [
|
||
{
|
||
"title": "节点 1-2-1",
|
||
"id": "1003",
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"title": "节点 2",
|
||
"id": "2000",
|
||
}
|
||
];
|
||
|
||
var flatData = lay.treeToFlat(data, {
|
||
keepChildren: true // 是否保留 children 字段
|
||
}); // 树状数据展平
|
||
|
||
console.log('%c> lay.treeToFlat: ', style);
|
||
console.log('树转平后：', JSON.stringify(flatData, null, 2));
|
||
|
||
flatData[0].children[0].title="333333"; // 修改数据
|
||
console.log('原始数据：', JSON.stringify(data, null, 2)); // 查看原始数据是否被修改
|
||
},
|
||
|
||
flatToTree: function() {
|
||
var data = [
|
||
{
|
||
"title": "节点 1",
|
||
"id": "1000",
|
||
"parentId": null
|
||
},
|
||
{
|
||
"title": "节点 1-1",
|
||
"id": "1001",
|
||
"parentId": "1000"
|
||
},
|
||
{
|
||
"title": "节点 1-2",
|
||
"id": "1002",
|
||
"parentId": "1000"
|
||
},
|
||
{
|
||
"title": "节点 1-2-1",
|
||
"id": "1003",
|
||
"parentId": "1002"
|
||
},
|
||
{
|
||
"title": "节点 2",
|
||
"id": "2000",
|
||
"parentId": null
|
||
}
|
||
];
|
||
|
||
var treeData = lay.flatToTree(data); // 平铺数据转树状
|
||
|
||
console.log('%c> lay.flatToTree: ', style);
|
||
console.log('平转树后：', JSON.stringify(treeData, null, 2));
|
||
|
||
treeData[0].children[0].title="333333"; // 修改数据
|
||
console.log('原始数据：', JSON.stringify(data, null, 2)); // 查看原始数据是否被修改
|
||
}
|
||
})
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|