lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-10-26 18:59:15 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(tree): 升级了tree

Browse Source
This commit is contained in:
smallwei
2018-07-15 21:53:25 +08:00
parent 8eb69f05dc 72253f671e
commit 546177d805
43 changed files with 673 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
examples/form.html
View File

@@ -108,6 +108,14 @@ body{padding: 10px;}
<option value="音乐">音乐</option>
<option value="旅行">旅行</option>
<option value="读书">读书</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
@@ -190,6 +198,10 @@ layui.use('form', function(){
}
}
,pass: [/(.+){6,12}$/, '密码必须6到12位']
,money: [
/^\d+\.\b\d{2}\b$/
,'金额必须为小数保留两位'
]
});
//初始赋值
@@ -256,6 +268,27 @@ layui.use('form', function(){
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号" selected>你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
<option value="你的工号">你的工号</option>
</select>
<button>Go</button>
</form>

4
examples/table.html
View File

@@ -15,8 +15,6 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</head>
<body>
<table id="test2" lay-filter="test2"></table>
<div class="layui-btn-group">
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
@@ -46,6 +44,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
</script>
<table id="test2" lay-filter="test2"></table>
<table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
<thead>
@@ -180,6 +179,7 @@ layui.use('table', function(){
elem: '#test'
,height: 350
,url: 'json/table/demo1.json'
//,size: 'sm'
,page: {
}

294
examples/tree.html
View File

@@ -1,147 +1,177 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 50px 100px;}
</style>
<style>
body {
padding: 50px 100px;
}
</style>
</head>
<body>
<ul id="demo"></ul>
<ul id="demo"></ul>
<ul id="demo1" style="margin-top: 50px;"></ul>
<ul id="demo1" style="margin-top: 50px;"></ul>
<script src="../src/layui.js"></script>
<script>
layui.use('tree', function(){
var tree = layui.tree({
elem: '#demo' //指定元素
//,check: 'checkbox' //勾选风格
,skin: 'as' //设定皮肤
//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
,drag: true
,click: function(item){ //点击节点回调
console.log(item)
}
,nodes: [ //节点
{
name: '常用文件夹'
,id: 1
,alias: 'changyong'
,children: [
{
name: '所有未读'
,id: 11
//,href: 'http://www.layui.com/'
,alias: 'weidu'
}, {
name: '置顶邮件'
,id: 12
}, {
name: '标签邮件'
,id: 13
}
]
}, {
name: '我的邮箱'
,id: 2
,spread: true
,children: [
{
name: 'QQ邮箱'
,id: 21
,spread: true
,children: [
{
name: '收件箱'
,id: 211
,children: [
{
name: '所有未读'
,id: 2111
}, {
name: '置顶邮件'
,id: 2112
}, {
name: '标签邮件'
,id: 2113
}
<script src="../src/layui.js"></script>
<script>
layui.use('tree', function() {
var tree = layui.tree({
elem: '#demo' //指定元素
,
check: 'checkbox' //勾选风格
,
skin: 'as' //设定皮肤
//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
,
drag: true,
change:function(val){
console.group('change event')
console.log('Array')
console.log(val);
console.groupEnd()
},
click: function(item) { //点击节点回调
console.group('click event')
console.log('Object')
console.log(item);
console.groupEnd()
},
addClick:function(item,elem,add){
console.group('append event')
console.log('Object')
console.log(item);
console.log('dom')
console.log(elem);
console.log('dom add event')
var item ={
name: '测试节点',
id:-1
}
add(item)
console.groupEnd()
},
deleteClick:function(item,elem,done){
console.group('delete event')
console.log('Object')
console.log(item);
console.log('dom')
console.log(elem);
console.log('dom delete event')
done();
console.groupEnd()
},
nodes: [ //节点
{
name: '常用文件夹',
id: 1,
alias: 'changyong',
children: [{
name: '所有未读',
id: 11
//,href: 'http://www.layui.com/'
,
alias: 'weidu'
}, {
name: '置顶邮件',
id: 12
}, {
name: '标签邮件',
id: 13
}]
}, {
name: '我的邮箱',
id: 2,
spread: true,
children: [{
name: 'QQ邮箱',
id: 21,
spread: true,
children: [{
name: '收件箱',
id: 211,
children: [{
name: '所有未读',
id: 2111
}, {
name: '置顶邮件',
id: 2112
}, {
name: '标签邮件',
id: 2113
}]
}, {
name: '已发出的邮件',
id: 212
}, {
name: '垃圾邮件',
id: 213
}]
}, {
name: '阿里云邮',
id: 22,
children: [{
name: '收件箱',
id: 221
}, {
name: '已发出的邮件',
id: 222
}, {
name: '垃圾邮件',
id: 223
}]
}]
}
]
}, {
name: '已发出的邮件'
,id: 212
}, {
name: '垃圾邮件'
,id: 213
}
]
}, {
name: '阿里云邮'
,id: 22
,children: [
{
name: '收件箱'
,id: 221
}, {
name: '已发出的邮件'
,id: 222
}, {
name: '垃圾邮件'
,id: 223
}
]
}
]
}
]
});
//生成一个模拟树
var createTree = function(node, start){
node = node || function(){
var arr = [];
for(var i = 1; i < 10; i++){
arr.push({
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
});
//生成一个模拟树
var createTree = function(node, start) {
node = node || function() {
var arr = [];
for (var i = 1; i < 10; i++) {
arr.push({
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
});
}
return arr;
}();
start = start || 1;
layui.each(node, function(index, item) {
if (start < 10 && index < 9) {
var child = [{
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
}];
node[index].children = child;
createTree(child, index + start + 1);
}
});
return node;
};
layui.tree({
elem: '#demo1' //指定元素
,
nodes: createTree()
});
});
}
return arr;
}();
start = start || 1;
layui.each(node, function(index, item){
if(start < 10 && index < 9){
var child = [
{
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
}
];
node[index].children = child;
createTree(child, index + start + 1);
}
});
return node;
};
</script>
layui.tree({
elem: '#demo1' //指定元素
,nodes: createTree()
});
});
</script>
<pre class="layui-code">
# layui.tree-v2 备忘
* check参数 - checkbox、radio的支持
* 拖拽的支持
</pre>
<!--<pre class="layui-code">
# layui.tree-v2 备忘
* check参数 - checkbox、radio的支持
* 拖拽的支持
</pre>-->
</body>
</html>
</html>

25
examples/upload.html
View File

@@ -93,6 +93,15 @@ layui.use('upload', function(){
,accept: 'file'
,fileAccept: 'image/*'
,exts: "jpg|png|gif|bmp|jpeg|pdf"
,data: { //额外参数
a: 1
,b: function(){
return 2
}
}
,choose: function(){
console.log(1)
}
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
@@ -248,14 +257,24 @@ layui.use('upload', function(){
});
//手动上传
upload.render({
elem: '#test6'
,url: ''
,auto: false
//,multiple: true
,bindAction: '#test7'
,choose: function(obj){
var that = this;
obj.preview(function(index, file){
obj.resetFile(index, file, '123.jpg');
});
}
,before: function(){
console.log(345);
}
,done: function(res){
console.log(res)
console.log(res);
}
});
@@ -263,7 +282,7 @@ layui.use('upload', function(){
elem: '#test8'
,url: ''
,done: function(res){
console.log(res)
console.log(res);
}
});
@@ -271,7 +290,7 @@ layui.use('upload', function(){
elem: '#test9'
,url: ''
,done: function(res){
console.log(res)
console.log(res);
}
});