为Swift添加目录树

By | 2014/10/11
  • 准备工作

我使用zTree,第一步当然是去下载zTree,下载完之后就要将文件拷贝到相应的目录

 

js

拷贝js文件到下面目录(目录自行创建)

/horizon/horizon/static/ztree/js/jquery.ztree.all-3.5.js

 

并在 /horizon/horizon/templates/horizon/_scripts.html 文件中加入对ztree.js的引用

<script src='{{ STATIC_URL }}ztree/js/jquery.ztree.all-3.5.js' type='text/javascript' charset='utf-8'></script>

css

拷贝css文件、img下面目录(目录自行创建),css文件拷贝完之后可能需要修改css文件中队图片的引用地址(搜索url即可)

/horizon/openstack_dashboard/static/ztree/img/
/horizon/openstack_dashboard/static/ztree/less/zTreeStyle.css

然后在  /horizon/openstack_dashboard/templates/_stylesheets.html  文件中加入对ztree.css的引用

<link href='{{ STATIC_URL }}ztree/less/zTreeStyle.css' type='text/css' media='screen' rel='stylesheet' />
  • 代码编写

引用加完之后即可以开始写代码了。

index.html
在首页加入ztree,通过ajax异步获取数据

<ul id="filetree" class="ztree"></ul>
<script type="text/javascript">
        //get current tree by ajax
        var setting = {
            view: {
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId"
                }
            },
            async: {
                enable: true,
                url: getUrl,
                type: "get",
                dataFilter: filter
            },
            callback: {
                beforeClick: beforeClick,
                beforeAsync: beforeAsync,
                onAsyncError: onAsyncError,
                onAsyncSuccess: onAsyncSuccess
            }
        };

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i = 0, l = childNodes.length; i < l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }
        function beforeClick(treeId, treeNode) {
            if (!treeNode.isParent) {
                console.info("choose a parent node");
                return false;
            } else {
                return true;
            }
        }
        function getUrl(treeId, treeNode){
            if (treeNode){
                return "/project/containers/" + treeNode.id + "get_current_tree";
            }else{
                return "/project/containers/mydisk/get_current_tree";
            }
        }
        function beforeAsync(treeId, treeNode) {
            return true;
        }
        function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
            console.error("Async Error !");
        }
        function onAsyncSuccess(event, treeId, treeNode, msg) {
            console.info("ok");
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#filetree"), setting);
        });
    </script>

urls.py
然后需要在urls.py文件中添加相应的url pattern

url(r'^(?P<container_name>.+?)/(?P<subfolder_path>(.+/)+)?get_current_tree',
        "get_current_tree",
        name='get_current_tree'),

views.py
剩下来的就是获取目录中对象文件了

def get_current_tree(request, container_name, subfolder_path=None):
    """Returns a list of current path."""
    curr_tree = []
    base_url = "/project/containers/"

    if subfolder_path:
        subfolder_path = url_decode(subfolder_path)
        pid = container_name+"/"+subfolder_path
    else:
        curr_tree.append({"id": container_name, "pId": "0", "name": tree_root_name, "open": "true", "url": "#", "target": "_self"})
        pid = tree_root_id

    try:
        files, _more = api.swift.swift_get_objects(request, url_decode(container_name), prefix=subfolder_path)
    except Exception:
        files = []

    for file in files:
        if file.bytes is None:
            file_name = file.name
            if file_name.find("/") >= 0:
                file_name = file_name.split("/")[-1]
            curr_tree.append({"id": file.id + "/",
                         "pId": pid,
                         "name": file_name,
                         "open": "false",
                         "isParent": "true",
                         "url": base_url + file.id,
                         "target": "_self"})
        else:
            file_name = file.name
            if file_name.find("/") >= 0:
                file_name = file_name.split("/")[-1]
            curr_tree.append({"id": file.id + "/", "pId": pid, "name": file_name})
    return HttpResponse(json.dumps(curr_tree))

Leave a Reply

Your email address will not be published. Required fields are marked *