1回答

Jimin

2019-02-13

你好，根据课程代码具体说一下部门树渲染的过程。

首先看这个template：

<script id="deptListTemplate" type="x-tmpl-mustache">

<ol class="dd-list">

    {{#deptList}}

        <li class="dd-item dd2-item dept-name" id="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">

            <div class="dd2-content" style="cursor:pointer;">

            {{name}}

            <span style="float:right;">

                <a class="green dept-edit" href="#" data-id="{{id}}" >

                    <i class="ace-icon fa fa-pencil bigger-100"></i>

                </a>

                &nbsp;

                <a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">

                    <i class="ace-icon fa fa-trash-o bigger-100"></i>

                </a>

            </span>

            </div>

        </li>

    {{/deptList}}

</ol>

</script>

这个列表是读取每个deptList节点的，但是只能读取一层

loadDeptTree();

function loadDeptTree() {

    $.ajax({

        url: "/sys/dept/tree.json",

        success : function (result) {

            if (result.ret) {

                deptList = result.data;

                var rendered = Mustache.render(deptListTemplate, {deptList: result.data});

                $("#deptList").html(rendered);

                recursiveRenderDept(result.data);

                bindDeptClick();

            } else {

                showMessage("加载部门列表", result.msg, false);

            }

        }

    })

}

这段代码里的：

var rendered = Mustache.render(deptListTemplate, {deptList: result.data});$("#deptList").html(rendered);

其实渲染的就是root首层，因为最顶层本身就是个list，代码里变量deptList是使用result.data传入的。

接下来通过 recursiveRenderDept(result.data); 完全递归渲染，递归渲染的代码为：

// 递归渲染部门树

function recursiveRenderDept(deptList) {

    if(deptList && deptList.length > 0) {

        $(deptList).each(function (i, dept) {

             deptMap[dept.id] = dept;

             if (dept.deptList.length > 0) {

                 var rendered = Mustache.render(deptListTemplate, {deptList: dept.deptList});

                 $("#dept_" + dept.id).append(rendered);

                 recursiveRenderDept(dept.deptList);

             }

        })

    }

}

这里分别以每个节点的deptList开始不断的取子节点的deptList属性向下递归，完成逐层的渲染。

0

0