实现后台管理端树形权限勾选,没有使用默认勾选策略,默认勾选策略不是很人性化,自己通过事件实现策略,还是不是很完美。
QQ图片20170512154543.png插件代码
$('#jstree1').jstree({
'core': {
'data': ${treeJson},
'expand_selected_onload' : false
},
"checkbox" : {
"keep_selected_style" : false,
'three_state' : false,
'tie_selection' : false
},
"plugins" : [ "checkbox" ]
}).bind('loaded.jstree', function(event, jstree) {
var $jstree = $('#jstree1').jstree(true);
var data = jstree.instance._model.data;
var firstSubKey;
// 根据json参数勾选默认
for(key in data) {
if('#' === key) {
continue;
}
if(data[key].li_attr._checked) {
$jstree.check_node(key);
}
if(!firstSubKey && $jstree.get_node(key).parents.length == 1) {
firstSubKey = key;
}
}
// 默认打开一级展示
if(firstSubKey) {
$jstree.close_all();
$jstree.open_node(firstSubKey);
}
}).bind('open_node.jstree', function(event, jstree) {
// 打开当前级关闭其它级展示
var $jstree = $('#jstree1').jstree(true);
var data = jstree.instance._model.data;
var cur_node = jstree.node;
for(key in data) {
if(key !== cur_node.id && !isInArray(cur_node.parents, key)) {
$jstree.close_node(key);
}
}
}).bind('check_node.jstree', function(event, jstree) {
var $jstree = $('#jstree1').jstree(true);
var data = jstree.instance._model.data;
var cur_node = jstree.node;
if(!$jstree.is_open(cur_node.id)) {
$jstree.open_node(cur_node.id);
}
// 选中及所有父级
$jstree.check_node(cur_node.parents);
}).bind('uncheck_node.jstree', function(event, jstree) {
// 取消其所有子级
var $jstree = $('#jstree1').jstree(true);
var data = jstree.instance._model.data;
var cur_node = jstree.node;
for(key in data) {
var node = $jstree.get_node(key);
if(cur_node.id === node.parent) {
$jstree.uncheck_node(key);
}
}
});
获取选中id
var ids = [];
var $jstree = $('#jstree1').jstree(true);
var data = $jstree._model.data;
for(key in data) {
if($jstree.is_checked(key)) {
ids.push(data[key].li_attr._id);
}
}
网友评论