ztree展示远程服务器前端部分,后台请看地址:https://www.jianshu.com/p/47c84920357e
html:
<ul ztree="zTreeOptions" id="file_l" ng-model="file_l" style="height:100%;overflow-y: auto;margin-bottom: 21px"
class="ztree"></ul>
js:
$scope.zTreeOptions = {
check: {
enable: true
},
edit: {
removeTitle: "删除",
enable: true
},
data: {
key: {
name: "name",
children: "children",
isParent: "isParent",
checked: "checked",
nocheck: "nocheck"
}
},
view: {showIcon: true, showLine: true},
onRemoveClick: $scope.before_remove_dir,
onRemove: $scope.remove_dir,
showRemoveBtn: "true",
};
指令:
app.directive('ztree', function () {
return {
require: '?ngModel',
restrict: 'A',
link: function (scope, element, attrs, ngModel) {
//Tree 主要操作对象
scope.treeObj = {};
//选项
var opts;
var viewSetting;
opts = angular.extend({
onClick: function (event, treeId, treeNode) {
},
onAddClick: function (treeId, treeNode) {
},
onRemoveClick: function (treeId, treeNode) {
console.log("ss")
},
onRemove: function (event, treeId, treeNode) {
},
showRemoveBtn: false,
showAddBtn: true,
asyncUrl: '',
check: {},
autoParam: [],
data: {
key: {
name: "name"
}
},
onCheck: function (event, treeId, treeNode) {
}
}, scope.$eval(attrs.ztree));
var addHoverDom = function (treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
if ($("#diyBtn_" + treeNode.id).length > 0) return;
var editStr = "<a class='treeAdd' style='width:18px;margin-left:3px;' id='diyBtn_" + treeNode.id
+ "'onfocus='this.blur();'></a>";
aObj.append(editStr);
var btn = $("#diyBtn_" + treeNode.id);
if (btn) btn.bind("click", function () {
opts.onAddClick(treeId, treeNode);
});
};
var removeHoverDom = function (treeId, treeNode) {
$("#diyBtn_" + treeNode.id).unbind().remove();
$("#diyBtn_space_" + treeNode.id).unbind().remove();
};
if (opts.showAddBtn) {
viewSetting = {
// addHoverDom: addHoverDom,
//removeHoverDom: removeHoverDom
};
}
else {
viewSetting = {
showIcon: false
};
}
//Tree 设置
var setting = {
callback: {
onClick: function (event, treeId, treeNode) {
scope.$apply(opts.onClick(event, treeId, treeNode));
},
beforeRemove: opts.onRemoveClick,
onCheck: opts.onCheck,
onRemove: opts.onRemove,
},
async: {
enable: true,
type: "get",
url: opts.asyncUrl,
autoParam: opts.autoParam
},
edit: {
enable: true,
showRemoveBtn: opts.showRemoveBtn,
showRenameBtn: false,
removeTitle: "删除组织",
drag: {
isCopy: false,
isMove: false
}
},
data: opts.data,
view: viewSetting,
check: opts.check
};
scope.$watch(attrs.ngModel, function (v) {
if (v) {
scope.treeObj = $.fn.zTree.init(element, setting, v);
var nodes = scope.treeObj.getNodes();
if (nodes.length > 0) {
scope.treeObj.expandNode(nodes[0], true, true, true);
}
}
});
}
};
});
网友评论