文章参考:
http://www.jq22.com/jquery-info1097/
最近在工作中写了一个树形结构,数据是自己设计的:
var fomat = {
"机构ID_1": {
"orgId": 机构ID,
"orgName"机构名字,
"users": {
"用户ID_1":{
"id ": 用户ID,
"leaderId ": 汇报人ID,
"leaderName ":汇报人名字,
"postId ": 职位ID,
"postName ": 职位名字
},
"用户ID_2":{
"id ": 用户ID,
"leaderId ": 汇报人ID,
"leaderName ":汇报人名字,
"postId ": 职位ID,
"postName ": 职位名字
}
}
},
"机构ID_2": {
"orgId": 机构ID,
"orgName"机构名字,
"users": {
"用户ID_1":{
"id ": 用户ID,
"leaderId ": 汇报人ID,
"leaderName ":汇报人名字,
"postId ": 职位ID,
"postName ": 职位名字
},
"用户ID_2":{
"id ": 用户ID,
"leaderId ": 汇报人ID,
"leaderName ":汇报人名字,
"postId ": 职位ID,
"postName ": 职位名字
}
}
}
};
使用artTemplate 模板引擎做数据解析,但是怎么解析都有问题,最后把数据拉到本地,发现在本地使用正常,
在浏览器中调试,先将json对象转为字符串,然后再转为JSON对象,也显示正常。
最后使用debug调试,发现是因为数据的key最后有一个空格,把key的空格去掉之后,页面显示正常了。
模拟数据,数据格式转换的代码如下:
[{
"avatar": "http://default.jpg",
"id": 20770003,
"leaderId": 20760000,
"leaderName": "aaaaaa",
"name": "bbbbbbbb",
"orgId": 681,
"orgName": "3333333",
"postId": 700,
"postName": "分公司经理"
}
];
// 格式化用户的信息
function formatUserInfo(){
var userCount = allUserJons.length;
var result = {};
for(var i=0;i < userCount; i++){
// 从数据库获取的用户信息
var userInfo = allUserJons[i];
// 如果找不到这个机构ID,则需要新建
if(result[userInfo.orgId] == undefined){
// 机构对象
var orgObj = {};
// 机构ID
orgObj["orgId"] = userInfo.orgId ;
orgObj["orgName"] = userInfo.orgName ;
//机构下面的员工
orgObj["users"] = {};
//机构下面具体的员工
var tempUser = {};
// 用户信息
tempUser["id"] = userInfo.id ;
tempUser["leaderId"] = userInfo.leaderId ;
tempUser["leaderName"] = userInfo.leaderName ;
tempUser["postId"] = userInfo.postId ;
tempUser["postName"] = userInfo.postName ;
// 记录机构员工
orgObj["users"][userInfo.id] = tempUser;
result[userInfo.orgId] = orgObj;
}
// 如果招到了员工
else{
// 机构对象
var orgObj = result[userInfo.orgId];
//机构下面具体的员工
var tempUser = {};
// 用户信息
tempUser["id"] = userInfo.id ;
tempUser["leaderId"] = userInfo.leaderId ;
tempUser["leaderName"] = userInfo.leaderName ;
tempUser["postId"] = userInfo.postId ;
tempUser["postName"] = userInfo.postName ;
// 记录机构员工
orgObj["users"][userInfo.id] = tempUser;
}
}
return result;
}
var abc = formatUserInfo();
console.dir(abc);
使用模板引擎的代码如下:
<!-- 汇报关系模板 -->
<script type="text/html" id="reportRelationTemplate">
{{each orgsData as orgName i}}
<li class="item" id="{{orgName.orgId}}">
<div class="menu-header">{{orgName.orgName}}</div><!-- 非展开状态 -->
<div class="menu-body">
<ul class="clearfix">
{{each orgName.users as users i}}
<li class="itemInfo" id="{{users.id}}">
<p class="img"><img src="{{users.avatar}}" width="38" height="38" class="img-circle" /></p>
<p class="name">{{users.name}}</p>
<p class="position">{{users.postName}}</p>
<p class="icon-select"></p>
</li>
{{/each}}
</ul>
</div>
</li>
{{/each}}
</script>