artTemplate模板引擎学习(json的key字符串两端不能有空格)

文章参考:

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>


var data = res.data;
var orgsData = formatUserInfo(data.list);
console.log(orgsData);
var data = {
	"orgsData" : orgsData
};

var html = template('reportRelationTemplate',data);

 

 

 

 

 

 

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭