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

来源：互联网发布：男女恋爱观演变知乎编辑：程序博客网时间：2024/05/20 13:08

用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方法实现递归显示层级的部门

2 0