mirror of
https://github.com/nsnail/FreeSql.git
synced 2025-06-19 12:28:15 +08:00
新增文档分类列表树
This commit is contained in:
hogan
@ -0,0 +1,41 @@
|
||||
html,body{height: 100%;overflow-y:hidden;}
|
||||
.system-top .layui-nav{height: 60px;display: inline-block;}
|
||||
|
||||
.top-left{padding-left: 0;}
|
||||
.top-left .iconfont{font-size: 25px;}
|
||||
.top-left .layui-this:after{width: 0;}
|
||||
.top-right{position: absolute;right: 0;}
|
||||
.logo{background-color: #009688;height:60px;line-height:60px;font-size:18px;text-align:center;color:#fff;}
|
||||
.logo .layui-nav-img{margin-right: 0;}
|
||||
|
||||
.system-left{height: 100%;position: fixed;z-index: 1;top: 0px;}
|
||||
.system-left .layui-nav .layui-nav-item{border-bottom: 1px solid #414d5c;}
|
||||
|
||||
/** 左侧菜单展开模式 **/
|
||||
.left-full .system-left,.left-full .logo{width: 200px;}
|
||||
.left-full .system-top,.left-full .system-content{padding-left:210px;}
|
||||
.left-full .text{display: block;}.left-full .image{display: none;}
|
||||
|
||||
/** 左侧菜单收起（迷你）模式 **/
|
||||
.left-mini .system-left,.left-mini .system-left .layui-nav{width: 56px;}
|
||||
.left-mini .system-top,.left-mini .system-content{padding-left: 66px;}
|
||||
.left-mini .system-left .layui-nav-item>a .title{display: none;}
|
||||
.left-mini .system-left dd span{display: none;}
|
||||
.left-mini .system-left .layui-nav-tree .layui-nav-more{right: 22px;}
|
||||
.left-mini .layui-nav-child dd{position: relative;}
|
||||
.left-mini .left-tips{position: absolute;left: 60px;top: 0;padding:0 10px;border-radius:2px;background-color: #000;}
|
||||
.left-mini .left-tips i{position: absolute;left: -8px;top: 5px;width: 0;height: 0;border-width: 8px;border-color: transparent;border-style: dashed;border-bottom-style: solid;border-bottom-color: #000;}
|
||||
.left-mini .logo .text{display: none;}.left-mini .logo .image{display: block;}
|
||||
|
||||
.system-content .layui-tab-card{margin-bottom: 0;border: 0;}
|
||||
.system-content .layui-tab-card .layui-tab-title{border-top-left-radius: 15px;border-top-right-radius: 15px;position: absolute;z-index: 9;width: 100%;bottom: 0;height: 35px;}
|
||||
.system-content .layui-tab-card .layui-tab-title li{background: #f2f2f2;height: 35px;line-height: 35px;border-top-left-radius: 15px;border-top-right-radius: 15px;border-left: 1px solid #e2e2e2;border: 1px solid #e2e2e2;margin-right: 4px;}
|
||||
.system-content .layui-tab-card .layui-tab-title li .layui-tab-close{border: 1px solid #c2c2c2;border-radius: 50%;}
|
||||
.system-content .layui-tab-card .layui-tab-title li:first-child .layui-tab-close{display:none;}
|
||||
.system-content .layui-tab-card .layui-tab-title .layui-this{background-color: #009688;color: #fff;}
|
||||
.system-content .layui-tab-card .layui-tab-title .layui-this:after{border-style: none;}
|
||||
.system-content .layui-tab-card .layui-tab-title .layui-this .layui-tab-close{color:#fff;border: 1px solid #fff;}
|
||||
.system-content .layui-tab-card .layui-tab-content{padding: 0;}
|
||||
.system-content .layui-tab-card .layui-tab-content .layui-table-view{margin:0;}
|
||||
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
.hide{display: none;}
|
||||
.top-title{margin-bottom: 10px;position: relative;}
|
||||
.top-title .layui-form-select{display: inline-block;}
|
||||
.top-title .layui-btn-group{display: inline-block;position: absolute;right: 10px;top: 7px;font-size: 14px;}
|
||||
.top-title .layui-btn-group .layui-btn{margin-top: -4px;height: 36px;}
|
||||
.top-title .layui-form-select .layui-input{background: #009688;color:#fff;}
|
||||
.top-title .layui-form-select .layui-input::-webkit-input-placeholder{color:#fff;}
|
||||
.layui-table-page{text-align: center;}
|
||||
.layui-table-view{margin-bottom: 0;}
|
||||
|
||||
.table-search-form{padding:10px;}
|
||||
.table-search-form .layui-form-item{margin-bottom:10px;}
|
||||
.table-search-form .layui-layer-btn a{width: 100%;margin: 5px 0;padding: 0;}
|
||||
|
||||
td[data-field=action] .layui-table-cell{overflow: unset;padding: 0;}
|
||||
td[data-field=action] .layui-form-select{position: absolute;width: 120px;margin-left: 7px;}
|
||||
td[data-field=action] .layui-form-select .layui-input{height:30px;border: 0;background-color: #009688;color: #fff;}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
@ -0,0 +1,217 @@
|
||||
layui.define(["form"], function (exports) {
|
||||
var MOD_NAME = "treetable",
|
||||
o = layui.jquery,
|
||||
form = layui.form,
|
||||
tree = function () { };
|
||||
tree.prototype.cinfig = function (e) {
|
||||
this.c = o.extend({
|
||||
elem: "#tree-table",
|
||||
field: "id",
|
||||
icon_class: "down",
|
||||
icon_val: {
|
||||
open: "",
|
||||
close: ""
|
||||
},
|
||||
space: 4,
|
||||
new_data: [],
|
||||
childs: [],
|
||||
is_open: false,
|
||||
}, e)
|
||||
};
|
||||
tree.prototype.on = function (events, callback) {
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback)
|
||||
};
|
||||
tree.prototype.template = function (data) {
|
||||
var t = this,
|
||||
level = [],
|
||||
tbody = "",
|
||||
thead = t.c.is_checkbox ? '<td><input type="checkbox" lay-skin="primary" lay-filter="lay-t"></td>' : '';
|
||||
o.each(t.c.cols, function (idx, obj) {
|
||||
thead += '<th style="width:' + obj.width + '">' + obj.title + "</th>"
|
||||
});
|
||||
o.each(data, function (index, item) {
|
||||
var checked = t.c.is_checkbox && t.c.checked && o.inArray(item.id, t.c.checked) > -1 && 'checked',
|
||||
hide_class = 'class="' + (item.pid == 0 || item.pid == t.cache(item.pid) || t.c.is_open ? "" : "hide") + '"',
|
||||
tr = '<tr data-id="' + item.id + '" data-pid="' + item.pid + '" ' + hide_class + ">" +
|
||||
(t.c.is_checkbox ? '<td><div><input type="checkbox" lay-skin="primary" lay-filter="lay-t" ' + checked + '></div></td>' : "");
|
||||
item.level = level[item.id] = item.pid > 0 ? (level[item.pid] + 1) : 0;
|
||||
o.each(t.c.cols, function (idx, obj) {
|
||||
tr += '<td style="width:' + obj.width + '">';
|
||||
if (obj.field == t.c.field) {
|
||||
tr += (" ".repeat(level[item.id] * t.c.space));
|
||||
if (t.c.childs[item.id]) {
|
||||
tr += '<i class="layui-icon ' + t.c.icon_class + '">' + (item.id == t.cache(item.id) || t.c.is_open ? t.c.icon_val.close : t.c.icon_val.open) + "</i>"
|
||||
}
|
||||
}
|
||||
tr += (obj.template ? obj.template(item) : (item[obj.field] !== undefined ? item[obj.field] : '')) + "</td>"
|
||||
});
|
||||
tbody += tr + "</tr>";
|
||||
});
|
||||
return '<thead><tr data-id="0" data-pid="-1">' + thead + "</tr></thead><tbody>" + tbody + "</tbody>"
|
||||
};
|
||||
tree.prototype.render = function (e) {
|
||||
var t = this,
|
||||
data = [];
|
||||
t.cinfig(e);
|
||||
o.each(t.c.data, function (index, item) {
|
||||
if (!t.c.childs[item.pid]) {
|
||||
t.c.childs[item.pid] = []
|
||||
}
|
||||
t.c.childs[item.pid][item.id] = t.c.new_data[item.id] = data[item.id] = item
|
||||
});
|
||||
var tree = this.tree(data, 0, [], 0),
|
||||
template = t.template(tree);
|
||||
o(t.c.elem).html(template).on("click", "td", function () {
|
||||
var id = o(this).parents("tr").data("id"),
|
||||
pid = o(this).parents("tr").data("pid"),
|
||||
status = o(t.c.elem).find("tr[data-pid=" + id + "]").is(":visible"),
|
||||
dt = o(this).find("." + t.c.icon_class);
|
||||
if (dt.length) {
|
||||
if (status) {
|
||||
t.hide(id);
|
||||
dt.html(t.c.icon_val.open)
|
||||
} else {
|
||||
o(t.c.elem).find("tr[data-pid=" + id + "]").removeClass('hide');
|
||||
t.cache(id, true);
|
||||
dt.html(t.c.icon_val.close)
|
||||
}
|
||||
}
|
||||
var filter = o(this).parents("[lay-filter]").attr("lay-filter");
|
||||
return filter ? layui.event.call(this, MOD_NAME, MOD_NAME + "(" + filter + ")", {
|
||||
elem: o(this),
|
||||
status: status,
|
||||
item: t.c.new_data[id],
|
||||
childs: t.c.childs[id],
|
||||
siblings: t.c.childs[pid],
|
||||
index: o(this).index(),
|
||||
is_last: o(this).index() + 1 == o(this).parents("tr").find("td").length,
|
||||
}) : ""
|
||||
}).on("click", "td [lay-filter]", function () {
|
||||
var id = o(this).parents("tr").data("id"),
|
||||
filter = o(this).attr("lay-filter");
|
||||
return layui.event.call(this, MOD_NAME, MOD_NAME + "(" + filter + ")", {
|
||||
elem: o(this),
|
||||
item: t.c.new_data[id],
|
||||
})
|
||||
})
|
||||
form.render('checkbox').on('checkbox(lay-t)', function (data) {
|
||||
var status = o(data.othis).hasClass('layui-form-checked'),
|
||||
tr = o(data.elem).parents('tr');
|
||||
t.child_to_choose(tr.data('id'), status);
|
||||
t.parent_to_choose(tr.data('pid'));
|
||||
form.render('checkbox');
|
||||
})
|
||||
};
|
||||
tree.prototype.parent_to_choose = function (id) {
|
||||
var t = this,
|
||||
pt = o(t.c.elem).find('[data-pid=' + id + ']'),
|
||||
pl = pt.find('[lay-skin=primary]:checked').length,
|
||||
bt = o(t.c.elem).find('[data-id=' + id + '] [lay-skin=primary]'),
|
||||
pid = o(t.c.elem).find('[data-id=' + id + ']').data('pid');
|
||||
if (pt.length == pl || pl == 0) {
|
||||
bt.prop('checked', pt.length == pl);
|
||||
pid > -1 && t.parent_to_choose(pid);
|
||||
}
|
||||
};
|
||||
tree.prototype.child_to_choose = function (id, status) {
|
||||
var t = this;
|
||||
o(t.c.elem).find("tr[data-pid=" + id + "]").each(function () {
|
||||
o(this).find('[lay-skin=primary]').prop('checked', status);
|
||||
var id = o(this).data("id");
|
||||
t.child_to_choose(id, status)
|
||||
});
|
||||
};
|
||||
tree.prototype.hide = function (id) {
|
||||
var t = this;
|
||||
o(t.c.elem).find("tr[data-pid=" + id + "]").each(function () {
|
||||
o(this).addClass('hide');
|
||||
o(this).find("." + t.c.icon_class).html(t.c.icon_val.open);
|
||||
var id = o(this).data("id");
|
||||
t.hide(id)
|
||||
});
|
||||
t.cache(id, false)
|
||||
};
|
||||
tree.prototype.show = function (id) {
|
||||
var t = this;
|
||||
o(t.c.elem).find("tr[data-pid=" + id + "]").each(function () {
|
||||
o(this).removeClass('hide');
|
||||
o(this).find("." + t.c.icon_class).html(t.c.icon_val.close);
|
||||
var id = o(this).data("id");
|
||||
t.show(id)
|
||||
});
|
||||
t.cache(id, true)
|
||||
};
|
||||
tree.prototype.tree = function (lists, pid, data) {
|
||||
var t = this;
|
||||
if (lists[pid]) {
|
||||
data.push(lists[pid]);
|
||||
delete lists[pid]
|
||||
}
|
||||
o.each(t.c.data, function (index, item) {
|
||||
if (item.pid == pid) {
|
||||
data.concat(t.tree(lists, item.id, data))
|
||||
}
|
||||
});
|
||||
return data
|
||||
};
|
||||
tree.prototype.cache = function (val, option) {
|
||||
var t = this,
|
||||
name = "tree-table-open-item",
|
||||
val = val.toString(),
|
||||
cache = t.get_cookie(name) ? t.get_cookie(name).split(",") : [],
|
||||
index = o.inArray(val, cache);
|
||||
if (option === undefined) {
|
||||
return index == -1 ? false : val
|
||||
}
|
||||
if (option && index == -1) {
|
||||
cache.push(val)
|
||||
}
|
||||
if (!option && index > -1) {
|
||||
cache.splice(index, 1)
|
||||
}
|
||||
t.set_cookie(name, cache.join(","))
|
||||
};
|
||||
tree.prototype.set_cookie = function (name, value, days) {
|
||||
var exp = new Date();
|
||||
exp.setTime(exp.getTime() + (days ? days : 30) * 24 * 60 * 60 * 1000);
|
||||
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString()
|
||||
};
|
||||
tree.prototype.get_cookie = function (name) {
|
||||
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
|
||||
if (arr = document.cookie.match(reg)) {
|
||||
return unescape(arr[2])
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
};
|
||||
tree.prototype.all = function (type) {
|
||||
var t = this;
|
||||
if (type == "up") {
|
||||
o(t.c.elem).find("tr[data-pid=0]").each(function () {
|
||||
var id = o(this).data("id");
|
||||
t.hide(id);
|
||||
o(this).find("." + t.c.icon_class).html(t.c.icon_val.open)
|
||||
})
|
||||
} else if (type == "down") {
|
||||
o(t.c.elem).find("tr[data-pid=0]").each(function () {
|
||||
var id = o(this).data("id");
|
||||
t.show(id);
|
||||
o(this).find("." + t.c.icon_class).html(t.c.icon_val.close)
|
||||
})
|
||||
} else if (type == "checked") {
|
||||
var ids = [],
|
||||
data = [];
|
||||
o(t.c.elem).find("tbody [lay-skin=primary]:checked").each(function () {
|
||||
var id = o(this).parents('tr').data("id");
|
||||
data.push(t.c.new_data[id]);
|
||||
ids.push(id);
|
||||
})
|
||||
return {
|
||||
ids: ids,
|
||||
data: data
|
||||
};
|
||||
}
|
||||
};
|
||||
var tree = new tree();
|
||||
exports(MOD_NAME, tree)
|
||||
});
|
||||
Reference in New Issue
Block a user