构建重复dom元素(原创)

Html

Css

.ac-main-table {
	table-layout:fixed;
	width:100%;
	font-size:14px;
	color:#000;
}
.ac-main-table th {
	line-height:30px;
	height:30px;
	background-color:#f5f5f5;
	text-align:center;
	border:1px solid #ccc;
}
.ac-main-table td {
	padding:10px;
	line-height:22px;
	text-align:center;
	border:1px solid #ccc;
}
.ac-main-table td>p {
	display:inline-block;
	text-align:left;
}

/**
 *
 *  created by lero
 *  重复dom构建
 *  2018.6.28
 *
 * */

(function(window) {

/**
     * option 参数
     *
     * bucket： css选择器， 如果提供，生成完重复dom后，会将这些dom放入bucket指定的容器
     * template: css选择器， 存放模板dom的父节点，用于获取重复dom模板
     * data：  数组， 根据data遍历，将对应的数据填入repeatDom
     *
     * keyDir: 对象， 模板中的key与正式json数据中的key的查询字典
     * default: 对象， 如果键对应的值是固定的，则可传默认值
     *
     * */

'use strict';

},
        fillBucket: function() {
            var dom = null,
                style = '';
            if (!!this.bucket) {
                dom = document.querySelector(this.bucket);
                if (dom) {
                    style = dom.style.display;
                    dom.style.display = 'none';
                    dom.innerHTML = this.html;
                    dom.style.display = style;
                }

}
        },
        mkRegStr: function() {
            var str = '(';
            this.keyBackup.map(function(item) {
                str += item + '|';
            });
            return str.slice(0, str.length - 1) + ')';
        },
        getVal: function(keyStr, object) {
            var obj = object;
            !!keyStr ? this.default[keyStr] ? obj = this.default[keyStr] : keyStr.split('.').map(function(item) {
                if (obj.hasOwnProperty(item)) {
                    obj = obj[item];
                }
            }) : obj = '';
            return obj;
        },
        mkDir: function(object) {
            var obj = {},
                that = this;

this.keyList.map(function(item) {
                obj["#" + item + "#"] = that.getVal(that.keyDir[item], object)
            });
            return obj;
        },
        listData: function() {
            var reg = new RegExp(this.mkRegStr(), 'g'),
                that = this;
            that.html = '';
            this.data.map(function(item) {
                that.html += that.repeatStr.replace(reg, function($0, $1) {
                    return that.mkDir(item)[$1];
                });
            });
        },
        findKey: function() {
            this.keyBackup = this.repeatStr.match(/\#\w+\#/g);
            return this.keyBackup.map(function(item) {
                return item.replace(/\#/g, '');
            });
        },
        getDomStr: function(cssSelector) {
            return document.querySelector(cssSelector).innerHTML;
        },
        valid: function() {
            var canPass = true;
            (!this.dom || !this.data || !this.keyDir || !Array.isArray(this.data) || !this.data.length) && (canPass = false);
            !canPass && console.error('提供给 Srepeat 的参数有误');
            return canPass
        }
    };

window.Srepeat = Srepeat;

}(window));

(function() {

// your code here

var data = [{
        "number": 1,
        "name": "第一行重复元素",
        "href": "http://xxxx",
        "letter": {
            "abc": "di yi hang"
        }
    }, {
        "number": 2,
        "href": "http://xxxx",
        "name": "第二行重复元素",
        "letter": {
            "abc": "di er hang"
        }
    }];

new Srepeat({
        bucket: '#J-pai-search-data',
        data: data,
        template: '#J-my-template-demo',
        keyDir: {
            "href": "href",
            "name": "name",
            "number": "number",
            "letter": "letter.abc",
            "key": "key"
        },
        defaultVal: {
            href: "javascript:void(0);"
        }
    }).init();
}())

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

构建重复dom元素(原创)

代码描述：根据数组数据动态构建json

简单构建重复dom 的js插件
本插件不依赖jquery功能是根据你提供的数组数据进行遍历，构建出只是结构一致，数据不同的重复元素，功能类似 vue 的v-for，angular 的ng - repeatie9 + 写法如下 html: (这个是模板，两个 '#'之间的是要替换数据的部分)
<table class="ac-main-table layer-table">     <thead>         <tr>             <th width="130px">编号</th>             <th width="130px">名称</th>             <th width="130px">拼音</th>         </tr>     </thead>     <tbody id="J-pai-search-data">     </tbody> </table> <script id="J-my-template-demo" type="text/html">     <tr>         <td><a href="#href#" data-name="#name#" data-number="#number#" class="ac-item-name J-item-name">#number#</a></td>         <td>#name#</td>         <td>#letter#</td>     </tr> </script>
js:
new srepeat({         bucket: '#j-pai-search-data',         data: data,         template: '#j-my-template-demo',         keydir: {             "href": "href",             "name": "name",             "number": "number",             "letter": "letter.abc",             "key": "key"         },         defaultval: {             href: "javascriptt:void(0);"         } }).init();
js 参数说明：
/** * option 参数 * * bucket： css选择器，如果提供，生成完重复dom后，会将这些dom放入bucket指定的容器 * template: css选择器，存放模板dom的父节点，用于获取重复dom模板 * data：数组，根据data遍历，将对应的数据填入repeatdom * * keydir: 对象，模板中的key与正式json数据中的key的查询字典 * defaultval: 对象，如果键对应的值是固定的，则可传默认值,优先级大于keydir * * */
例子提供的假数据：
var data = [{     "number": 1,     "name": "第一行重复元素",     "href": "http://456.com.cn",     "letter": {         "abc": "di yi hang"     } }, {     "number": 2,     "href": "http://123.com.cn",     "name": "第二行重复元素",     "letter": {         "abc": "di er hang"     } }];

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

慕牧木

相关代码

构建重复dom元素(原创)

最新