前端模板引擎arttemplate.js 学习之include方法

用artTemplate的原因是不想频繁的去拼接字符串，简单的数据可以很快处理，想使用学习的请下载移 https://github.com/aui/artTemplate

但是在后来慢慢发现有些数据需要自己处理一下在使用，或者有时需要递归处理某些数据。

        今天这里主要是说下include方法遍历树形结构数据。代码如下

<div class="idd"></div>

<script type="text/html" id="idd_js">
{{each DpmList as value}}
<ul>
<li>
{{value.caption}}
{{if value.Child!=null}}
{{each value.Child as data}}
{{include 'list1' data}}
{{/each}}
{{/if}}
</li>
</ul>
{{/each}}
</script>
<script type="text/html" id="list1">
<ul>
<li>
{{caption}}
{{if Child!=null}}
{{each Child as data}}
{{include 'list1' data}}
{{/each}}
{{/if}}
</li>
</ul>
</script>
<script src="../../Scripts/template.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
type: "get",
url: "/api/UserDepartMent/GetMyOrgDepartMentsTreeInfoList?getDefault=" + true,
success: function(data) {
console.log(data)
var html=template("idd_js",data)
$(".idd").html(html)
}
});
})

{"DpmList":[{"Id":0,"ParentId":null,"ParentInfo":null,"caption":"未分配部门","Child":null,"UserCount":10,"ucount":10,"UserList":null},{"Id":363,"ParentId":null,"ParentInfo":null,"caption":"财务部","Child":[{"Id":372,"ParentId":363,"ParentInfo":null,"caption":"出纳","Child":null,"UserCount":2,"ucount":2,"UserList":null}],"UserCount":3,"ucount":1,"UserList":null},{"Id":207,"ParentId":null,"ParentInfo":null,"caption":"集团公司","Child":null,"UserCount":1,"ucount":1,"UserList":null},{"Id":336,"ParentId":null,"ParentInfo":null,"caption":"人事部","Child":null,"UserCount":0,"ucount":0,"UserList":null},{"Id":364,"ParentId":null,"ParentInfo":null,"caption":"软件部","Child":null,"UserCount":0,"ucount":0,"UserList":null},{"Id":208,"ParentId":null,"ParentInfo":null,"caption":"销售部","Child":[{"Id":257,"ParentId":208,"ParentInfo":null,"caption":"hh","Child":null,"UserCount":0,"ucount":0,"UserList":null},{"Id":256,"ParentId":208,"ParentInfo":null,"caption":"sd","Child":null,"UserCount":0,"ucount":0,"UserList":null},{"Id":216,"ParentId":208,"ParentInfo":null,"caption":"西南地区","Child":null,"UserCount":0,"ucount":0,"UserList":null}],"UserCount":0,"ucount":0,"UserList":null},{"Id":209,"ParentId":null,"ParentInfo":null,"caption":"行政部","Child":[{"Id":213,"ParentId":209,"ParentInfo":null,"caption":"人力资源","Child":[{"Id":215,"ParentId":213,"ParentInfo":null,"caption":"科室二","Child":null,"UserCount":0,"ucount":0,"UserList":null},{"Id":214,"ParentId":213,"ParentInfo":null,"caption":"科室一","Child":null,"UserCount":0,"ucount":0,"UserList":null}],"UserCount":0,"ucount":0,"UserList":null},{"Id":210,"ParentId":209,"ParentInfo":null,"caption":"社保","Child":[{"Id":211,"ParentId":210,"ParentInfo":null,"caption":"科室一","Child":[{"Id":281,"ParentId":211,"ParentInfo":null,"caption":"部门1","Child":null,"UserCount":0,"ucount":0,"UserList":null}],"UserCount":0,"ucount":0,"UserList":null}],"UserCount":0,"ucount":0,"UserList":null}],"UserCount":0,"ucount":0,"UserList":null}]}

这是我的api返回的数据可能有点乱 可以自己写一下简单的树形json数据   利用template.js的include方法实现递归显示层级的部门