theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

发版

Browse Source
This commit is contained in:
贤心
2019-06-06 12:19:43 +08:00
parent 77e0477262
commit efb8652661
37 changed files with 376 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/table.html
View File

@@ -177,7 +177,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
</table>
</div>
<script src="../src/layui.js" charset="utf-8"></script>
<script src="../src/layui.js" src="//layui.hcwl520.com.cn/layui-v2.4.5/layui.js" charset="utf-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
@@ -187,6 +187,7 @@ layui.use('table', function(){
window.ins1 = table.render({
elem: '#test'
,height: 400
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'

22
examples/transfer.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 100px;}
#text1,#text2{padding-top: 60px;}
#text1,#text2{padding-bottom: 60px;}
</style>
</head>
<body>
@@ -17,10 +17,19 @@
<button type="button" class="layui-btn" lay-demo="getData">获取右侧数据</button>
<button type="button" class="layui-btn" lay-demo="reload">重载实例</button>
</div>
<div id="text1"></div>
<div id="text2"></div>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">职位</label>
<div class="layui-input-block">
<div id="text2"></div>
</div>
</div>
</div>
<div id="text3"></div>
@@ -43,6 +52,7 @@
,{"value": "5", "title": "巴金"}
,{"value": "6", "title": "冰心"}
]
,id: 'demoId'
,value: ["2", "3"]
,showSearch: true
});
@@ -52,10 +62,16 @@
getData: function(othis){
alert(JSON.stringify(ins1.getData()))
}
,reload: function(){
transfer.reload('demoId', {
value: ["6"]
});
}
});
var ins2 = transfer.render({
elem: '#text2'
,showSearch: true
,onchange: function(obj){
console.log(obj)
}

125
examples/tree.html
View File

@@ -14,149 +14,167 @@
<link rel="stylesheet" href="../src/css/layui.css" media="all">
<style>
body{padding: 150px;}
body{padding: 100px;}
#test1,#test2{margin-bottom: 100px; width: 400px;}
</style>
</head>
<body>
<div class="layui-btn-container">
<button type="button" class="layui-btn" lay-demo="getChecked">获取选中数据</button>
<button type="button" class="layui-btn" lay-demo="setChecked">设置节点勾选</button>
<button type="button" class="layui-btn" lay-demo="reload">重载实例</button>
</div>
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">表单内</label>
<div class="layui-input-block">
</div>
</div>
<div id="test1"></div>
<div id="test2"></div>
<script src="../src/layui.js"></script>
<script>
layui.use(['tree', 'layer'], function(){
var tree = layui.tree
,$ = layui.$
layui.use(['tree', 'layer', 'util'], function(){
var $ = layui.$
,tree = layui.tree
,layer = layui.layer
,util = layui.util
,index = 100;
//数据源
var data1 = [{
label: '一级1'
title: '一级1'
,id: 1
,children: [{
label: '二级1-1'
title: '二级1-1'
,id: 3
,href: 'https://www.layui.com/doc/'
,children: [{
label: '三级1-1-3'
title: '三级1-1-3'
,id: 23
,children: [{
label: '四级1-1-3-1'
title: '四级1-1-3-1'
,id: 24
,children: [{
label: '五级1-1-3-1-1'
title: '五级1-1-3-1-1'
,id: 30
},{
label: '五级1-1-3-1-2'
title: '五级1-1-3-1-2'
,id: 31
}]
}]
},{
label: '三级1-1-1'
title: '三级1-1-1'
,id: 7
,checked: true
,children: [{
label: '四级1-1-1-1'
title: '四级1-1-1-1'
,id: 15
,href: 'https://www.layui.com/doc/base/infrastructure.html'
}]
},{
label: '三级1-1-2'
title: '三级1-1-2'
,id: 8
,children: [{
label: '四级1-1-2-1'
title: '四级1-1-2-1'
,id: 32
}]
}]
},{
label: '二级1-2'
title: '二级1-2'
,id: 4
,spread: true
,children: [{
label: '三级1-2-1'
title: '三级1-2-1'
,id: 9
,checked: true
,disabled: true
},{
label: '三级1-2-2'
title: '三级1-2-2'
,id: 10
}]
},{
label: '二级1-3'
title: '二级1-3'
,id: 20
,children: [{
label: '三级1-3-1'
title: '三级1-3-1'
,id: 21
},{
label: '三级1-3-2'
title: '三级1-3-2'
,id: 22
}]
}]
},{
label: '一级2'
title: '一级2'
,id: 2
,spread: true
,children: [{
label: '二级2-1'
title: '二级2-1'
,id: 5
,spread: true
,children: [{
label: '三级2-1-1'
title: '三级2-1-1'
,id: 11
},{
label: '三级2-1-2'
title: '三级2-1-2'
,id: 12
}]
},{
label: '二级2-2'
title: '二级2-2'
,id: 6
,checked: true
,children: [{
label: '三级2-2-1'
title: '三级2-2-1'
,id: 13
},{
label: '三级2-2-2'
title: '三级2-2-2'
,id: 14
,disabled: true
}]
}]
},{
label: '一级3'
title: '一级3'
,id: 16
,children: [{
label: '二级3-1'
title: '二级3-1'
,id: 17
,fixed: true
,children: [{
label: '三级3-1-1'
title: '三级3-1-1'
,id: 18
},{
label: '三级3-1-2'
title: '三级3-1-2'
,id: 19
}]
},{
label: '二级3-2'
title: '二级3-2'
,id: 27
,children: [{
label: '三级3-2-1'
title: '三级3-2-1'
,id: 28
},{
label: '三级3-2-2'
title: '三级3-2-2'
,id: 29
}]
}]
}];
var tree1 = tree.render({
tree.render({
elem: '#test1'
,data: data1
,id: 'demoId1'
,click: function(obj){
layer.msg(JSON.stringify(obj.data));
console.log(obj);
}
,oncheck: function(obj){
console.log(obj);
}
,onsearch:function(obj){
console.log(obj);
}
,operate: function(obj){
var type = obj.type;
if(type == 'add'){
@@ -168,27 +186,30 @@
console.log(obj);
};
}
,dragend: function(state, obj, target){
console.log(state, obj, target);
}
,showCheckbox: true //是否显示复选框
,key: 'id' //自定义唯一标识的字段名
,checked: [6, 7, 9] //选中节点(依赖于 showCheckbox 以及 key 参数)
,spread: [2, 4, 5] //展开节点(依赖于 key 参数)
,accordion: 0 //是否开启手风琴模式
,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
,isJump: 0 //点击文案跳转地址
,edit: true //操作节点图标
//,defaultNodeName: 'newNode'
//,showSearch: true //是否打开节点过滤
//,drag: true //是否开启节点拖拽
});
console.log(tree1.getChecked()); //返回当前勾选节点
//tree1.setChecked([2, 3]); //设置节点勾选
//按钮事件
util.event('lay-demo', {
getChecked: function(othis){
var checkedData = tree.getChecked('demoId1');
layer.alert(JSON.stringify(checkedData), {shade:0});
console.log(checkedData);
}
,setChecked: function(){
tree.setChecked('demoId1', [12, 16]);
}
,reload: function(){
tree.reload('demoId1', {
});
}
});
tree.render({