JQuery开发的小插件 JSON数据模板渲染

09/30 Jquery插件 阅读 1037 views 次 人气 0
摘要:

一个JQuery开发的小插件,一个函数,可以对JSON数据格式进行渲染,效果挺好还比较实用,这里正好分享一下。

小插件代码:

(function($){
  $.jsont = function(domTemplate, data) {
  	
    return domTemplate.replace(
    	/\{([\w\.]*)\}/g, 
    	function (str, key) {
	      	var keys = key.split(".");
	      	var value = data[keys.shift()];
	      	
	      	$.each(keys, function () {
	      			value = value[this];
	      	});
	      	
	      	return (value === null || value === undefined) ? "" : value;
    	});
  };
})(jQuery);


可以自动对ajax调用异步返回的data数据进行模板渲染:

应用demo1:

返回data-json格式

{
    propertycode:45,
    propertyname:name45
}

完成渲染:

function initResSearchableField(data) {
    $('#searchableField').html('');
 
    var docTemplate = '<div name="{propertycode}">{propertyname}</div>';
    $.each(data, 
        function(i, value) {
            //jsont plugin invoke here
            //result: <div name="45">name45</div>
            $('#searchableField').append($.jsont(docTemplate, value));  
        }
    );
}

应用demo2:

返回data-json格式

{
    rows: {   
        propertycode:45,
        propertyname:name45
    },
    id:64
}

此时可以这样使用这个插件:

var docTemplate = '<div name="{rows.propertycode}">{rows.propertyname}</div>';
$.each(data, 
    function(i, value) {
        //jsont plugin invoke here
        //result is also: <div name="45">name45</div>
        $('#searchableField').append($.jsont(docTemplate, value));  
    }
);

渲染小插件,能够对不同JSON格式的数据格式进行渲染,如果碰到比较复杂的JSON数据格式,可以参考源码,来编写渲染代码。

评论

该文章不支持评论!

分享到: