`
zhaixp1949
  • 浏览: 7616 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

template模板,Jquery插件[js]

 
阅读更多
/**
*data JSON data, example:
*
* . [{a:""},{b:""}]
* . {a:""}
* . {a:"", b:""}
* . {a:{b:""}}
* . {a:{b:[{},{}]}}
*
*/
$.fn.extend({ tpl : function(data, config){
/** 入口函数
*
*d = {
*     v:v1, //object, array, string, number, date,
*     k:k1, //key
*     t:t1, //type enum [o:object, a:array, s:string, n:number, d:date]
*     i:i1, //index
*     pv:pv1  //parent value
*     pk:pk1, //parent key
*    }
*
*/
function _fn(jml, d, c){

_fbd(jml, d, c);
var jm = _fml(jml, d, c);

if(d.t === "o"){//object
_fno(jm, d, c);
}else if(d.t === "a"){//array
_fna(jm, d, c);
}else if(d.t === "d"){//date
_fnd(jm, d, c);
}else if(d.t === "s"){//string
_fns(jm, d, c);
}else if(d.t === "n"){//number
_fnn(jm, d, c);
}else if(d.t === "b"){//boolean
_fnb(jm, d, c);
}
_fbd(jml, d, c);
}

/** object
*
*
*
*
*/
function _fno(jml, d, c){
var v = d.v;
//call object, array first
for(var k in v){
var t = $.type(v[k]).substring(0,1);
if(t === "o" || t === "a"){
var d1 = _fpd(v[k], k, d.i, v, d.k);//
_fn(jml, d1, c);
}
}

//call except object, array
for(var k in v){
var t = $.type(v[k]).substring(0,1);
if(t !== "o" && t !== "a"){
var d1 = _fpd(v[k], k, d.i, v, d.k);//
_fn(jml, d1, c);
}
}
}

/** array
*
*
*
*
*/
function _fna(jml, d, c){
var v = d.v;
var len = v.length;
var nx = false;
//call object, array first
for(var i = 0; i < len; i++){
var t = $.type(v[i]).substring(0,1);
if(t === "o"){
if(nx){
var jc; //clone from tpl
if(d.k !== null){
jc = tpl.find("[jdata=" + d.k + "]").clone();
jc.attr("clone", d.k);
}else{
jc = tpl.clone();
jc.attr("clone", 0);
}
jc.insertAfter(jml);
jml = jc;
}

var d1 = _fpd(v[i], d.k ? d.k : i, i, v, d.k);//

_fn(jml, d1, c);

d1 = _fpd(i, c.index, i, v, d.k);//index 伪列
_fn(jml, d1, c);

nx = true;

}else if(t === "a"){
throw "ERROR:Array element still is an array.数组中的元素不能还是数组.";
}
//TODO 值类型的数据, 例如: ["篮球","跑步"]
else if(t === "d" || t === "s" || t === "n" || t === "b"){
var d1 = _fpd(v[i], d.k, i, d.p, d.pk);//
d.t = t;
_fn(jml, d, c);
break;
}


}
}

function _fnd(jml, d, c){
_fnv(jml.find("[jdata=" + d.k + "]"), d, c);
_fnv(jml.filter("[jdata=" + d.k + "]"), d, c);
}

function _fns(jml, d, c){
_fnv(jml.find("[jdata=" + d.k + "]"), d, c);
_fnv(jml.filter("[jdata=" + d.k + "]"), d, c);
}

function _fnn(jml, d, c){
_fnv(jml.find("[jdata=" + d.k + "]"), d, c);
_fnv(jml.filter("[jdata=" + d.k + "]"), d, c);
}

function _fnv(jml, d, c){
jml.each(function(){
var jd = $(this);
//call before render function
var v = _fbr(jd, d, c);
var t = $.type(v).substring(0,1);
if(t === "o"){
if(v[v] === undefined || v[k] === undefined || v[i] === undefined || v[pv] === undefined || v[pk] === undefined){
throw "ERROR:Unaceptable JSON object";
}
d = v;
}

//call render function 如果render函数返回false,则不调用默认的render方法
v = _fr(jd, d, c);
t = $.type(v).substring(0,1);
if(t === "o"){
if(v[v] === undefined || v[k] === undefined || v[i] === undefined || v[pv] === undefined || v[pk] === undefined){
throw "ERROR:Unaceptable JSON object";
}
d = v;
v = true;
}else{
if(t !== "b"){
v = true;
}
}
if(v){
var n = jd[0].tagName;
var cl = cv[n];
if(cl === undefined){
cl = cv["c"];//common function
}
cl(jd, d, c);
}

//call after render function
v = _far(jd, d, c);
t = $.type(v).substring(0,1);
if(t === "o"){
if(v[v] === undefined || v[k] === undefined || v[i] === undefined || v[pv] === undefined || v[pk] === undefined){
throw "ERROR:Unaceptable JSON object";
}
d = v;
}
var jdata = jd.attr("jdata");
jd.removeAttr("jdata");
jd.attr("jdat", jdata);
});
}


/** bind data
*
*
*/
function _fbd(jml, d, c){
if(!d.k){
return;
}

var m = jml.filter("[jbind*=" + d.k + "]");
_$m(m, d);
m = jml.find("[jbind*=" + d.k + "]");
_$m(m, d);
}

function _$m(m, d){
if(m.length >= 1){
m.each(function(){
var jd = $(this);
var a = jd.attr("jbind").split(",");
var tt = t(d.v);
var l = jd.find("[jdata=" + d.k + "]").length;
var b = [];
for(var i = 0; i < a.length; i++){
if(a[i] === d.k){
if("a" === t(d.v)){
if(l >= 1){
if(jd.data(d.k) === undefined){
jd.data(d.k, d.v);
}else{
b[b.length] = a[i];
}
}else{
b[b.length] = a[i];
}
}else{
if(jd.data(d.k) === undefined){
jd.data(d.k, d.v);
}
}

}else{
b[b.length] = a[i];
}
}

if(b.length >= 1){
jd.attr("jbind", b.join(","));
}else{
jd.removeAttr("jbind");
}

var dx = jd.data();
var kx = [];
for(var k in dx){
kx[kx.length] = k;
}
if(kx.length >= 1){
jd.attr("jbin", kx.join(","));
}
});
}
}
/** shrink template
*
*
*/
function _fml(jml, d, c){
if(d.k){
var m = jml.find("[jdata=" + d.k + "]");
if(m.length >= 1){
return m;
}
}
return jml;
}

/** package 封装数据
*
*
*/
function _fpd(v, k, i, pv, pk){
var c = t(v);
return {v:v, k:k, t:c, i:i, pv:pv, pk:pk};
}

function t(d){
return $.type(d).substring(0,1);
}
/** before render
* attr: beforeRender
* return true|false
*/
function _fbr(jml, d, c){
return _fcf(jml, d, c, "jbeforeRender", "jdata");
}

/** render
* return true|false
*/
function _fr(jml, d, c){

return _fcf(jml, d, c, "jrender", "jdata");
}

/** after render
* return true|false
*/
function _far(jml, d, c){

return _fcf(jml, d, c, "jafterRender", "jdat");
}

/** call function
*
*
*
*/
function _fcf(jml, d, c, fn, w){
if(!d.k){
return true;
}
var b = jml.filter("[" + w + "=" + d.k + "][" + fn + "]");
var a = jml.find("[" + w + "=" + d.k + "][" + fn + "]");

var x = g(jml, d, c, b, fn);
var y = g(jml, d, c, b, fn);

return x && y;
}

function g(jml, d, c, b, fn){
var r = true;
b.each(function(i){
var jd = $(this);//jdom
var a = jd.attr(fn);
if(a !== undefined){
var v = eval(a).apply(jd, [jml, d, c]);
var u = t(v);
if(t === "o"){
if(v["v"] === undefined || v["k"] === undefined || v["i"] === undefined || v["pv"] === undefined || v["pk"] === undefined){
throw "ERROR:Unaceptable JSON object. " + a + " function return an unacceptable object.";
}
d = v;
}else if(u === "b"){
if(!v && r){
r = v;
}
}
jd.attr(fn.substring(0, fn.length - 1), a);
jd.removeAttr(fn);
}
});
return r;
}

function e(jml, m, c){
jml.filter("[jdata]").each(function(){
var jd = $(this);
var k = jd.attr("jdata");

var d = _fpd("", k, null, null, null);
_fn(jd, d, c);
});
jml.find("[jdata]").each(function(){
var jd = $(this);
var k = jd.attr("jdata");

var d = _fpd("", k, null, null, null);
_fn(jd, d, c);
});

jml.filter("[jbind]").each(function(){$(this).attr("jfailBind", $(this).attr("jbind"));$(this).removeAttr("jbind")});
jml.find("[jbind]").each(function(){$(this).attr("jfailBind", $(this).attr("jbind"));$(this).removeAttr("jbind")});

jml.filter("[jafterRender][jbin]:not([jbind])").each(function(){
var jd = $(this);
var a = jd.attr("jafterRender");
var d = jd.data();
var v = eval(a).apply(jd, [jd, d, c]);
});
for(var k in m){
ec(jml, m[k], k);
}

if(c.lastChildCss){//fix IE doesn't support last-child
jml.find("td > table").each(function(){
var jd = $(this);
if(c.lastChildCss.lastRowChildCss){
jd.find("tr:last-child > td").css(c.lastChildCss.lastRowChildCss);
}
if(c.lastChildCss.lastColChildCss){
jd.find("tr > td:last-child, tr > th:last-child").css(c.lastChildCss.lastColChildCss);
}
});
}
}

/**
* @param jml
* @param g attribute new
* @param m attribute old
*
*/
function ec(jml, g, m){
jml.filter("[" + m + "]").each(function(){
$(this).attr(g, $(this).attr(m));
$(this).removeAttr(m);
});
jml.find("[" + m + "]").each(function(){
$(this).attr(g, $(this).attr(m));
$(this).removeAttr(m);
});
}

var cv = {
c : function(jd, d, c){
if(c.debug){
console.log("fill " + d.v + " to :: " + jd[0].outerHTML);
}
var jrp = jd.attr("jreplace");
var v = d.v;
d.t = t(d.v);
if(d.t === "d"){
v = v.format(c.dateFormat);
}else if(d.t === "a"){
v = v.join(c.joinChar);
}
if(jrp !== undefined){
jd.find(jrp).repalceWith(v);
}else{
jd.append(v);
}

}
,IMG : function(jd, d, c){
if(c.debug){
console.log("fill " + d.v + " to :: " + jd[0].outerHTML);
}
jd.attr("src", d.v);
}
,INPUT : function(jd, d, c){
//type = hidden, text, file, radio, checkbox, button
var p = jd.parent().parent();

if(jd.is(":radio")){

if(jd.attr("name") === undefined){
//bind group click
var g = p.find("input:radio[jdata=" + d.k + "]:not([name]),input:radio[jdat=" + d.k + "]:not([name])");

if(g.length >= 2){
if(c.debug){
console.log("bind group click to radio, " + g.length + " radios[input:radio[jdata=" + d.k + "]:not([name])] binded click event.");
}
g.click(function(){
var s = $(this);
g.each(function(){
if($(this).is(s)){
$(this).prop("checked", true);
}else{
$(this).prop("checked", false);
}
});
});
}
}

var jdr = p.find("input:radio[jdata=" + d.k + "][value=" + d.v + "],input:radio[jdat=" + d.k + "][value=" + d.v + "]");
if(c.debug){
console.log("fill " + d.v + " to :: " + jdr[0].outerHTML);
}
g.each(function(){
if($(this).is(jdr)){
$(this).prop("checked", true);
}else{
$(this).prop("checked", false);
}
});

}else if(jd.is(":checkbox")){
var g = p.find("input:checkbox[jdata=" + d.k + "],input:checkbox[jdat=" + d.k + "]");
var v = d.v;
if(t(v) === "a"){
g.each(function(){
var h = false;
for(var x = 0; x < v.length; x++){
if($(this).val() === v[x]){
h = true;
break;
}
}
if(h){
$(this).prop("checked", true);
}else{
$(this).prop("checked", false);
}
});
}else{
if(jd.val() == d.v){
jd.prop("checked", true);
}else{
jd.prop("checked", false);
}
}

}else{
var v = d.v;
if(d.t === "d"){
v = v.format(c.dateFormat);
}
jd.val(v);
}
}
,SELECT : function(jd, d, c){
if(c.debug){
console.log("fill " + d + " to :: " + jd[0].outerHTML);
}
var v = d.v;
if(d.t === "d"){
v = v.format(c.dateFormat);
}
jd.val(v);
}
,TEXTAREA : function(jd, d, c){
if(c.debug){
console.log("fill " + d + " to :: " + jd[0].outerHTML);
}
var v = d.v;
if(d.t === "d"){
v = v.format(c.dateFormat);
}
jd.val(d.v);
}
};

var am = {jdat : "jdata", jbin : "jbind"};
var em = {jbeforeRende : "jbeforeRender", jrende : "jrender", jafterRende : "jafterRender"};
am = $.extend(am, em);

var jml = $($(this)[0]);
var tpl = jml.clone();
jml.attr("clone", "self");

var ia = $.type(data) === "array";
var da = _fpd(data, null, null, null, null);
var co = {debug : false, index : "index", dateFormat : "yyyy-MM-dd hh:mm:ss", joinChar:","
,lastChildCss : {lastRowChildCss:{"border-bottom" : "0px"}, lastColChildCss:{"border-right" : "0px"}}
};
co = $.extend(co, config);
_fn(jml, da, co);
if(ia){
jml = jml.parent().children().filter("[clone]");
}

e(jml, am, co);

return jml;
}});
// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
// format author: meizz
Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
分享到:
评论

相关推荐

    基于jQuery开发的javascript模板引擎-jTemplates

    jTemplates作为一款jQuery插件,提供了一种高效、简洁的方式来处理动态数据和HTML模板的结合,简化了前端开发工作。通过理解其核心原理和实践示例,开发者可以更好地利用jTemplates提升Web应用的交互性和性能。

    运用Jquery插件Json2Template写的简单项目

    在本文中,我们将深入探讨如何使用Jquery插件Json2Template进行项目开发。Json2Template是一款基于jQuery的库,它允许开发者将JSON数据动态渲染为HTML模板,极大地提高了前端界面的数据展示效率。在学习和应用这个...

    jquery template下载

    jquery template是一个很实用的插件。可以根据HTML模板,绑定上对应的数据(可以对这些数据进行格式化操作,如全部大写,全部小写等),输出或添加到页面上。我们可以经常看到,在一个ajax成功之后的处理,往往要用...

    artTemplate.js,前端模板js引用,jquery静态模板

    描述中提到"artTemplate模板引擎是渲染UI界面的一个js文件,artTemplate.js加快开发速度",进一步强调了`artTemplate.js`的核心作用——渲染用户界面(UI)。通过使用模板引擎,开发者可以将数据和视图分离,使得...

    前端插件art-template模板引擎art-template-test示例代码

    `art-template`是一个轻量级、高性能的JavaScript模板引擎,它旨在解决HTML模板编译问题,提高页面渲染速度,同时降低前后端耦合度。它的设计目标是简洁、易用,支持浏览器环境和Node.js环境,适用于各种类型的Web...

    jquery插件-select2

    **jQuery插件Select2详解** Select2是一款基于jQuery的下拉选择框插件,它极大地扩展了原生HTML `&lt;select&gt;` 元素的功能,提供了更丰富的用户体验和更强的可定制性。这款插件广泛应用于网页开发中,尤其适用于需要...

    jquery前台模板demo(很实用的)

    - Underscore.js的_.template方法:提供了基本的模板功能。 **七、实战应用** "jQuery前台模板demo"包含了一些实际的示例,展示了如何在实际项目中使用jQuery和模板。解压后,你可以查看代码,学习如何结合jQuery...

    jquery插件-autocomplete

    然后,你可以通过CDN或者本地文件方式引入jQuery Autocomplete插件的JavaScript和CSS文件。通常,这两个文件会命名为`jquery.autocomplete.js`和`jquery.autocomplete.css`,对应压缩包中的`autoComplete`文件。 ``...

    前端项目-jquery.loadtemplate.zip

    `jquery.loadtemplate` 是一个基于 jQuery 的插件,专门用于加载和使用模板,使得在Web应用中动态渲染内容变得更加便捷。这个压缩包文件“frontend-project-jquery.loadtemplate.zip”包含了一个名为“jquery-...

    jquery-plugin-template:用于创建jQuery插件的模板。 基于jQuery-boilerplate,内置测试开始

    jQuery插件模板 一个基于jQuery插件模板和George Paterson的的测试配置。 用法 包括jQuery: &lt; script src =" http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js " &gt; &lt;/ script &gt; ...

    jquery.tmpl JQuery模板插件

    需要注意的是,JQuery.tmpl模板插件虽然方便易用,但它在最新版的jQuery中并不是默认包含的,因为jQuery核心团队推荐使用其他模板解决方案,如Mustache或者Handlebars。这并不影响JQuery.tmpl本身的使用,但如果需要...

    兼容bootstrap的jQuery分页插件jquery.tabulation.js

    **jQuery分页插件——jquery.tabulation.js** 在网页开发中,当数据量过大时,分页是一个必不可少的功能,它可以有效提升用户体验,避免一次性加载大量数据导致页面响应速度下降。`jquery.tabulation.js`就是这样一...

    jquery cxSlide 焦点图轮换插件

    同时,由于基于jQuery构建,它能很好地与其他jQuery插件协同工作,方便地集成到现有项目中。 总结,jQuery cxSlide是一款强大且灵活的焦点图轮换插件,它的简洁代码、丰富配置和自定义模板等功能使得它在网页设计中...

    jquery插件集合01(包含10个)

    本资源是一个包含10个流行jQuery插件或模板的集合,对于网页开发者来说,这些工具能极大地提升网站的交互性和用户体验。jQuery库以其简洁的API和强大的功能,已经成为前端开发中不可或缺的一部分。以下是每个子文件...

    jquery插件 autoComboBox .rar

    《jQuery插件autoComboBox深度解析及应用》 在Web开发领域,jQuery库以其简洁的API和强大的功能,深受开发者喜爱。而jQuery插件autoComboBox,则是这个生态系统中的一个亮点,它为网页表单输入提供了智能化的自动...

    jquery-template-plugin:一个简单的jQuery插件,它使用模板和传递的json对象生成动态html内容

    **jQuery Template Plugin** jQuery Template Plugin 是一个用于生成动态...虽然现在有更现代的解决方案如 Handlebars 和 Vue.js,但jQuery Template Plugin仍是一个实用的工具,尤其是对于那些已经使用jQuery的项目。

    jquery.tmpl.js

    jQuery tmpl.js是jQuery的一个插件,它提供了一种简单而强大的模板系统,使得动态生成HTML内容变得轻而易举。在本文中,我们将深入探讨jQuery tmpl.js的核心功能、语法特点以及实际应用场景。 一、jQuery tmpl.js...

    前端js模板引擎artTemplate视频教程.zip

    6. **独立运行与插件支持**:ArtTemplate可以脱离其他库独立运行,同时也提供了一些插件,如jQuery插件,方便在已有项目中集成。 在学习ArtTemplate的过程中,你将掌握如何创建模板,如何将模板与数据结合,如何在...

    jquery-jsrender.js 下载

    `jQuery JSRender` 是一款高效且功能强大的JavaScript模板引擎,它是jQuery插件家族的一员,专为构建动态数据驱动的Web界面而设计。该库允许开发者通过简洁易读的语法创建复杂的HTML模板,从而在不涉及大量DOM操作的...

Global site tag (gtag.js) - Google Analytics