ztree展示远程服务器文件

2019-11-28  本文已影响0人  仁安天下

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);
                    }
                }
            });
        }
    };
});
上一篇下一篇

猜你喜欢

热点阅读