删除多余代码
bobi
parent
8ce6f26aba
commit
f4b29acffa
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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 += ' ';
|
||||
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);
|
||||
});
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
|
||||
layui.config({
|
||||
base: 'lib/layui/lay/modules/'
|
||||
base: 'js/'
|
||||
}).extend({
|
||||
treetable: 'treetable/treetable'
|
||||
}).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable'], function () {
|
||||
|
|
|
|||
|
|
@ -54,61 +54,15 @@
|
|||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'lib/layui/lay/modules/authtree/'
|
||||
base: ''
|
||||
}).extend({
|
||||
authtree: 'authtree',
|
||||
|
||||
});
|
||||
|
||||
layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function () {
|
||||
layui.use(['element', 'form', 'jquery'], function () {
|
||||
var element = layui.element;
|
||||
var table = layui.table;
|
||||
var form = layui.form;
|
||||
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) {
|
||||
console.log(data.field);
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@
|
|||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'lib/layui/lay/modules/authtree/'
|
||||
base: ''
|
||||
}).extend({
|
||||
authtree: 'authtree',
|
||||
|
||||
});
|
||||
|
||||
layui.use(['element', 'jquery', 'form'], function () {
|
||||
|
|
|
|||
|
|
@ -54,61 +54,15 @@
|
|||
<script src="lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'lib/layui/lay/modules/authtree/'
|
||||
base: ''
|
||||
}).extend({
|
||||
authtree: 'authtree',
|
||||
|
||||
});
|
||||
|
||||
layui.use(['element', 'form', 'jquery', 'laydate', 'authtree'], function () {
|
||||
layui.use(['element', 'form', 'jquery'], function () {
|
||||
var element = layui.element;
|
||||
var table = layui.table;
|
||||
var form = layui.form;
|
||||
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) {
|
||||
console.log(data.field);
|
||||
|
|
|
|||
Loading…
Reference in New Issue