码迷,mamicode.com
首页 > Web开发 > 详细

js填充列表的几种方式

时间:2016-05-19 14:41:32      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

应用情景:在服务端返回一个json格式的列表数据,前端页面中需要使用js来绘制dom的时候
 
1,根据html模板按规则替换掉数据部分的实现方式
html模板
<!-- 模板 -->
<div style="display: none;">
<ul id="itemdataTempleteContent">
<li onclick="getPlan({itemdata_id});">
<span>名字:{itemdata_name}</span>
</li>
</ul>
</div>

 

js方法
//根据模板生成内容,在内容较多时使用字符串替换拼接操作来添加dom
    //模板中使用“{itemdata_XXX}”的格式来作为属性替换值的标示,遇到该标示则替换
    //@param templete 模板内容
    //@param data 数据行
    //@param format 格式化(如日期格式化),可以没有
    function getHtmlByTemplete(templete, data, format){
        return templete.replace(/{itemdata_([^}]+)}/g, function($0, $1){
            var v = data[$1] ; 
            if( typeof(format) !== ‘undefined‘ && format !== null ){
                v = format($1, v) ; 
            }
            return v ; 
        }) ; 
    }

 

填充代码片段
var templeteStr = XXX.innerHTML ; 
    var content = XXXXX; 
    var itemHtmlList = [] ; 
    for(var i=0 ; i < list.length; i++){
        itemHtmlList.push(getHtmlByTemplete(templeteStr, list[i], itemdataFormatDate)) ; 
    }
    content.innerHTML = itemHtmlList.join(‘‘) ; 

 

 
 
2,利用jquery的clone方法去根据模板生成dom,然后加入
    数据大的时候不应该使用
 
3,利用js的字符串拼接方法

 

js填充列表的几种方式

标签:

原文地址:http://www.cnblogs.com/ooi-/p/5508321.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!