<ul id="zTree" class="ztree notselect"></ul>
<script>
window.RoleAction = new function () {
this.data = {};
this.ztree = null;
this.setting = {
view: {showLine: false, showIcon: false, dblClickExpand: false},
check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}},
callback: {
beforeClick: function (id, node) {
node.children.length < 1 ? RoleAction.ztree.checkNode(node, !node.checked, null, true) : RoleAction.ztree.expandNode(node);
return false;
}
}
};
this.renderChildren = function (list, level) {
var childrens = [];
for (var i in list) childrens.push({
open: true, node: list[i].node, name: list[i].title || list[i].node,
checked: list[i].checked || false, children: this.renderChildren(list[i]._sub_, level + 1)
});
return childrens;
};
this.getData = function (that) {
var index = $.msg.loading();
$.form.load('{:url()}', {id: '1', action: 'get'}, 'post', function (ret) {
that.data = that.renderChildren(ret.data, 1);
that.data = [
{
open: true,
node: 'aaaa',
name: '鬼切',
checked: false,
children: [
{
open: true,
node: "1",
name: "赤影妖刀姬",
checked: false,
children: []
},
{
open: true,
node: "2",
name: "赤影妖刀姬",
checked: false,
children: []
},
{
open: true,
node: "3",
name: "赤影妖刀姬",
checked: false,
children: []
},{
open: true,
node: "4",
name: "赤影妖刀姬",
checked: false,
children: []
}
]
},
{
open: true,
node: 'bbbb',
name: '日和坊',
checked: false,
children: [
{
open: true,
node: "1",
name: "赤影妖刀姬",
checked: false,
children: []
},
{
open: true,
node: "2",
name: "赤影妖刀姬",
checked: false,
children: []
},
{
open: true,
node: "3",
name: "赤影妖刀姬",
checked: false,
children: []
},{
open: true,
node: "4",
name: "赤影妖刀姬",
checked: false,
children: []
}
]
}
];
return $.msg.close(index), that.showTree(), false;
});
};
this.showTree = function () {
this.ztree = $.fn.zTree.init($("#zTree"), this.setting, this.data);
while (true) {
var nodes = this.ztree.getNodesByFilter(function (node) {
return (!node.node && node.children.length < 1);
});
if (nodes.length < 1) break;
for (var i in nodes) this.ztree.removeNode(nodes[i]);
}
};
this.submit = function () {
var nodes = [], data = this.ztree.getCheckedNodes(true);
for(var i in data){
if(data[i].children.length == 0 && data[i].node){
nodes.push(data[i].node);
}
}
// for (var i in data) if (data[i].node) nodes.push(data[i].node);
$.form.load('{:url()}', {id: '1', action: 'save', nodes: nodes}, 'post');
};
// 刷新数据
this.getData(this);
// 提交表单
$('[data-submit-role]').on('click', function () {
RoleAction.submit();
});
};
</script>
<link href="ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="ztree/ztree.all.min.js"></script>
<style>
ul.ztree li {
white-space: normal !important;
}
ul.ztree li span.button.switch {
margin-right: 5px;
}
ul.ztree ul ul li {
display: inline-block;
white-space: normal;
}
ul.ztree > li {
padding: 15px 25px 15px 15px;
}
ul.ztree > li > ul {
margin-top: 12px;
border-top: 1px solid rgba(0, 0, 0, .1);
}
ul.ztree > li > ul > li {
padding: 5px;
}
ul.ztree > li > a > span {
font-weight: 700;
font-size: 15px;
}
ul.ztree .level2 .button.level2 {
background: 0 0;
}
</style>
ztree demo
最新推荐文章于 2023-12-12 11:21:28 发布