develop
Jmysy
parent
34c3ce5a15
commit
c99783f6f2
|
|
@ -19,7 +19,9 @@
|
||||||
.layui-table-tool .layui-inline{border-radius: 3px!important;width: 30px!important;height: 30px!important;line-height: 20px!important;}
|
.layui-table-tool .layui-inline{border-radius: 3px!important;width: 30px!important;height: 30px!important;line-height: 20px!important;}
|
||||||
.layui-table-view .layui-table[lay-skin=line]{border: none!important;}
|
.layui-table-view .layui-table[lay-skin=line]{border: none!important;}
|
||||||
|
|
||||||
|
.layui-elem-quote{
|
||||||
|
border-left: 5px solid #5FB878!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.pear-btn {
|
.pear-btn {
|
||||||
|
|
|
||||||
|
|
@ -57,6 +57,12 @@
|
||||||
animation: spin 1.5s linear infinite;
|
animation: spin 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.preloader .preloader-message {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,42 @@
|
||||||
"spread": true
|
"spread": true
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"title": "系统管理",
|
||||||
|
"icon": "layui-icon layui-icon-face-cry",
|
||||||
|
"type": 0,
|
||||||
|
"href": "",
|
||||||
|
"spread": true,
|
||||||
|
"children": [{
|
||||||
|
"id": 41,
|
||||||
|
"title": "用户管理",
|
||||||
|
"icon": "layui-icon layui-icon-username",
|
||||||
|
"type": 1,
|
||||||
|
"openType": "_iframe",
|
||||||
|
"href": "view/system/user.html",
|
||||||
|
"spread": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 42,
|
||||||
|
"title": "角色管理",
|
||||||
|
"icon": "layui-icon layui-icon-user",
|
||||||
|
"type": 1,
|
||||||
|
"openType": "_iframe",
|
||||||
|
"href": "view/system/role.html",
|
||||||
|
"spread": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 43,
|
||||||
|
"title": "权限管理",
|
||||||
|
"icon": "layui-icon layui-icon-user",
|
||||||
|
"type": 1,
|
||||||
|
"openType": "_iframe",
|
||||||
|
"href": "view/system/power.html",
|
||||||
|
"spread": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": 2,
|
"id": 2,
|
||||||
"title": "扩展组件",
|
"title": "扩展组件",
|
||||||
|
|
@ -151,74 +187,10 @@
|
||||||
"type": 0,
|
"type": 0,
|
||||||
"href": "",
|
"href": "",
|
||||||
"spread": true,
|
"spread": true,
|
||||||
"children": [{
|
"children": [
|
||||||
"id": 31,
|
|
||||||
"title": "数据统计",
|
|
||||||
"icon": "layui-icon layui-icon-face-smile",
|
|
||||||
"type": 0,
|
|
||||||
"openType": "_iframe",
|
|
||||||
"href": "view/error/403.html",
|
|
||||||
"spread": true,
|
|
||||||
"children": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 32,
|
|
||||||
"title": "数据表格",
|
|
||||||
"icon": "layui-icon layui-icon-face-cry",
|
|
||||||
"type": 0,
|
|
||||||
"openType": "_iframe",
|
|
||||||
"href": "view/error/404.html",
|
|
||||||
"spread": true,
|
|
||||||
"children": []
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
"id": 33,
|
|
||||||
"title": "卡片列表",
|
|
||||||
"icon": "layui-icon layui-icon-face-cry",
|
|
||||||
"type": 0,
|
|
||||||
"openType": "_iframe",
|
|
||||||
"href": "view/error/500.html",
|
|
||||||
"children": []
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 4,
|
|
||||||
"title": "系统管理",
|
|
||||||
"icon": "layui-icon layui-icon-face-cry",
|
|
||||||
"type": 0,
|
|
||||||
"href": "",
|
|
||||||
"spread": true,
|
|
||||||
"children": [{
|
|
||||||
"id": 41,
|
|
||||||
"title": "用户管理",
|
|
||||||
"icon": "layui-icon layui-icon-username",
|
|
||||||
"type": 1,
|
|
||||||
"openType": "_iframe",
|
|
||||||
"href": "view/system/user.html",
|
|
||||||
"spread": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 42,
|
|
||||||
"title": "角色管理",
|
|
||||||
"icon": "layui-icon layui-icon-user",
|
|
||||||
"type": 1,
|
|
||||||
"openType": "_iframe",
|
|
||||||
"href": "view/system/role.html",
|
|
||||||
"spread": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 43,
|
|
||||||
"title": "权限管理",
|
|
||||||
"icon": "layui-icon layui-icon-user",
|
|
||||||
"type": 1,
|
|
||||||
"openType": "_iframe",
|
|
||||||
"href": "view/system/power.html",
|
|
||||||
"spread": true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"id": "error",
|
"id": "error",
|
||||||
"title": "错误页面",
|
"title": "错误页面",
|
||||||
"icon": "layui-icon layui-icon-face-cry",
|
"icon": "layui-icon layui-icon-face-cry",
|
||||||
|
|
|
||||||
|
|
@ -195,11 +195,7 @@ layui.define(['jquery', 'element'], function (exports) {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
element.tabChange(elem,opt.id);
|
element.tabChange(elem,opt.id);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -73,6 +73,7 @@
|
||||||
<!-- 初始加载 动画-->
|
<!-- 初始加载 动画-->
|
||||||
<div class="preloader">
|
<div class="preloader">
|
||||||
<div class="preloader-inner"></div>
|
<div class="preloader-inner"></div>
|
||||||
|
<div class="preloader-message">系统初始化...</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="component/layui/layui.js"></script>
|
<script src="component/layui/layui.js"></script>
|
||||||
|
|
@ -87,7 +88,7 @@
|
||||||
* 框架初始化配置
|
* 框架初始化配置
|
||||||
* */
|
* */
|
||||||
var config = {
|
var config = {
|
||||||
keepLoad: false, // 主 页 加 载 过 度 时 长 可为 false
|
keepLoad: 1200, // 主 页 加 载 过 度 时 长 可为 false
|
||||||
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
|
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
|
||||||
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
|
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
|
||||||
theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
|
theme: "dark-theme", // 默 认 主 题 样 式 dark-theme 默认主题 light-theme 亮主题
|
||||||
|
|
|
||||||
|
|
@ -2,138 +2,224 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>数据表格</title>
|
<title></title>
|
||||||
<link href="../../../assets/css/pearone.css" rel="stylesheet" />
|
|
||||||
<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
|
<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
|
||||||
<link href="../../../component/font-awesome/css/font-awesome.css" rel="stylesheet" />
|
<link href="../../../admin/css/pearCommon.css" rel="stylesheet" />
|
||||||
<link href="../../../admin/css/pearButton.css" rel="stylesheet"/>
|
|
||||||
<link href="../../../admin/css/pearTable.css" rel="stylesheet"/>
|
|
||||||
<style>
|
|
||||||
body{
|
|
||||||
margin:10px;
|
|
||||||
background: whitesmoke;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="layui-card">
|
<body class="pear-container">
|
||||||
<div class="layui-card-header">数据表格封装</div>
|
<div class="layui-card">
|
||||||
<div class="layui-card-body">
|
<div class="layui-card-body">
|
||||||
|
<form class="layui-form" action="">
|
||||||
<table class="layui-hide" id="demo" lay-filter="test"></table>
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">用户名</label>
|
||||||
<script type="text/html" id="barDemo">
|
<div class="layui-input-inline">
|
||||||
<a class="pear-btn pear-btn-sm" lay-event="detail">查看</a>
|
<input type="text" name="realName" placeholder="" class="layui-input">
|
||||||
<a class="pear-btn pear-btn-primary pear-btn-sm" plain lay-event="edit">编辑</a>
|
</div>
|
||||||
<a class="pear-btn pear-btn-danger pear-btn-sm" plain lay-event="del">删除</a>
|
<label class="layui-form-label">账号</label>
|
||||||
</script>
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="username" placeholder="" class="layui-input">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
|
||||||
|
<i class="layui-icon layui-icon-search"></i>
|
||||||
|
查询
|
||||||
|
</button>
|
||||||
|
<button type="reset" class="pear-btn pear-btn-md">
|
||||||
|
<i class="layui-icon layui-icon-refresh"></i>
|
||||||
|
重置
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table id="user-table" lay-filter="user-table"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script type="text/html" id="user-toolbar">
|
||||||
|
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||||
|
<i class="layui-icon layui-icon-add-1"></i>
|
||||||
|
新增
|
||||||
|
</button>
|
||||||
|
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||||
|
<i class="layui-icon layui-icon-delete"></i>
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="user-bar">
|
||||||
|
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
|
||||||
|
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="user-enable">
|
||||||
|
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="user-sex">
|
||||||
|
{{#if (d.sex == 1) { }}
|
||||||
|
<span>男</span>
|
||||||
|
{{# }else if(d.sex == 2){ }}
|
||||||
|
<span>女</span>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="user-login">
|
||||||
|
{{#if (d.login == 0) { }}
|
||||||
|
<span>在线</span>
|
||||||
|
{{# }else if(d.sex == 1){ }}
|
||||||
|
<span>离线</span>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="user-createTime">
|
||||||
|
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script src="../../../component/layui/layui.js"></script>
|
<script src="../../../component/layui/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.config({
|
layui.use(['table','form','jquery'],function () {
|
||||||
version: '1575404972583' //为了更新 js 缓存，可忽略
|
let table = layui.table;
|
||||||
});
|
let form = layui.form;
|
||||||
|
let $ = layui.jquery;
|
||||||
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider','jquery'], function() {
|
|
||||||
var laydate = layui.laydate //日期
|
let MODULE_PATH = "/system/user/";
|
||||||
,laypage = layui.laypage //分页
|
|
||||||
,layer = layui.layer //弹层
|
let cols = [
|
||||||
,table = layui.table //表格
|
[
|
||||||
,carousel = layui.carousel //轮播
|
{type:'checkbox'},
|
||||||
,upload = layui.upload //上传
|
{title: '账号', field: 'username', align:'center', width:100},
|
||||||
,element = layui.element //元素操作
|
{title: '姓名', field: 'realName', align:'center'},
|
||||||
,slider = layui.slider //滑块
|
{title: '性别', field: 'sex', align:'center', width:80, templet:'#user-sex'},
|
||||||
,$ = layui.jquery //jquery
|
{title: '电话', field: 'phone', align:'center'},
|
||||||
|
{title: '启用', field: 'enable', align:'center', templet:'#user-enable'},
|
||||||
|
{title: '登录', field: 'login', align:'center', templet:'#user-login'},
|
||||||
//执行一个 table 实例
|
{title: '注册', field: 'createTime', align:'center',templet:'#user-createTime'},
|
||||||
table.render({
|
{title: '操作', toolbar: '#user-bar', align:'center', width:130}
|
||||||
elem: '#demo',
|
]
|
||||||
url: '../../../admin/data/table.json' //数据接口
|
]
|
||||||
,title: '用户表'
|
|
||||||
,page: true //开启分页
|
table.render({
|
||||||
,toolbar: "default" //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
elem: '#user-table',
|
||||||
,totalRow: false //开启合计行
|
url: '../../../admin/data/user.json',
|
||||||
,cols: [
|
page: true ,
|
||||||
[ //表头
|
cols: cols ,
|
||||||
{
|
skin: 'line',
|
||||||
type: 'checkbox',
|
toolbar: '#user-toolbar',
|
||||||
fixed: 'left'
|
defaultToolbar: [{
|
||||||
}, {
|
layEvent: 'refresh',
|
||||||
field: 'id',
|
icon: 'layui-icon-refresh',
|
||||||
title: 'ID',
|
}, 'filter', 'print', 'exports']
|
||||||
width: 80,
|
});
|
||||||
sort: true,
|
|
||||||
fixed: 'left',
|
table.on('tool(user-table)', function(obj){
|
||||||
totalRowText: '合计：'
|
if(obj.event === 'remove'){
|
||||||
}, {
|
window.remove(obj);
|
||||||
field: 'username',
|
} else if(obj.event === 'edit'){
|
||||||
title: '用户名'
|
window .edit(obj);
|
||||||
}, {
|
}
|
||||||
field: 'experience',
|
});
|
||||||
title: '积分'
|
|
||||||
}, {
|
table.on('toolbar(user-table)', function(obj){
|
||||||
fixed: 'right',
|
if(obj.event === 'add'){
|
||||||
width: 220,
|
window.add();
|
||||||
align: 'center',
|
} else if(obj.event === 'refresh'){
|
||||||
toolbar: '#barDemo'
|
window.refresh();
|
||||||
}
|
} else if(obj.event === 'batchRemove'){
|
||||||
]
|
window.batchRemove(obj);
|
||||||
]
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//监听头工具栏事件
|
form.on('submit(user-query)', function(data){
|
||||||
table.on('toolbar(test)', function(obj) {
|
table.reload('user-table',{where:data.field})
|
||||||
var checkStatus = table.checkStatus(obj.config.id),
|
return false;
|
||||||
data = checkStatus.data; //获取选中的数据
|
});
|
||||||
switch (obj.event) {
|
|
||||||
case 'add':
|
form.on('switch(user-enable)', function(obj){
|
||||||
layer.msg('添加');
|
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
|
||||||
break;
|
});
|
||||||
case 'update':
|
|
||||||
if (data.length === 0) {
|
window.add = function(){
|
||||||
layer.msg('请选择一行');
|
layer.open({
|
||||||
} else if (data.length > 1) {
|
type: 2,
|
||||||
layer.msg('只能同时编辑一个');
|
title: '新增',
|
||||||
} else {
|
shade: 0.1,
|
||||||
layer.alert('编辑 [id]：' + checkStatus.data[0].id);
|
area: ['500px', '400px'],
|
||||||
}
|
content: MODULE_PATH + 'add'
|
||||||
break;
|
});
|
||||||
case 'delete':
|
}
|
||||||
if (data.length === 0) {
|
|
||||||
layer.msg('请选择一行');
|
window.edit = function(obj){
|
||||||
} else {
|
layer.open({
|
||||||
layer.msg('删除');
|
type: 2,
|
||||||
}
|
title: '修改',
|
||||||
break;
|
shade: 0.1,
|
||||||
};
|
area: ['500px', '400px'],
|
||||||
});
|
content: MODULE_PATH + 'edit?userId='+obj.data['userId']
|
||||||
|
});
|
||||||
//监听行工具事件
|
}
|
||||||
table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
|
||||||
var data = obj.data //获得当前行数据
|
window.remove = function(obj){
|
||||||
,
|
layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){
|
||||||
layEvent = obj.event; //获得 lay-event 对应的值
|
layer.close(index);
|
||||||
if (layEvent === 'detail') {
|
let loading = layer.load();
|
||||||
layer.msg('查看操作');
|
$.ajax({
|
||||||
} else if (layEvent === 'del') {
|
url: MODULE_PATH+"remove/"+obj.data['userId'],
|
||||||
layer.confirm('真的删除行么', function(index) {
|
dataType:'json',
|
||||||
obj.del(); //删除对应行（tr）的DOM结构
|
type:'delete',
|
||||||
layer.close(index);
|
success:function(result){
|
||||||
//向服务端发送删除指令
|
layer.close(loading);
|
||||||
});
|
if(result.success){
|
||||||
} else if (layEvent === 'edit') {
|
layer.msg(result.msg,{icon:1,time:1000},function(){
|
||||||
layer.msg('编辑操作');
|
obj.del();
|
||||||
}
|
});
|
||||||
});
|
}else{
|
||||||
|
layer.msg(result.msg,{icon:2,time:1000});
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.batchRemove = function(obj){
|
||||||
|
let data = table.checkStatus(obj.config.id).data;
|
||||||
|
if(data.length === 0){
|
||||||
|
layer.msg("未选中数据",{icon:3,time:1000});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
let ids = "";
|
||||||
|
for(let i = 0;i<data.length;i++){
|
||||||
|
ids += data[i].userId+",";
|
||||||
|
}
|
||||||
|
ids = ids.substr(0,ids.length-1);
|
||||||
|
layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
|
||||||
|
layer.close(index);
|
||||||
|
let loading = layer.load();
|
||||||
|
$.ajax({
|
||||||
|
url: MODULE_PATH+"batchRemove/"+ids,
|
||||||
|
dataType:'json',
|
||||||
|
type:'delete',
|
||||||
|
success:function(result){
|
||||||
|
layer.close(loading);
|
||||||
|
if(result.success){
|
||||||
|
layer.msg(result.msg,{icon:1,time:1000},function(){
|
||||||
|
table.reload('user-table');
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
layer.msg(result.msg,{icon:2,time:1000});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.refresh = function(param){
|
||||||
|
table.reload('user-table');
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -2,344 +2,176 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Layui树形表格2.x演示</title>
|
<title>Title</title>
|
||||||
<link rel="stylesheet" href="../../../component/layui/css/layui.css"/>
|
<link rel="stylesheet" href="../../../admin/css/pearCommon.css" />
|
||||||
<link rel="stylesheet" href="../../../admin/css/treeTable.css"/>
|
<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
|
||||||
<style>
|
|
||||||
.pear-container{
|
|
||||||
margin: 10px;
|
|
||||||
background-color: whitesmoke;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="pear-container">
|
<body class="pear-container">
|
||||||
<div class="layui-card">
|
<div class="layui-card">
|
||||||
<div class="layui-card-header"></div>
|
<div class="layui-card-body">
|
||||||
<div class="layui-card-body">
|
<form class="layui-form" action="">
|
||||||
<div class="page-wrapper">
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">权限名称</label>
|
||||||
<div class="layui-btn-container" style="display: inline-block;">
|
<div class="layui-input-inline">
|
||||||
<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
|
<input type="text" name="realName" placeholder="" class="layui-input">
|
||||||
<i class="layui-icon"></i>展开全部
|
</div>
|
||||||
</button>
|
<label class="layui-form-label">权限标识</label>
|
||||||
<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
|
<div class="layui-input-inline">
|
||||||
<i class="layui-icon"></i>折叠全部
|
<input type="text" name="username" placeholder="" class="layui-input">
|
||||||
</button>
|
</div>
|
||||||
<button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
|
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
|
||||||
<i class="layui-icon"></i>展开2
|
<i class="layui-icon layui-icon-search"></i>
|
||||||
</button>
|
查询
|
||||||
<button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
|
</button>
|
||||||
<i class="layui-icon"></i>折叠2
|
<button type="reset" class="pear-btn pear-btn-md">
|
||||||
</button>
|
<i class="layui-icon layui-icon-refresh"></i>
|
||||||
<button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
|
重置
|
||||||
<i class="layui-icon"></i>勾选1_1_2
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
<input class="layui-input" id="edtSearch" value="1_1_2" placeholder="输入关键字"
|
|
||||||
style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
|
|
||||||
<div class="layui-btn-container" style="display: inline-block;">
|
|
||||||
<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
||||||
<i class="layui-icon"></i>搜索
|
|
||||||
</button>
|
|
||||||
<button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
||||||
<i class="layui-icon">ဆ</i>清除搜索
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="layui-btn-container" style="display: inline-block;">
|
|
||||||
<a href="async.html" class="layui-btn layui-btn-sm layui-btn-primary" lay-tips="千呼万唤始出来~"
|
|
||||||
style="position: relative;">
|
|
||||||
<i class="layui-icon"></i>异步加载
|
|
||||||
<span class="layui-badge-dot" style="position: absolute;right: 3px;top: 3px;"></span>
|
|
||||||
</a>
|
|
||||||
<a href="fixed.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
||||||
<i class="layui-icon"></i>固定表头
|
|
||||||
</a>
|
|
||||||
<a href="edit.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
||||||
<i class="layui-icon"></i>单元格编辑
|
|
||||||
</a>
|
|
||||||
<a href="icon.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
||||||
<i class="layui-icon"></i>自定义图标
|
|
||||||
</a>
|
|
||||||
<a href="big.html" class="layui-btn layui-btn-sm layui-btn-primary">
|
|
||||||
<i class="layui-icon"></i>数据量测试
|
|
||||||
</a>
|
|
||||||
<a href="../../1.x/demo/index.html" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
|
|
||||||
回顾1.x
|
|
||||||
</a>
|
|
||||||
<a href="https://whvse.gitee.io/treetable/" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank">
|
|
||||||
bom表格
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table id="demoTreeTable1"></table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--<div class="right-desc">
|
|
||||||
<div class="layui-text desc-item">
|
|
||||||
treeTable时隔一年进行了彻底重构，不再基于数据表格table，从零开始，
|
|
||||||
实现了数据表格的大部分功能，在使用方法上与数据表格一致，
|
|
||||||
并且支持懒加载、复选框联动、折叠状态记忆等功能，
|
|
||||||
<a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
|
</div>
|
||||||
<img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
|
<div class="layui-card">
|
||||||
<div style="padding: 5px 10px;">
|
<div class="layui-card-body">
|
||||||
EasyWeb管理系统模板
|
<table id="power-table" lay-filter="power-table"></table>
|
||||||
<a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>-->
|
|
||||||
|
|
||||||
<!-- 表格操作列 -->
|
|
||||||
<script type="text/html" id="demoTreeTableBar1">
|
|
||||||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
|
|
||||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- 表格状态列 -->
|
|
||||||
<script type="text/html" id="demoTreeTableState1">
|
|
||||||
<input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
|
|
||||||
lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="page-loading">
|
|
||||||
<div class="ball-loader sm">
|
|
||||||
<span></span><span></span><span></span><span></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="text/html" id="power-toolbar">
|
||||||
|
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
|
||||||
|
<i class="layui-icon layui-icon-add-1"></i>
|
||||||
|
新增
|
||||||
|
</button>
|
||||||
|
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
|
||||||
|
<i class="layui-icon layui-icon-delete"></i>
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="power-bar">
|
||||||
|
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
|
||||||
|
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="power-type">
|
||||||
|
{{#if (d.powerType == '0') { }}
|
||||||
|
<span>目录</span>
|
||||||
|
{{# }else if(d.powerType == '1'){ }}
|
||||||
|
<span>菜单</span>
|
||||||
|
{{# }else if(d.powerType == '2'){ }}
|
||||||
|
<span>按钮</span>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="power-enable">
|
||||||
|
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="icon">
|
||||||
|
<i class="layui-icon {{d.icon}}"></i>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
<script src="../../../component/layui/layui.js"></script>
|
<script src="../../../component/layui/layui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(['layer', 'util', 'treeTable'], function () {
|
layui.use(['table','form','jquery','treetable'],function () {
|
||||||
var $ = layui.jquery;
|
let table = layui.table;
|
||||||
var layer = layui.layer;
|
let form = layui.form;
|
||||||
var util = layui.util;
|
let $ = layui.jquery;
|
||||||
var treeTable = layui.treeTable;
|
let treetable = layui.treetable;
|
||||||
var data = [{
|
|
||||||
id: "1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: [{
|
|
||||||
id: "1_1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: [{
|
|
||||||
id: "1_1_1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "1_1_2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "1_1_3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: "1_2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: [{
|
|
||||||
id: "1_2_1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "1_2_2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "1_2_3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: "1_3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: "2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: [{
|
|
||||||
id: "2_1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: [{
|
|
||||||
id: "2_1_1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "2_1_2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "2_1_3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: "2_2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "2_3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: "3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: [{
|
|
||||||
id: "3_1",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "3_2",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "3_3",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
id: "4",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}, {
|
|
||||||
id: "5",
|
|
||||||
name: "xxx",
|
|
||||||
state: 0,
|
|
||||||
createTime: "2019/11/18 10:44:00",
|
|
||||||
children: []
|
|
||||||
}];
|
|
||||||
|
|
||||||
// 渲染表格
|
let MODULE_PATH = "/system/power/";
|
||||||
var insTb = treeTable.render({
|
|
||||||
elem: '#demoTreeTable1',
|
|
||||||
data: data,
|
|
||||||
tree: {
|
|
||||||
iconIndex: 2
|
|
||||||
},
|
|
||||||
cols: [
|
|
||||||
{type: 'numbers'},
|
|
||||||
{type: 'checkbox'},
|
|
||||||
{field: 'id', title: 'ID'},
|
|
||||||
{field: 'name', title: 'name', width: 160},
|
|
||||||
{
|
|
||||||
field: 'createTime', title: '创建时间', templet: function (d) {
|
|
||||||
return util.toDateString(d.createTime);
|
|
||||||
}, width: 180
|
|
||||||
},
|
|
||||||
{templet: '#demoTreeTableState1', title: '状态', width: 100},
|
|
||||||
{align: 'center', toolbar: '#demoTreeTableBar1', title: '操作', width: 120}
|
|
||||||
],
|
|
||||||
style: 'margin-top:0;'
|
|
||||||
});
|
|
||||||
|
|
||||||
treeTable.on('tool(demoTreeTable1)', function (obj) {
|
window.render = function(){
|
||||||
var event = obj.event;
|
treetable.render({
|
||||||
if (event == 'del') {
|
treeColIndex: 1,
|
||||||
layer.msg('点击了删除', {icon: 1});
|
treeSpid: 0,
|
||||||
} else if (event == 'edit') {
|
treeIdName: 'powerId',
|
||||||
layer.msg('点击了修改', {icon: 1});
|
treePidName: 'parentId',
|
||||||
obj.update({name: 'newname'});
|
skin:'line',
|
||||||
|
method:'post',
|
||||||
|
treeDefaultClose: true,
|
||||||
|
toolbar:'#power-toolbar',
|
||||||
|
elem: '#power-table',
|
||||||
|
url: '../../../admin/data/power.json',
|
||||||
|
page: false,
|
||||||
|
cols: [
|
||||||
|
[
|
||||||
|
{type: 'checkbox'},
|
||||||
|
{field: 'powerName', minWidth: 200, title: '权限名称'},
|
||||||
|
{field: 'icon', title: '图标',templet:'#icon'},
|
||||||
|
{field: 'powerType', title: '权限类型',templet:'#power-type'},
|
||||||
|
{field: 'enable', title: '是否可用',templet:'#power-enable'},
|
||||||
|
{field: 'sort', title: '排序'},
|
||||||
|
{title: '操作',templet: '#power-bar', width: 150, align: 'center'}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render();
|
||||||
|
|
||||||
|
table.on('tool(power-table)',function(obj){
|
||||||
|
if (obj.event === 'remove') {
|
||||||
|
window.remove(obj);
|
||||||
|
} else if (obj.event === 'edit') {
|
||||||
|
window.edit(obj);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
table.on('toolbar(power-table)', function(obj){
|
||||||
|
if(obj.event === 'add'){
|
||||||
|
window.add();
|
||||||
|
} else if(obj.event === 'refresh'){
|
||||||
|
window.refresh();
|
||||||
|
} else if(obj.event === 'batchRemove'){
|
||||||
|
window.batchRemove(obj);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 全部展开
|
window.add = function(){
|
||||||
$('#btnExpandAll').click(function () {
|
layer.open({
|
||||||
insTb.expandAll();
|
type: 2,
|
||||||
});
|
title: '新增',
|
||||||
|
shade: 0.1,
|
||||||
|
area: ['450px', '500px'],
|
||||||
|
content: MODULE_PATH + 'add'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// 全部折叠
|
window.edit = function(obj){
|
||||||
$('#btnFoldAll').click(function () {
|
layer.open({
|
||||||
insTb.foldAll();
|
type: 2,
|
||||||
});
|
title: '修改',
|
||||||
|
shade: 0.1,
|
||||||
|
area: ['450px', '500px'],
|
||||||
|
content: MODULE_PATH + 'edit?powerId='+obj.data['powerId']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.remove = function(obj){
|
||||||
|
layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
|
||||||
|
layer.close(index);
|
||||||
|
let loading = layer.load();
|
||||||
|
$.ajax({
|
||||||
|
url: MODULE_PATH+"remove/"+obj.data['powerId'],
|
||||||
|
dataType:'json',
|
||||||
|
type:'delete',
|
||||||
|
success:function(result){
|
||||||
|
layer.close(loading);
|
||||||
|
if(result.success){
|
||||||
|
layer.msg(result.msg,{icon:1,time:1000},function(){
|
||||||
|
obj.del();
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
layer.msg(result.msg,{icon:2,time:1000});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$('#btnExpand').click(function () {
|
})
|
||||||
insTb.expand('2');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnFold').click(function () {
|
|
||||||
insTb.fold('2');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnChecked').click(function () {
|
|
||||||
insTb.expand('1_1_2');
|
|
||||||
insTb.setChecked(['1_1_2']);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnSearch').click(function () {
|
|
||||||
var keywords = $('#edtSearch').val();
|
|
||||||
if (keywords) {
|
|
||||||
insTb.filterData(keywords);
|
|
||||||
} else {
|
|
||||||
insTb.clearFilter();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btnClearSearch').click(function () {
|
|
||||||
insTb.clearFilter();
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('mouseenter', '*[lay-tips]', function () {
|
|
||||||
layer.tips($(this).attr('lay-tips'), this, {tips: [1, '#FF5722'], time: -1});
|
|
||||||
}).on('mouseleave', '*[lay-tips]', function () {
|
|
||||||
layer.closeAll('tips');
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(function () {
|
|
||||||
$('body').children('.page-loading').hide();
|
|
||||||
$('body').removeClass('page-no-scroll');
|
|
||||||
}, 150);
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -7,8 +7,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">
|
||||||
|
<style>
|
||||||
<style>
|
|
||||||
.top-panel {
|
.top-panel {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue