del:code
bobi
parent
bda2a16d21
commit
4399a5af21
|
|
@ -1,18 +0,0 @@
|
|||
.treeTable-empty {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.treeTable-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.treeTable-icon .layui-icon-triangle-d:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.treeTable-icon.open .layui-icon-triangle-d:before {
|
||||
content: "\e625";
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
layui.define(['layer', 'table'], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var table = layui.table;
|
||||
|
||||
var treetable = {
|
||||
// 渲染树形表格
|
||||
render: function (param) {
|
||||
// 检查参数
|
||||
if (!treetable.checkParam(param)) {
|
||||
return;
|
||||
}
|
||||
// 获取数据
|
||||
if (param.data) {
|
||||
treetable.init(param, param.data);
|
||||
} else {
|
||||
$.getJSON(param.url, param.where, function (res) {
|
||||
treetable.init(param, res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 渲染表格
|
||||
init: function (param, data) {
|
||||
var mData = [];
|
||||
var doneCallback = param.done;
|
||||
var tNodes = data;
|
||||
// 补上id和pid字段
|
||||
for (var i = 0; i < tNodes.length; i++) {
|
||||
var tt = tNodes[i];
|
||||
if (!tt.id) {
|
||||
if (!param.treeIdName) {
|
||||
layer.msg('参数treeIdName不能为空', {icon: 5});
|
||||
return;
|
||||
}
|
||||
tt.id = tt[param.treeIdName];
|
||||
}
|
||||
if (!tt.pid) {
|
||||
if (!param.treePidName) {
|
||||
layer.msg('参数treePidName不能为空', {icon: 5});
|
||||
return;
|
||||
}
|
||||
tt.pid = tt[param.treePidName];
|
||||
}
|
||||
}
|
||||
|
||||
// 对数据进行排序
|
||||
var sort = function (s_pid, data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].pid == s_pid) {
|
||||
var len = mData.length;
|
||||
if (len > 0 && mData[len - 1].id == s_pid) {
|
||||
mData[len - 1].isParent = true;
|
||||
}
|
||||
mData.push(data[i]);
|
||||
sort(data[i].id, data);
|
||||
}
|
||||
}
|
||||
};
|
||||
sort(param.treeSpid, tNodes);
|
||||
|
||||
// 重写参数
|
||||
param.url = undefined;
|
||||
param.data = mData;
|
||||
param.page = {
|
||||
count: param.data.length,
|
||||
limit: param.data.length
|
||||
};
|
||||
param.cols[0][param.treeColIndex].templet = function (d) {
|
||||
var mId = d.id;
|
||||
var mPid = d.pid;
|
||||
var isDir = d.isParent;
|
||||
var emptyNum = treetable.getEmptyNum(mPid, mData);
|
||||
var iconHtml = '';
|
||||
for (var i = 0; i < emptyNum; i++) {
|
||||
iconHtml += '<span class="treeTable-empty"></span>';
|
||||
}
|
||||
if (isDir) {
|
||||
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
|
||||
} else {
|
||||
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
|
||||
}
|
||||
iconHtml += ' ';
|
||||
var ttype = isDir ? 'dir' : 'file';
|
||||
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
|
||||
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
|
||||
};
|
||||
|
||||
param.done = function (res, curr, count) {
|
||||
$(param.elem).next().addClass('treeTable');
|
||||
$('.treeTable .layui-table-page').css('display', 'none');
|
||||
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
|
||||
// 绑定事件换成对body绑定
|
||||
/*$('.treeTable .treeTable-icon').click(function () {
|
||||
treetable.toggleRows($(this), param.treeLinkage);
|
||||
});*/
|
||||
if (param.treeDefaultClose) {
|
||||
treetable.foldAll(param.elem);
|
||||
}
|
||||
if (doneCallback) {
|
||||
doneCallback(res, curr, count);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染表格
|
||||
table.render(param);
|
||||
},
|
||||
// 计算缩进的数量
|
||||
getEmptyNum: function (pid, data) {
|
||||
var num = 0;
|
||||
if (!pid) {
|
||||
return num;
|
||||
}
|
||||
var tPid;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (pid == data[i].id) {
|
||||
num += 1;
|
||||
tPid = data[i].pid;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return num + treetable.getEmptyNum(tPid, data);
|
||||
},
|
||||
// 展开/折叠行
|
||||
toggleRows: function ($dom, linkage) {
|
||||
var type = $dom.attr('lay-ttype');
|
||||
if ('file' == type) {
|
||||
return;
|
||||
}
|
||||
var mId = $dom.attr('lay-tid');
|
||||
var isOpen = $dom.hasClass('open');
|
||||
if (isOpen) {
|
||||
$dom.removeClass('open');
|
||||
} else {
|
||||
$dom.addClass('open');
|
||||
}
|
||||
$dom.closest('tbody').find('tr').each(function () {
|
||||
var $ti = $(this).find('.treeTable-icon');
|
||||
var pid = $ti.attr('lay-tpid');
|
||||
var ttype = $ti.attr('lay-ttype');
|
||||
var tOpen = $ti.hasClass('open');
|
||||
if (mId == pid) {
|
||||
if (isOpen) {
|
||||
$(this).hide();
|
||||
if ('dir' == ttype && tOpen == isOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
} else {
|
||||
$(this).show();
|
||||
if (linkage && 'dir' == ttype && tOpen == isOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 检查参数
|
||||
checkParam: function (param) {
|
||||
if (!param.treeSpid && param.treeSpid != 0) {
|
||||
layer.msg('参数treeSpid不能为空', {icon: 5});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!param.treeColIndex && param.treeColIndex != 0) {
|
||||
layer.msg('参数treeColIndex不能为空', {icon: 5});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
// 展开所有
|
||||
expandAll: function (dom) {
|
||||
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
|
||||
var $ti = $(this).find('.treeTable-icon');
|
||||
var ttype = $ti.attr('lay-ttype');
|
||||
var tOpen = $ti.hasClass('open');
|
||||
if ('dir' == ttype && !tOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 折叠所有
|
||||
foldAll: function (dom) {
|
||||
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
|
||||
var $ti = $(this).find('.treeTable-icon');
|
||||
var ttype = $ti.attr('lay-ttype');
|
||||
var tOpen = $ti.hasClass('open');
|
||||
if ('dir' == ttype && tOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
layui.link(layui.cache.base + 'treetable/treetable.css');
|
||||
|
||||
// 给图标列绑定事件
|
||||
$('body').on('click', '.treeTable .treeTable-icon', function () {
|
||||
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
|
||||
if ('true' == treeLinkage) {
|
||||
treetable.toggleRows($(this), true);
|
||||
} else {
|
||||
treetable.toggleRows($(this), false);
|
||||
}
|
||||
});
|
||||
|
||||
exports('treetable', treetable);
|
||||
});
|
||||
|
|
@ -42,20 +42,15 @@
|
|||
<!--js逻辑-->
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: '../../js/'
|
||||
}).extend({
|
||||
treetable: 'treetable/treetable'
|
||||
}).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable', "tree", "okUtils", "okMock"], function () {
|
||||
var form = layui.form;
|
||||
var table = layui.table;
|
||||
var $ = layui.jquery;
|
||||
var laydate = layui.laydate;
|
||||
var treetable = layui.treetable;
|
||||
var treetable = layui.treetable;
|
||||
var tree = layui.tree;
|
||||
var okUtils = layui.okUtils;
|
||||
var okMock = layui.okMock;
|
||||
layui.use(["element", "table", "laydate", "tree", "okUtils", "okMock"], function () {
|
||||
let table = layui.table;
|
||||
let laydate = layui.laydate;
|
||||
let tree = layui.tree;
|
||||
let okUtils = layui.okUtils;
|
||||
let okMock = layui.okMock;
|
||||
|
||||
laydate.render({elem: '#startTime', type: "datetime"});
|
||||
laydate.render({elem: '#endTime', type: "datetime"});
|
||||
|
||||
function initTree() {
|
||||
okUtils.ajax(okMock.api.permission.tree, "get", null).done(function (response) {
|
||||
|
|
@ -73,124 +68,33 @@
|
|||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: '#tableId',
|
||||
url: okMock.api.user.list,
|
||||
limit: 20,
|
||||
page: true,
|
||||
size: "sm",
|
||||
cols: [[
|
||||
{field: "id", title: "ID", width: 80, sort: true},
|
||||
{field: "username", title: "账号", width: 100},
|
||||
{field: "password", title: "密码", width: 100},
|
||||
{field: "reallyName", title: "姓名", width: 100},
|
||||
{field: "nickname", title: "昵称", width: 100},
|
||||
{field: "role", title: "角色", width: 100, templet: "#roleTpl"},
|
||||
{field: "status", title: "状态", width: 100, templet: "#statusTpl"},
|
||||
{field: "email", title: "邮箱", width: 200},
|
||||
{field: "createTime", title: "创建时间", width: 150},
|
||||
{field: "logins", title: "登陆次数", width: 100},
|
||||
{title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
|
||||
]],
|
||||
done: function (res, curr, count) {
|
||||
console.info(res, curr, count);
|
||||
}
|
||||
});
|
||||
}
|
||||
initTree();
|
||||
|
||||
laydate.render({
|
||||
elem: '#startTime',
|
||||
type: "datetime"
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#endTime',
|
||||
type: "datetime"
|
||||
});
|
||||
|
||||
layer.load(2);
|
||||
treetable.render({
|
||||
treeColIndex: 1,
|
||||
treeSpid: -1,
|
||||
treeIdName: 'authorityId',
|
||||
treePidName: 'parentId',
|
||||
elem: '#tableId',
|
||||
url: okMock.api.permission.list2,
|
||||
page: false,
|
||||
cols: [[
|
||||
{type: 'numbers'},
|
||||
{field: 'authorityName', minWidth: 200, title: '权限名称'},
|
||||
{field: 'authority', title: '权限标识'},
|
||||
{field: 'menuUrl', title: '菜单url'},
|
||||
{field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
|
||||
{
|
||||
field: 'isMenu', width: 80, align: 'center', templet: function (d) {
|
||||
if (d.isMenu == 1) {
|
||||
return '<span class="layui-badge layui-bg-gray">按钮</span>';
|
||||
}
|
||||
if (d.parentId == -1) {
|
||||
return '<span class="layui-badge layui-bg-blue">目录</span>';
|
||||
} else {
|
||||
return '<span class="layui-badge-rim">菜单</span>';
|
||||
}
|
||||
}, title: '类型'
|
||||
},
|
||||
{templet: '#operationTpl', width: 120, align: 'center', title: '操作'}
|
||||
]],
|
||||
done: function (res, curr, count) {
|
||||
layer.closeAll('loading');
|
||||
$("#countNum").text(count);
|
||||
}
|
||||
});
|
||||
|
||||
form.on('submit(search)', function () {
|
||||
layer.msg('正在查询，请稍后...');
|
||||
return false;
|
||||
});
|
||||
|
||||
table.on('tool(tableFilter)', function (obj) {
|
||||
var data = obj.data;
|
||||
console.log("id值：" + data.id);
|
||||
var layEvent = obj.event;
|
||||
if (layEvent === 'edit') {
|
||||
layer.open({
|
||||
title: '编辑权限',
|
||||
type: 2,
|
||||
shade: false,
|
||||
maxmin: true,
|
||||
shade: 0.5,
|
||||
area: ['90%', '90%'],
|
||||
content: 'permission-edit.html?id' + data.id,
|
||||
zIndex: layer.zIndex,
|
||||
end: function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
}
|
||||
});
|
||||
} else if (layEvent === 'del') {
|
||||
layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
|
||||
layer.msg("操作成功！", {icon: 1, time: 1000});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#batchDel").click(function () {
|
||||
layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
|
||||
var checkStatus = table.checkStatus('tableId');
|
||||
var rows = checkStatus.data.length;
|
||||
if (rows > 0) {
|
||||
var idsStr = "";
|
||||
for (var i = 0; i < checkStatus.data.length; i++) {
|
||||
idsStr += checkStatus.data[i].id + ',';
|
||||
}
|
||||
console.log("选择的id-->" + idsStr);
|
||||
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
});
|
||||
} else {
|
||||
layer.msg('未选择有效数据', {
|
||||
offset: 't',
|
||||
anim: 6
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#addPermission").click(function () {
|
||||
layer.open({
|
||||
title: '添加权限',
|
||||
type: 2,
|
||||
shade: false,
|
||||
maxmin: true,
|
||||
shade: 0.5,
|
||||
anim: 4,
|
||||
area: ['90%', '90%'],
|
||||
content: 'permission-add.html',
|
||||
zIndex: layer.zIndex,
|
||||
// skin: 'layui-layer-molv',
|
||||
end: function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<!--模板-->
|
||||
<script type="text/html" id="operationTpl">
|
||||
|
|
|
|||
Loading…
Reference in New Issue