本笔记只记比较难的
选项卡
- 常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果
lay-filter=“demo” 是用于事件标记，可用于标记
表单对象及相关事件
lay-verify=“type” layui内部进行验证
- 监听提交事件
form.on('submit(demo1)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
})
这个demo1 是提交按钮的lay-verify的值 标识适配这个按钮
即不是所有的提交按钮
如果想用异步提交，需要用ajax提交数据
$.ajax()
$.post()
- 监听下拉框表单事件
//监听下拉框改变事件
form.on('select(aihao)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
- 监听复选框的选中事件
form.on('checkbox(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
注意：每个复选框都必须要加 lay-filter
-
元素渲染
//向select里面添加一个打球 $("#btn1").click(function() { //得到select对象 var aihao= $("#yyy"); alert(aihao.html()); aihao.append("<option value='打球'>打球</option>"); alert(aihao.html()); form.render();//渲染所有 form.render("select");//渲染下拉框 })
//给整个表单加个初始值
//1. 需要给form表单整个加个lay-filter
//2. 进行传值
$("#btn2").click(function(){
form.val("dataFilter",{
num:"塔吉克",
phone:"11111111111",
email:"415268163@qq.com",
number:"怕是个啥子",
password:"zzzzzzz",
interest:"1",
open:true
});
var hobby="读书,游戏";//数据库中的数据
var hobbys=hobby.split(",");//分割开
//得到页面上的dome对象
hobbyElem=$("[name='likewrite']");
$.each(hobbys,function (i,str) {
$.each(hobbyElem,function (j,item) {
var jdom=$(item);//把dom转成jdom
if(jdom.val()==str){
jdom.attr("checked","checked");
}
})
})
form.render();//重新进行渲染
- 扩展自定义验证规则
这种num是 表单上的lay-verify=”num“ 中的值
//自定验证规则
form.verify({
num: [
/^[\S]{6,12}$/,'去你妈的'
]
});
弹出层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<legend>弹出层</legend>
<button type="button" class="layui-btn" id="btn1"> alert</button>
<button type="button" class="layui-btn" id="btn2"> confirm</button>
<button type="button" class="layui-btn" id="btn3"> prompt</button>
<button type="button" class="layui-btn" id="btn4"> tab</button>
<button type="button" class="layui-btn" id="btn5"> photos</button>
<button type="button" class="layui-btn" id="btn6"> msg</button>
<button type="button" class="layui-btn" id="btn7"> tips</button>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(["element","jquery",'form',"layer"],function () {
var $ = layui.jquery;
var element = layui.element;
var form = layui.form;
var layer=layui.layer;
//监听btn1 alert
$("#btn1").click(function () {
/* layer.alert("小声逼逼");
layer.alert("加了个图标",{icon:1});*/
layer.alert('有了回调 ',function (index) {//调用后 返回的是它的索引 关闭只能根据索引进行关闭
alert("ok");
layer.close(index);
})
})
//监听btn2 confirm
$("#btn2").click(function () {
layer.confirm("弹出了个框啊",{icon:1,title:"提示"},function (index) {
alert("ok");
layer.close(index);
})
})
//监听btn3
$("#btn3").click(function () {
/* layer.prompt(function (value,index,elem) {
})*/
layer.prompt({
value:3,
title:"忽忽",
formType:2,
area:["800px","350px"]
},function () {
alert("交接完毕")
})
})
//监听btn4
$("#btn4").click(function () {
layer.tab({
area:["400px","500px"],
tab:[{title:"第一个",content:"内容1"},{title:"第er个",content:"内容2"},{title:"第san个",content:"内容3"}],
})
})
//监听btn5
$("#btn5").click(function () {
$.get("/Practice/resource/image.json",function (json) {
layer.photos({
photos:json,
anim:4//图片切换的风格
})
})
})
//监听 btn6 msg
$("#btn6").click(function () {
layer.msg("提示是见过的",{icon:6});
})
//监听 btn7 tips
$("#btn7").focus(function () {
// layer.alert("yyy");
layer.tips("点我干啥",'#btn7')
})
});
</script>
</body>
</html>
弹出层2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<legend>弹出层</legend>
<button type="button" class="layui-btn" id="btn1"> layer.open.type=0</button>
<button type="button" class="layui-btn" id="btn2"> layer.open.type=1</button>
<button type="button" class="layui-btn" id="btn3"> layer.open.type=2</button>
<button type="button" class="layui-btn" id="btn4"> layer.open.type=3</button>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(["element","jquery",'form',"layer"],function () {
var $ = layui.jquery;
var element = layui.element;
var form = layui.form;
var layer=layui.layer;
//监听btn1 alert
$("#btn1").click(function () {
layer.open({
title:"提示",
content:"你好我是1",
type:1,
skin:"layui-layer-molv",//皮肤
offset:"t",//位置在哪
area:["500px","600px"],//大小
icon:1,//这里只对type=0 有效
btn:["按钮1","按钮2","按钮3"],
yes:function (index,layer) {
alert("按钮1");
return false;//开启后禁止点击该按钮弹框关闭
},
btn1:function (index,layer) {
alert("按钮2");
return false;//开启后禁止点击该按钮弹框关闭
},
btn2:function (index,layer) {
alert("按钮3");
return false;//开启后禁止点击该按钮弹框关闭
},
btn3:function (index,layer) {
alert("按钮4");
return false;//开启后禁止点击该按钮弹框关闭
},
cancel:function () {
return true;//开启后禁止点击该按钮弹框关闭
},
btnAlign:"c",//按钮的对齐方式
closeBtn:2,//关闭的样式 1 2 两种
shade:[0.8,"#393D49"],//遮罩层
shadeClose:true,//点击遮罩层是否关闭
anim:5,//设置动画
maxmin:true,//是否显示做大话或最小化的按钮 type=1 /2 有效
success:function (layero,index) {
alert(index);
}
});
})
//监听btn2 confirm
$("#btn2").click(function () {
})
//监听btn3
$("#btn3").click(function () {
})
});
</script>
</body>
</html>
| field: | 和数据接口里面的data[{“id”:1}]的key映射 |
| title: | 表头的内容 |
| width: | 宽度 |
| hide: | true 是否隐藏 |
| sort: | true 是否开启列排序 |
| edit: | true 是否支持编辑 |
| align: | ‘center’ 内容对齐方式 left center right |
| totalRowText: | “合计” 合计行的文本 前提是表格开启合并行 |
| totalRow: | true 是否合计前提是表格开启合并行 |
| toolbar: | ‘#userBar’ 引入行的工具栏 |
templet:function(d){
return d.sex=='男'?'汉子':'妹子';
}}
- layer.tupe=1:
页面层 把页面上的某一段HTML代码放在弹出层里面
此时的content属性可以使用html代码
也可以使用页面的选择器 - layer.type=2：
是一个ifream层
此时的content就是一个页面的url
数据表格
- 基本使用
- 准备json
{
"code": 0
,"msg": ""
,"count": 3000000
,"data": [{
"id": "10001"
,"username": "杜甫"
,"email": "xianxin@layui.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。"
,"experience": "116"
,"ip": "192.168.0.8"
,"logins": "108"
,"joinTime": "2016-10-14"
}, {
"id": "10002"
,"username": "李白"
,"email": "xianxin@layui.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
,"experience": "12"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
,"LAY_CHECKED": true
}, {
"id": "10003"
,"username": "王勃"
,"email": "xianxin@layui.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "65"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10004"
,"username": "李清照"
,"email": "xianxin@layui.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "666"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10005"
,"username": "冰心"
,"email": "xianxin@layui.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "86"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10006"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "12"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10007"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "16"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10008"
,"username": "贤心"
,"email": "xianxin@layui.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"experience": "106"
,"ip": "192.168.0.8"
,"logins": "106"
,"joinTime": "2016-10-14"
}]
}
2.编写代码
a. 可以使用html实现
b.可以通过js进行实现
加上表头的工具条
toolbar: 如果是true 则表示开启工具条但是不加任何按钮
- 相关事件
1.监听头部工具栏事件
// 1.监听头部工具栏事件//属于点击事件
table.on('toolbar(userTable)', function(obj){
//var checkStatus = table.checkStatus(obj.config.id);
// alert(checkStatus);
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'alldelete':
layer.msg('删除');
break;
};
});
2.监听复选框事件
3.监听单元格编辑事件
table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
单击事件和双击事件只能选择一个使用
4.监听行单机事件
table.on('row(userTable)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
obj.del(); //删除当前行
});
5.监听行双击事件
table.on('rowDouble(userTable)', function(obj){
//obj 同上
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
obj.del(); //删除当前行
});
6.监听工具条
7.表格重载
- 第一种
- 第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="mydiv1">
<legend>数据表格</legend>
<table class="layui-hide" id="userTab" lay-filter="userTable">
</table>
<div id="mydiv" style="display: none" >
<button type="button" class="layui-btn layui-btn-warm" lay-event="add">添加</button>
<button type="button" class="layui-btn layui-btn-danger"lay-event="alldelete">批量删除</button>
<button type="button" class="layui-btn layui-btn-danger"lay-event="getSelect">得到选中行</button>
<button type="button" class="layui-btn layui-btn-danger"lay-event="reloadTable">刷新数据表格</button>
</div>
<div id="userBar" style="display: none;">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
</div>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'form',"layer",'table'],function () {
var $ = layui.jquery;
var element = layui.element;
var form = layui.form;
var layer=layui.layer;
var table=layui.table;
//渲染表格
var tabRender= table.render({
elem: '#userTab'//渲染目标对象
,url:'http://localhost:63342/Practice/resource/my.json'//数据接口
,title: '用户数据表'//数据导出的标题
,page: true//是否启用分页
,toolbar:"#mydiv"//表头的按钮
,totalRow:true//开启合并行
,limit:20
,limits:[20,30,40,50]
,cols: [[//列表数据
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text'}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100 }
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#userBar', width:150}
]]
,done:function (res,curr,count) {
/* alert("res:"+res);//后台返回的json字符串
alert("curr:"+curr);//当前页
alert("count:"+count);//数据总条数*/
}
});
// 1.监听头部工具栏事件//属于点击事件
table.on('toolbar(userTable)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
alert(checkStatus);
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'alldelete':
layer.msg('删除');
break;
case "getSelect":
console.log(checkStatus.data); //获取选中行的数据
console.log(checkStatus.data.length) ;//获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) ;//表格是否全选
break;
case "reloadTable":
tabRender.reload({url:'http://localhost:63342/Practice/resource/my1.json'});
break;
};
});
// 2.监听复选框事件
table.on('checkbox(userTable)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
// 3.监听单元格编辑事件
table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
});
//4.监听行单机事件
/* table.on('row(userTable)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
obj.del(); //删除当前行
});*/
//5.监听行双击事件
table.on('rowDouble(userTable)', function(obj){
//obj 同上
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
obj.del(); //删除当前行
});
//6.监听工具栏
table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent == 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent == 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
}
});
});
</script>
</body>
</html>
- 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据表格综合案例</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="mydiv1">
<legend>综合案例</legend>
<!--编辑框-->
<div style="display: none" id="editShow">
<form action="" class="layui-form" lay-filter="dataFrm" id="dataFrm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">编号：</label>
<div class="layui-input-inline">
<input type="text" name="id" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-inline">
<input type="text" name="username" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">邮箱：</label>
<div class="layui-input-inline">
<input type="text" name="email" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">城市：</label>
<div class="layui-input-inline">
<input type="text" name="city" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别：</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="1" title="男">
<input type="radio" name="sex" value="0" title="女">
</div>
</div>
</div>
<div class="layui-input-block">
<button type="button" class="layui-btn " id="doSubmit" lay-submit="" lay-filter="dosubmit"><span class="layui-icon layui-icon-search" ></span>提交</button>
<button type="reset" class="layui-btn layui-btn-normal"><span class="layui-icon layui-icon-refresh"></span> 重置</button>
</div>
</form>
</div>
<!--搜索条件开始-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>搜索条件</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">编号：</label>
<div class="layui-input-inline">
<input type="text" name="id" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-inline">
<input type="text" name="username" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱：</label>
<div class="layui-input-inline">
<input type="text" name="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!--第二行-->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间：</label>
<div class="layui-input-inline">
<input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间：</label>
<div class="layui-input-inline">
<input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别：</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="1" title="男">
<input type="radio" name="sex" value="0" title="女">
</div>
</div>
</div>
<!--第三行-->
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn " id="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
<button type="reset" class="layui-btn layui-btn-normal"><span class="layui-icon layui-icon-refresh"></span> 重置</button>
</div>
</div>
</form>
<!--搜索条件结束-->
<table class="layui-hide" id="userTab" lay-filter="userTable">
</table>
<!--数据表格开始-->
<div id="mydiv" style="display: none" >
<button type="button" class="layui-btn layui-btn-warm" lay-event="add" >添加</button>
<button type="button" class="layui-btn layui-btn-danger"lay-event="alldelete">批量删除</button>
</div>
<div id="userBar" style="display: none;">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
</div>
<!--数据表格结束-->
<!--添加和修改的弹出层开始-->
<!--添加和修改的弹出层结束-->
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'form',"layer",'table','laydate'],function () {
var $ = layui.jquery;
var element = layui.element;
var form = layui.form;
var layer=layui.layer;
var table=layui.table;
//时间选择器
var laydate=layui.laydate;
//绑定并初始化
laydate.render({
elem:"#startTime"
});
laydate.render({
elem:"#endTime"
});
//渲染表格
var tabRender= table.render({
elem: '#userTab'//渲染目标对象
,url:'http://localhost:63342/Practice/resource/my.json'//数据接口
,title: '用户数据表'//数据导出的标题
,page: true//是否启用分页
,toolbar:"#mydiv"//表头的按钮
,totalRow:true//开启合并行
,limit:20
,limits:[20,30,40,50]
,cols: [[//列表数据
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名'}
,{field:'email', title:'邮箱', templet: function(res){
return '<em>'+ res.email +'</em>'
}}
,{field:'sex', title:'性别',align:'center',templet:function (d) {
return d.sex=='1'?'男':'女';
}}
,{field:'city', title:'城市'}
,{fixed: 'right', title:'操作', toolbar: '#userBar'}
]]
,done:function (res,curr,count) {
/* alert("res:"+res);//后台返回的json字符串
alert("curr:"+curr);//当前页
alert("count:"+count);//数据总条数*/
}
});
// 1.监听头部工具栏事件//属于点击事件
table.on('toolbar(userTable)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
// alert(checkStatus);
switch(obj.event){
case 'add':
openAddUser();
break;
case 'alldelete':
layer.msg('批量删除');
break;
};
});
//打开添加框
function openAddUser() {
layer.open({
type:1,
title:"添加用户",
content:$("#editShow"),
area:["800px","600px"],
success:function (index) {
$("#dataFrm")[0].reset();//清空里面的数据
}
})
}
//6.监听工具栏
table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent == 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent == 'edit'){ //编辑
//do something
//同步更新缓存对应的值
/* obj.update({
username: '123'
,title: 'xxx'
});*/
openeditShow(data);
}
});
function openeditShow(data) {
layer.open({
type:1,
title:"修改界面",
content:$("#editShow"),
area:["800px",'600px'],
success:function (index) {
form.val("dataFrm",data);
//url="user/updateYser.action";
}
})
};
//保存
form.on("submit(dosubmit)",function (obj) {
alert("ok");
var params=$("#dataFrm").serialize();
alert(params);
$.post("bd.html",params,function () {
layer.msg("成功");
})
})
});
</script>
</body>
</html>
文件上传
var upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: 'https://httpbin.org/post' //改成您自己的上传接口
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
树形组件Dtree
- 基本使用
1.下载
点击进入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形组件的使用</title>
<link rel="stylesheet" href="resource/layui/css/layui.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<legend>树形组件的使用</legend>
<div style="height: 350px;overflow: auto;" id="toolbarDiv">
<ul id="demoTree" class="dtree" data-id="0"></ul>
</div>
<script src="resource/layui/layui.js"></script>
<script src="resource/layui_ext/dist/dtree.js"></script>
<script type="text/javascript">
layui.extend({
dtree:'resource/layui_ext/dist/dtree'
}).use(["jquery",'form',"layer","dtree"],function () {
var $ = layui.jquery;
var form = layui.form;
var layer=layui.layer;
var dtree = layui.dtree;// 树形结构的初始化
//渲染
dtree.render({
elem: "#demoTree",
url: "resource/layui_ext/json/asyncTree1.json" //json的路径
});
});
</script>
</body>
</html>
- 数据类型
-
标准数据格式
与基本使用的里面是一样的，节点与节点之间有层级关系，通过chuldren来确定关系
-
layui风格数据格式（dataStyle）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形组件的使用</title>
<link rel="stylesheet" href="resource/layui/css/layui.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<legend>树形组件的使用</legend>
<div style="height: 350px;overflow: auto;" id="toolbarDiv">
<ul id="demoTree" class="dtree" data-id="0"></ul>
</div>
<script src="resource/layui/layui.js"></script>
<script src="resource/layui_ext/dist/dtree.js"></script>
<script type="text/javascript">
layui.extend({
dtree:'resource/layui_ext/dist/dtree'
}).use(["jquery",'form',"layer","dtree"],function () {
var $ = layui.jquery;
var form = layui.form;
var layer=layui.layer;
var dtree = layui.dtree;// 树形结构的初始化
//时间选择器
dtree.render({
elem: "#demoTree",
dataStyle:"layuiStyle",
url: "resource/layui_ext/json/dataTree.json" //json的路径
response:{message:"msg",statusCode:0} //修改response中返回数据的定义
});
});
</script>
</body>
</html>
- list集合数据格式（dataFormart）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形组件的使用</title>
<link rel="stylesheet" href="resource/layui/css/layui.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<legend>树形组件的使用</legend>
<div style="height: 350px;overflow: auto;" id="toolbarDiv">
<ul id="demoTree" class="dtree" data-id="0"></ul>
</div>
<script src="resource/layui/layui.js"></script>
<script src="resource/layui_ext/dist/dtree.js"></script>
<script type="text/javascript">
layui.extend({
dtree:'resource/layui_ext/dist/dtree'
}).use(["jquery",'form',"layer","dtree"],function () {
var $ = layui.jquery;
var form = layui.form;
var layer=layui.layer;
var dtree = layui.dtree;// 树形结构的初始化
//时间选择器
dtree.render({
elem: "#demoTree",
url: "resource/layui_ext/json/dataTree1.json", //json的路径
dataFormat: "list", //配置data的风格为list
});
});
</script>
</body>
</html>
- layui+list集合数据格式（dataStyle+dataFormat）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形组件的使用</title>
<link rel="stylesheet" href="resource/layui/css/layui.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<legend>树形组件的使用</legend>
<div style="height: 350px;overflow: auto;" id="toolbarDiv">
<ul id="demoTree" class="dtree" data-id="0"></ul>
</div>
<script src="resource/layui/layui.js"></script>
<script src="resource/layui_ext/dist/dtree.js"></script>
<script type="text/javascript">
layui.extend({
dtree:'resource/layui_ext/dist/dtree'
}).use(["jquery",'form',"layer","dtree"],function () {
var $ = layui.jquery;
var form = layui.form;
var layer=layui.layer;
var dtree = layui.dtree;// 树形结构的初始化
//时间选择器
dtree.render({
elem: "#demoTree",
url: "resource/layui_ext/json/dataTree2.json", //json的路径
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
});
});
</script>
</body>
</html>
- 事件监听
- 图标点击
//图标点击
dtree.on("changeTree('demoTree')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.show); // 节点展开为true，关闭为false
});
- 节点点击
//节点点击
dtree.on("node('demoTree')" ,function(obj){
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
- 节点双击
//节点双击事件
dtree.on("nodedblclick('demoTree')" ,function(obj){
layer.alert(JSON.stringify(obj.param),{
title:"最终提交的信息",
});
console.log(obj.param); // 点击当前节点传递的参数
console.log(obj.dom); // 当前节点的jquery对象
console.log(obj.childParams); // 当前节点的所有子节点参数
console.log(obj.parentParam); // 当前节点的父节点参数
});
- 复选框点击
- 多选树的处理
{
"code":0,
"msg":"操作成功",
"data":[
{"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]},
{"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]},
{"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "1"}]},
{"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "2"}]},
{"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]},
{"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]}
]
}
{
"code":0,
"msg":"操作成功",
"data":[
{"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
{"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}
]
}
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dtree</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<link rel="stylesheet" href="resources/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
<button type="button" class="layui-btn" id="btn1">选中武汉市</button>
<button type="button" class="layui-btn" id="btn2">得到选中值</button>
<ul id="demoTree" class="dtree" data-id="0"></ul>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.extend({
dtree:'resources/layui_ext/dist/dtree'
}).use([ 'jquery', 'layer', 'form','dtree' ], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var dtree=layui.dtree;
// 初始化树
var DemoTree = dtree.render({
elem: "#demoTree",
dataStyle: "layuiStyle", //使用layui风格的数据格式
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
dataFormat: "list", //配置data的风格为list
checkbar: true,
checkbarType: "all", // 默认就是all，其他的值为： no-all p-casc self only\
checkbarData: "choose" ,
url: "resources/layui_ext/json/case/asyncTreeCheckBox2.json" // 使用url加载（可与data加载同时存在）
});
//选中武汉
$("#btn1").click(function(){
var params = dtree.dataInit("demoTree", "002001");
});
$("#btn2").click(function(){
var param = dtree.getNowParam(DemoTree);
layer.alert(JSON.stringify(param), {
title: '最终的提交信息'
})
});
});
</script>
</body>
</html>
- 初始化选中
//初始化选中
$("#btn1").click(function () {
var params=dtree.dataInit("demoTree",'001001');
});
//得到选中值
$("#btn2").click(function () {
var param=dtree.getNowParam("demoTree");
layer.alert(JSON.stringify(param),{
title:"最终结果"
})
})
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
