美文网首页
juicer渲染列表

juicer渲染列表

作者: Lyon0616 | 来源:发表于2017-01-05 15:42 被阅读0次
    //假数据格式
    
    var data={
      list:[
       {name:'水务集团',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
       {name:'视频监控',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
       {name:'滹沱河',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
       {name:'光伏发电',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
       {name:'武清水厂',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'},
       {name:'栾城水厂',show:true,address:'https://zhidao.baidu.com/question/1541674174483734867.html'}
      ],
     };
    
    //按照上面假数据拼接
    $.ajax({
          url : root+"/tree/parent.ajax",
          type:'post',
          dataType:'json',
          success:function(data){
    //如果需要手动添加一条死数据
           var menulistData = [{name:'视频监控',objId:50,url:'http://221.238.241.250:81/portal/login_init.action'}];
           //console.log("菜单数据:",data);
    //循环遍历每条数据对应值
           $.each(data,function(index,value){
            menulistData.push({name:value.text,objId: value.objId,url:'index.jsp?factoryId='+value.objId});
           })
           //console.log(menulistData," llallll");
    //data 的格式
           var data={list:menulistData};
           var tpl=[
              '<ul>',
               '[@each list as it, k]',
                '<li><a href="$[it.url]">$[it.name]</a></li>',
               '[@/each]',
              '</ul>'
             ].join('\n');
              var content = juicer(tpl,data);
              $(".enhanchedBoxButton").append(content);
    

    *更改juicer里面符号

    juicer.set({
         'tag::operationOpen': '[@',
         'tag::operationClose': ']',
         'tag::interpolateOpen': '$[',
         'tag::interpolateClose': ']',
         'tag::noneencodeOpen': '$$[',
         'tag::noneencodeClose': ']',
         'tag::commentOpen': '[#',
         'tag::commentClose': ']'
     });
    

    相关文章

      网友评论

          本文标题:juicer渲染列表

          本文链接:https://www.haomeiwen.com/subject/voszvttx.html