通常利用js调用ajax返回数据并操作dom模型时往往需要拼装字符串，当拼接的字符串较长时这样代码的可读性及可操作性不高。那么我们此时可以自定义模板，从而提高可读性。

定义模板

<template id="userLT" style="display:none">
	<tr>
		<td><input type="checkbox" value="{id}"/></td>
		<td>{nickName}</td>
		<td>{realName}</td>
		<td>{phone}</td>
		<td>{createTime}</td>
		<td>{state}</td>
		<td>{state}</td>
	</tr>
</template>

对于上面这个模板存在两个{state}标签，但是每个标签要回显不同的内容，所以就用到了下面的方法

自定义插件template.js

var options = {};

$.extend({

	/**
	 * 设置参数
	 * field 字段名称
	 * fn 方法名
	 */
	helper : function(field, fn) {
		// 将回调函数放入对象
		if(!options[field]){
			options[field] = fn;
		} else {
			var fns = options[field];
			if(fns instanceof Array){// 数组
				// 将回调函数放入数组
				fns.unshift(fn);
				options[field] = fns;
			} else {
				var arr = new Array();
				arr.push(fn);
				arr.push(fns);
				options[field] = arr;
			}
		}
	},

	/**
	 * 替换元素
	 * @param dataL 数据列表对象
	 * @param template 模板对象
	 * @param arr 数组
	 * @param item 数据对象
	 * @param last 是否是最后一条
	 */
	template : function(dataL, template, arr, item, last) {

		// 定义正则
		var reg = new RegExp(/^reg_.*$/);

		// 遍历数组
		for (var i = 0; i < arr.length; i++) {
			
			// 获取字段名称
			var field = arr[i];
			var regExp = null;
			var bool = false;

			if (reg.test(field)) { // 匹配正则
				// 获取对象名称
				var field = arr[i].split("_")[1];
				regExp = new RegExp("{" + field + "}", "g");
				bool = true;
			}

			// 获取字段数据
			var value = item[field];
			if (options[field]) { //若字段数据需要处理
				
				if(options[field] instanceof Array){
					var fns = options[field];
					var fn = fns.pop();
					fns.unshift(fn);
					if(fn){
						// 通过回调函数处理数据
						value = fn(value, item);
					}
				} else {
					// 通过回调函数处理数据
					value = options[field](value, item);
				}
				
			}

			// 待替换的元素
			var element = bool ? regExp : "{" + field + "}";

			// 替换模板数据
			template = template.replace(element, value);

		}// end for

		
		// 是否是最后一条
		if(last){
			for(var key in options){
				// 删除配置
				delete options[key];
			}
		}
		
		// 展示数据列表
		dataL.append(template);
	}
});

自定义函数


/**
 * @param cellData 单元数据
 * @param rowData  行数据
 */

function funA(cellData,rowData){
		if(cellData == 1){
			return "正常";
		} else {
			return "锁定";
		}
	}
	
	
	function funB(cellData,rowData){
		var html = "";
		if(cellData == 1){
			html = "<i class='glyphicon glyphicon-eye-close'></i>"
				   + "&nbsp;<a href=" + rowData.id +">禁止账户</a>"
				   + "&nbsp;<a href=" + rowData.id +">删除</a>";
		} else {
			html = "<i class='glyphicon glyphicon-eye-open'></i>"
				   + "&nbsp;<a href=" + rowData.id +">开启账户</a>"
				   + "&nbsp;<a href=" + rowData.id +">删除</a>";
		}
		return html;
	}

替换数据



function initData(pageNum) {
		$.ajax({
			type : "get",
			url : "/user/list",
			data : {
				"pageNum" : pageNum,
			},
			dataType : "json",
			async : false,
			success : function(data) {
				totalCount = data.totalCount;
				if(totalCount > 0){ // 有数据
					var items = data.data;
					var arr = new Array("id","nickName","realName","phone","createTime","state","state","state");

					// 注意:需要特殊处理的字段绑定回调函数
					$.helper("state",funA);
					$.helper("state",funB);


					for(var i=0; i<items.length; i++){
						// 判断是否是最后一条
						var last = i == items.length-1 ? true : false;
						// 替换模板数据
						$.template($("#userList"), $("#userLT").html(), arr,items[i], last);
					}
				} 
			}// end success
		});//ajax end