template模板，Jquery插件[demo]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery plugin template</title>
<style type="text/css">
*{font-size:14px;}
table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;width:100%}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

table table{border-left:0px solid #888;border-top:0px;}
table table tr:last-child > td{border-bottom:0px}
table table tr > td:last-child{border-right:0px}
table table tr > th:last-child{border-right:0px}
table tr td.pad0{padding: 0px;}

.box{background-color: #788990;}
.box td{background-color: #788990;}
.box th{background-color: #788990;}
</style>
<script src="../jquery-1.11.3.js"></script>
<script src="jquery.tpl.1.0.js"></script>
<script type="text/javascript">
var d1 = {name : "Shawn", job : "Engineer"};
var d2 = {data : {name : "Cook", job : "CEO"}};
var d3 = [
{name : "Jackson", job : "Engineer", gender : "M"}
,{name : "Sharui", job : "Engineer", gender : "F"}
,{name : "Tim Cook", job : "CEO"}
,{name : "Jack Ma", gender : "M"}
];
var d4 = {
name : "Jackson"
,bill : [
{month : "January", spend : 500, desc : "none"}
,{month : "February", spend : 1500, desc : "traffic, oil"}
]
};
var d5 = {
name : "Jackson"
,bill : [
{month : "January",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
,{month : "February",
detail : [
{item : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{item : "交通费", fee : 1000, desc : "邮费支出"}
,{item : "汽车保养费", fee : 800, desc : "被黑了"}
,{item : "通信费", fee : 200, desc : "电话费"}
]
}
]
};
var d6 = {
name : "XX南京分公司"
,bill : [
{name : "业务部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
,{name : "行政部门",
detail : [
{name : "餐费", fee : 500, desc : "日常餐费、请客吃饭"}
,{name : "交通费", fee : 1000, desc : "邮费支出"}
,{name : "汽车保养费", fee : 800, desc : "被黑了"}
,{name : "通信费", fee : 200, desc : "电话费"}
]
}
]
};

var d7 = [
{
id : "a001"
,name : "曹操"
,gender : "M"
,birthday : new Date(155, 10, 1) //"155-11-01"
,fav : ["登山", "美女", "打架"]
,country : "魏"
,imgPath : "c:/a001.jpg"
,desc : "字孟德，一名吉利，小字阿瞒，沛国谯县（今安徽亳州）人"
}
,{
id : "a002"
,name : "刘备"
,gender : "M"
,birthday : new Date(161, 9, 1) //"161-10-01"
,fav : ["篮球", "登山", "阅读"]
,country : "蜀"
,imgPath : "c:/a002.jpg"
,desc : "字玄德，东汉末年幽州涿郡涿县人"
}
,{
id : "a003"
,name : "武则天"
,gender : "F"
,birthday : new Date(624, 1, 17) //"624-02-17"
,fav : ["阅读","暗访"]
,country : "唐"
,imgPath : "c:/a003.jpg"
,desc : "名武曌，并州文水（今山西文水县东）人"
}
,{
id : "a004"
,name : "Shawn Zhai"
,gender : "M"
,birthday : new Date(1982, 9, 1)
,imgPath : "c:/a004.jpg"
,desc : "江苏南京"
}
];
$(document).ready(function(){
var tpls = [];

var cfg = {debug:true, dateFormat:"公元yyyy年MM月dd日"};

var tpl1 = $(".tpl1").tpl(d1, cfg); tpls[tpls.length] = tpl1;

var tpl2 = $(".tpl2").tpl(d2, cfg); tpls[tpls.length] = tpl2;

var tpl3 = $(".tpl3").tpl(d3, cfg); tpls[tpls.length] = tpl3;

var tpl4 = $(".tpl4").tpl(d4, cfg); tpls[tpls.length] = tpl4;

var tpl5 = $(".tpl5").tpl(d5, cfg); tpls[tpls.length] = tpl5;

var tpl6 = $(".tpl6").tpl(d6, cfg); tpls[tpls.length] = tpl6;

var tpl7 = $(".tpl7").tpl(d7, cfg); tpls[tpls.length] = tpl7;

$.each(tpls, function(i,n){
tpls[i].find("[jbind]").mouseover(function(e){
var jd = $(this);
var jbind = jd.attr("jbind");
var d = jd.data();
var ks = [];
for(var k in d){
ks[ks.length] = k;
}

if(ks.length === 0){
ks = "预计加载:[" + jbind + "], 实际未加载任何数据";
}else{
//ks = "预计加载:[" + jbind + "], 实际加载:[" + ks.join(",") + "]";
ks = "预计加载:[" + jbind + "], 实际加载:" + json2str(d, "_prt");
}
jd.attr("title", ks);
jd.addClass("box");

if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;

});
tpls[i].find("[jbind]").mouseout(function(e){
var jd = $(this);
jd.removeClass("box");

if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
});
});

});

function fnRenderGender(tpl, data, config){
if(data.v === "M"){
data.v = "男";
}else if(data.v === "F"){
data.v = "女";
}else{
data.v = "保密";
}
return data;
}

function fnRenderIndex(tpl, data, config){
$(this).append(data.v + 1);
return false;

}
function fnRenderIndexInput(tpl, data, config){
$(this).val(data.v + 1);
return false;

}
function fnView(jdom){
$(".tpl7View").tpl(jdom.data());
}

function json2str(o, exp) {
var arr = [];
var fmt = function(s) {
if (typeof s == 'object' && s != null) return json2str(s, exp);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
if(o.constructor == Array){
for (var i in o){
if(i === exp) continue;
arr.push(fmt(o[i]));
}
return '[' + arr.join(',') + ']';
}else{
for (var i in o){
if(i === exp) continue;
arr.push("'" + i + "':" + fmt(o[i]));
}
return '{' + arr.join(',') + '}';
}
}

var a=$("div:first").attr("aaaaaa");
</script>
</head>
<body>
<hr/>
测试数据1
<div>
<table>
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr class="tpl1">
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据2
<div class="tpl2">
<table jdata="data" jbind="data">
<thead>
<tr><th>姓名</th><th>工作</th></tr>
</thead>
<tbody>
<tr>
<td jdata="name"></td><td jdata="job"></td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据3
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>工作</th><th>性别</th></tr>
</thead>
<tbody>
<tr class="tpl3">
<td jdata="index" jbind="name,job,gender" jrender="fnRenderIndex"></td>
<td jdata="name" jbind="name,job,gender"></td>
<td jdata="job" jbind="name,job,gender"></td>
<td jdata="gender" jbind="name,job,gender" jrender="fnRenderGender"></td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据4
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl4">
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>月份</th><th>支出费用</th><th>描述</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td jdata="spend"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据5
<div>
<table>
<thead>
<tr><th>姓名</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl5">
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>月份</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill" jbind="bill">
<td jdata="index"></td>
<td jdata="month"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>条目</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrenderFn="fnRenderIndex"></td>
<td jdata="item"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据6
<div>
<table>
<thead>
<tr><th>分公司名称</th><th>账单</th></tr>
</thead>
<tbody>
<tr class="tpl6">
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th>序号</th><th>部门名称</th><th>详情</th></tr>
</thead>
<tbody>
<tr jdata="bill">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td class="pad0">

<table>
<thead>
<tr><th jbind="bill">序号</th><th>条目名称</th><th>支出费用</th><th>详情</th></tr>
</thead>
<colgroup>
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="50%" />
</colgroup>
<tbody>
<tr jdata="detail" jbind="detail">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="fee"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>
</div>

<hr/>
测试数据7
<div>
<table>
<thead>
<tr><th>序号</th><th>姓名</th><th>性别</th><th>生日</th><th>爱好</th><th>简介</th></tr>
</thead>
<tbody>
<tr class="tpl7" jbind="index,name,gender,birthday,fav,country,desc" onclick="fnView($(this))">
<td jdata="index" jrender="fnRenderIndex"></td>
<td jdata="name"></td>
<td jdata="gender" jrender="fnRenderGender"></td>
<td jdata="birthday"></td>
<td jdata="fav"></td>
<td jdata="desc"></td>
</tr>
</tbody>
</table>
<div>
<form>
<table>
<tbody class="tpl7View">
<tr>
<td>序号</td>
<td><input jdata="index" jrender="fnRenderIndexInput" value=""/></td>
</tr>
<tr>
<td>姓名</td>
<td><input jdata="name" value=""/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" jdata="gender" value="M"/>男
<input type="radio" jdata="gender" value="F"/>女
</td>
</tr>
<tr>
<td>生日</td>
<td><input jdata="birthday" value=""/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" jdata="fav" value="登山"/>登山
<input type="checkbox" jdata="fav" value="篮球"/>篮球
<input type="checkbox" jdata="fav" value="阅读"/>阅读
<input type="checkbox" jdata="fav" value="美女"/>美女
<input type="checkbox" jdata="fav" value="打架"/>打架
<input type="checkbox" jdata="fav" value="暗访"/>暗访
</td>
</tr>
<tr>
<td>朝代</td>
<td>
<select jdata="country">
<option value="">请选择</option>
<option value="魏">魏国</option>
<option value="蜀">蜀国</option>
<option value="唐">唐朝</option>
</select>
</td>
</tr>
<tr>
<td>简介</td>
<td>
<textarea jdata="desc"></textarea>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<br/><br/><br/><br/><br/>
</body>
</html>

template模板，Jquery插件[demo]

猜你喜欢