$('#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將數據與頁面進行雙向綁定,移動到不同的節點頁面顯示的數據實時更新變化