diff --git a/js/treetable/treetable.css b/js/treetable/treetable.css
new file mode 100755
index 0000000..a5eb1dd
--- /dev/null
+++ b/js/treetable/treetable.css
@@ -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;
+}
+
diff --git a/js/treetable/treetable.js b/js/treetable/treetable.js
new file mode 100755
index 0000000..1940bdc
--- /dev/null
+++ b/js/treetable/treetable.js
@@ -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 += '';
+ }
+ if (isDir) {
+ iconHtml += ' ';
+ } else {
+ iconHtml += '';
+ }
+ iconHtml += ' ';
+ var ttype = isDir ? 'dir' : 'file';
+ var vg = '';
+ return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + ''
+ };
+
+ 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);
+});
diff --git a/permission.html b/permission.html
index 8ae9749..e798074 100644
--- a/permission.html
+++ b/permission.html
@@ -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 () {
diff --git a/role-add.html b/role-add.html
index 66a8cec..4c06b2d 100644
--- a/role-add.html
+++ b/role-add.html
@@ -54,61 +54,15 @@