$('#treeDeparts').jstree({
'plugins': ["types", "state"],
'core': {
"themes": {
"responsive": false
},
'data': function (obj, cb) {
console.log("obj:", obj);
if (obj && obj.id && obj.id != "#") {
if (obj.original.type == 'depart' || obj.original.type == 'company') {
$apiRole.ListChildDeparts(obj.id, function (result) {
console.log("jstree:", result);
cb.call(this, result.Data);
});
}
} else {
//$apiRole.ListChildDeparts(CompanyId, function (result) {
// cb.call(this, result.Data);
//});
$apiRole.ListRootDeparts($scope.CompanyId, function (result) {
cb.call(this, result.Data);
});
}
}
},
"types": {
"default": {
"icon": "fa fa-folder icon-state-success icon-lg"
},
"company": {
"icon": "fa fa-bank icon-state-success icon-lg"
},
"depart": {
"icon": "fa fa-puzzle-piece icon-state-success icon-lg"
}
},
'state': {
"opened": true,
},
}).on('activate_node.jstree', function (e, data) { //点击事件
//console.log("e", e);
//console.log("data:", data);
var node = data.node.original;
//console.log("text:", node.text);
if (node.type != "type") {
$scope.nodeText = node.text;
$scope.CurrentDepartId = node.id;
$scope.dataTable.refresh();
}
})
.on('hover_node.jstree', function (event, data) { //鼠标移上事件
var node = data.node.original;
$scope.DepartName = node.text;
$scope.$apply($scope.DepartName);
})
当点击jstree树的节点时触发activate_node.jstree事件
当鼠标移动到节点上方时触发hover_node.jstree事件,此处的鼠标移上事件触发会获取节点数据,利用Angular将数据与页面进行双向绑定,移动到不同的节点页面显示的数据实时更新变化