doT.js初学代码

最新推荐文章于 2024-03-14 11:53:05 发布

samete

最新推荐文章于 2024-03-14 11:53:05 发布

阅读量1.9k

点赞数

分类专栏： js jQuery 插件

本文链接：https://blog.csdn.net/samete/article/details/51241889

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

插件

6 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<title>component test</title>
	<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
	<script type="text/javascript" src="doT.min.js"></script>
	<style type="text/css">
	td {
		width: 150px;
		height: 50px;
		text-align: center;
	}
	.values {
		display: none;
		width: 100px;
	}

	</style>
</head>
<body>

	<div id="component"></div>

	<ul id="showInfo">
		<script type="text/dot-tpl" charset="utf-8" id="template-1">
			<table>
                <tr>
	                <th>姓名</th>
	                <th>年龄</th>
	                <th>性别</th>
	                <th>得分</th>
	                <th>喜欢</th>
	                <th>操作</th>
                </tr>

                {{for(i = 0; i < data1.infoArr.length; i++){}}
                	<tr>
		                <td>{{= data1.infoArr[i].name}}</td>
		                <td>{{= data1.infoArr[i].age}}</td>
		                <td>{{= data1.infoArr[i].gender||"暂无"}}</td>
		                <td>{{= data1.infoArr[i].mark}}</td>
		                <td>{{= data1.infoArr[i].like}}</td>
		                <td>{{= data1.infoArr[i].opt||"暂无"}}</td>
                	</tr>
                {{}}}
            </table>
		</script>
	</ul>
	
	<div id="define-test">
		<script type="text/dot-tpl" id="template-2">
			{{##def.snippet:
			<div>{{=data2.tableName}}</div>#}}

			{{#def.snippet}}
		</script>
	</div>

	<div id="array-test">
		<script type="text/dot-tpl" id="template-3">
			{{~it.array :value:index}}
				<p>{{=index}}</p><div>{{=value}}!</div>
			{{~}}
		</script>
	</div>

	<script type="text/javascript" src="test1.js"></script>
	<script type="text/javascript">
		var tableData = {
			tableName: "Person Infomation Table",
			infoArr: [
				{
					name: "Jack",
					age: 12,
					gender: "M",
					mark: 99,
					like: "apple"
				},
				{
					name: "Ann",
					age: 7,
					gender: "F",
					mark: 92,
					like: "orange"
				},
				{
					name: "Rose",
					age: 39,
					gender: "F",
					mark: 87,
					like: "bread"
				}
			]
		};
		$("#component").getTable(tableData);


		// doT.js test
		var data1 = tableData;
		var template = document.getElementById("template-1").innerHTML;
		document.getElementById("showInfo").innerHTML = doT.template(template)(data1);

		var data2 = tableData;
		var template2 = document.getElementById("template-2").innerHTML;
		document.getElementById("define-test").innerHTML = doT.template(template2)(data2);

		var data3 = {"array": ["banana", "apple", "orange"]};
		var template3 = document.getElementById("template-3").innerHTML;
		document.getElementById("array-test").innerHTML = doT.template(template3)(data3)
		// template-3里面的代码相当于下面的代码
		function anonymous(it /**/) { 
			var out='';
			var arr1=it.array;
			if(arr1){
				var value,index=-1,l1=arr1.length-1;
				while(index<l1){value=arr1[index+=1];
					out+='<p>'+(index)+'</p><div>'+(value)+'!</div>';
				} 
			} 
			return out; 
		}


	</script>
</body>
</html>

项目目录：

---test1

|_jquery-1.12.3.min.js

|_dot.min.js

|_test1.html

哦，得添加上test1.js(自己写的一个很初级的组件)

$.fn.extend({
	// 生成表格
	getTable: function(tableData) {
		// 使用this会报错
		that = $(this);
		that.append("<h3>" + tableData.tableName + "</h3><table border='1px' cellspacing='0' cellpadding='10px'><tr><th>Name</th><th>Age</th><th>Gender</th><th>Mark</th><th>Like</th><th>操作</th></table>");

		$.each(tableData.infoArr, function(i, n) {
			that.find("table").append("<tr><td><span>" + n.name + "</span><input type='text' class='values' value=" + n.name + "></td><td><span>" + n.age + "</span><input type='text' class='values' value=" + n.age + "></td><td><span>" + n.gender + "</span><input type='text' class='values' value=" + n.gender + "></td><td><span>" + n.mark + "</span><input type='text' class='values' value=" + n.mark + "></td><td><span>" + n.like + "</span><input type='text' class='values' value=" + n.like + "></td><td><a href='javascript:;'>更改信息</a></td></tr>");
		});
		// 修改数据
		$(this).on("click", "a", function() {
			var index = $(this).parents("tr").index();
			if($(this).text() === "更改信息") {
				$(this).text("提交");
				$(this).parents("tr").find("span").text("");
				$(this).parents("tr").find(".values").css("display", "inline-block");
			} else {
				var data = {
					name: $(this).parents("tr").find("input").eq(0).val(),
					age: $(this).parents("tr").find("input").eq(1).val(),
					gender: $(this).parents("tr").find("input").eq(2).val(),
					mark: $(this).parents("tr").find("input").eq(3).val(),
					like: $(this).parents("tr").find("input").eq(4).val()
				};

				// $.ajax({
				// 	type: "POST",
				// 	url: "/changeInfo",
				// 	data: data,
				// 	success: function(msg) {
				// 		$(this).parents("tr").find(".values").css("display", "none");
				// 		$(this).text("更改信息");
				// 	}
				// });

				// 成功
				alert("更改信息成功！");
				var len = $(this).parents("tr").find("span").length;
				$(this).parents("tr").find("span").eq(0).text(data.name);
				$(this).parents("tr").find("span").eq(1).text(data.age);
				$(this).parents("tr").find("span").eq(2).text(data.gender);
				$(this).parents("tr").find("span").eq(3).text(data.mark);
				$(this).parents("tr").find("span").eq(4).text(data.like);
				$(this).parents("tr").find(".values").css("display", "none");
				$(this).text("更改信息");

			}

		});
	},


});

samete

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
doT.js初学代码

component test td { width: 150px; height: 50px; text-align: center; } .values { display: none; width: 100px; } 姓名
复制链接

扫一扫