美文网首页
ztree展示远程服务器文件

ztree展示远程服务器文件

作者: 仁安天下 | 来源:发表于2019-11-28 20:31 被阅读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);
                        }
                    }
                });
            }
        };
    });
    

    相关文章

      网友评论

          本文标题:ztree展示远程服务器文件

          本文链接:https://www.haomeiwen.com/subject/turiwctx.html