root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

删除多余代码

v1.0
bobi 2019-03-31 01:45:35 +08:00
parent 8ce6f26aba
commit f4b29acffa
6 changed files with 233 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
js/treetable/treetable.css Executable file
View File

@ -0,0 +1,18 @@
.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;
}

206
js/treetable/treetable.js Executable file
View File

@ -0,0 +1,206 @@
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 += '&nbsp;&nbsp;';
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);
});

2
permission.html
View File

@ -56,7 +56,7 @@
} }
layui.config({ layui.config({
base: 'lib/layui/lay/modules/' base: 'js/'
}).extend({ }).extend({
treetable: 'treetable/treetable' treetable: 'treetable/treetable'
}).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable'], function () { }).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable'], function () {

52
role-add.html
View File

@ -54,61 +54,15 @@
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script> <script>
layui.config({ layui.config({
base: 'lib/layui/lay/modules/authtree/' base: ''
}).extend({ }).extend({
authtree: 'authtree',
}); });
layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function () { layui.use(['element', 'form', 'jquery'], function () {
var element = layui.element; var element = layui.element;
var table = layui.table;
var form = layui.form; var form = layui.form;
var $ = layui.jquery; var $ = layui.jquery;
var laydate = layui.laydate;
var authtree = layui.authtree;
$.ajax({
url: 'data/tree.json',
dataType: 'json',
success: function (data) {
// 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
authtree.render('#authTree', data.data.trees, {
inputname: 'authids[]',
layfilter: 'lay-check-auth',
openall: false
});
}
})
laydate.render({
elem: '#birthday',
type: "datetime"
});
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
// 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
form.on('checkbox(lay-check-auth)', function (data) {
console.log(data.field);
// 获取所有节点
var all = authtree.getAll('#authTree');
console.log('all', all);
// 获取所有已选中节点
var checked = authtree.getChecked('#authTree');
console.log('checked', checked);
// 获取所有未选中节点
var notchecked = authtree.getNotChecked('#authTree');
console.log('notchecked', notchecked);
// 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
setTimeout(function () {
// 获取选中的叶子节点
var leaf = authtree.getLeaf('#authTree');
console.log(leaf);
}, 100);
return false;
});
form.on('submit(add)', function (data) { form.on('submit(add)', function (data) {
console.log(data.field); console.log(data.field);

4
role-auth.html
View File

@ -36,9 +36,9 @@
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script> <script>
layui.config({ layui.config({
base: 'lib/layui/lay/modules/authtree/' base: ''
}).extend({ }).extend({
authtree: 'authtree',
}); });
layui.use(['element', 'jquery', 'form'], function () { layui.use(['element', 'jquery', 'form'], function () {

52
role-edit.html
View File

@ -54,61 +54,15 @@
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script> <script>
layui.config({ layui.config({
base: 'lib/layui/lay/modules/authtree/' base: ''
}).extend({ }).extend({
authtree: 'authtree',
}); });
layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function () { layui.use(['element', 'form', 'jquery'], function () {
var element = layui.element; var element = layui.element;
var table = layui.table;
var form = layui.form; var form = layui.form;
var $ = layui.jquery; var $ = layui.jquery;
var laydate = layui.laydate;
var authtree = layui.authtree;
$.ajax({
url: 'data/tree.json',
dataType: 'json',
success: function (data) {
// 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
authtree.render('#authTree', data.data.trees, {
inputname: 'authids[]',
layfilter: 'lay-check-auth',
openall: false
});
}
})
laydate.render({
elem: '#birthday',
type: "datetime"
});
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
// 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
form.on('checkbox(lay-check-auth)', function (data) {
console.log(data.field);
// 获取所有节点
var all = authtree.getAll('#authTree');
console.log('all', all);
// 获取所有已选中节点
var checked = authtree.getChecked('#authTree');
console.log('checked', checked);
// 获取所有未选中节点
var notchecked = authtree.getNotChecked('#authTree');
console.log('notchecked', notchecked);
// 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
setTimeout(function () {
// 获取选中的叶子节点
var leaf = authtree.getLeaf('#authTree');
console.log(leaf);
}, 100);
return false;
});
form.on('submit(edit)', function (data) { form.on('submit(edit)', function (data) {
console.log(data.field); console.log(data.field);