拓展jquery js动态添加html代码 初始化数据

  1 /**
 * 新增数据筛选
 */
(function () {
    $.filterEvent = function(options){
        var _this = this;
        var defaults = {    
            elId: "",
            tableId:"",
            data:{}
        };
        var options = $.extend(defaults, options);
        var $container = $(options.elId);
        
        var html = `<div class="col-xs-12" style="position: relative;">
                        <div class="pull-right" style=" 10%;padding-right: 1.2rem;position: absolute;right: 0;top: 0;margin: auto;">
                            <a id="deleted#key#" class="btn-link pull-right">
                                <i class="fa fa-times-circle"></i>
                            </a>
                        </div>
                        <div class="input-group m-b">
                            <span class="input-group-addon">分组标题</span>
                            <input class="form-control" id="filterName#key#">
                        </div>
                        <div class="input-group m-b">
                            <span class="input-group-addon">第一级字段</span>
                            <input class="form-control" id="firstFilterField#key#" placeholder="选择字段" readonly="readonly">
                            <span class="input-group-addon"> 
                                <a onclick="select_parent_field('firstFilterField#key#');">
                                    <i class="fa fa-chain"></i>
                                    选择
                                </a>
                            </span>
                        </div>
                        <div class="input-group m-b">
                            <span class="input-group-addon">第二级字段</span>
                            <input class="form-control" id="secondFilterField#key#" placeholder="选择字段" readonly="readonly">
                            <span class="input-group-addon">
                                <a onclick="select_parent_field('secondFilterField#key#');">
                                    <i class="fa fa-chain"></i>
                                    选择
                                </a>
                            </span>
                        </div>
                        <div class="input-group m-b">
                            <span class="input-group-addon">第三级字段</span>
                            <input class="form-control" id="thirdFilterField#key#" placeholder="选择字段" readonly="readonly">
                            <span class="input-group-addon">
                                <a onclick="select_parent_field('thirdFilterField#key#');">
                                    <i class="fa fa-chain"></i>
                                    选择
                                </a>
                            </span>
                        </div>
                    </div>`;
        /**
         * 添加节点
         */
        this.newFilterEvent = function(rowJson){
            var key = this.newGuid();
            var isAdd = false;
            if(rowJson == undefined || rowJson == null){
                rowJson = {
                    'filterName' : '',
                    'firstFilterField' : '',
                    'secondFilterField' : '',
                    'thirdFilterField' : ''
                };
                isAdd = true;
            }
            options.data[key] = rowJson;
            
            var _this = this;
            $html = $(html.replace(/#key#/g, key));
            $container.append($html);
            
            
            
            //绑定事件
            $html.find("#filterName"+key).change(function(){
                var val = $(this).val();
                rowJson.filterName = val;
                options.data[key] = rowJson;
            });
            $html.find("#firstFilterField"+key).change(function(){
                var val = $(this).val();
                rowJson.firstFilterField = val;
                options.data[key] = rowJson;
            });
            $html.find("#secondFilterField"+key).change(function(){
                var val = $(this).val();
                rowJson.secondFilterField = val;
                options.data[key] = rowJson;
            });
            $html.find("#thirdFilterField"+key).change(function(){
                var val = $(this).val();
                rowJson.thirdFilterField = val;
                options.data[key] = rowJson;
            });
            $html.find("#deleted"+key).click(function(){
                delete options.data[key];
                $(this).parent().parent().remove();
            });
            
            //初始化数据
            if(rowJson.filterName != ''){
                $html.find("#filterName"+key).val(rowJson.filterName);
            }
            if(rowJson.firstFilterField != ''){
                $html.find("#firstFilterField"+key).val(rowJson.firstFilterField);
            }
            if(rowJson.secondFilterField != ''){
                $html.find("#secondFilterField"+key).val(rowJson.secondFilterField);
            }
            if(rowJson.thirdFilterField != ''){
                $html.find("#thirdFilterField"+key).val(rowJson.thirdFilterField);
            }
        };
        
        this.getData = function(){
            var eventData = [];
            for ( var k in options.data) {
                var row = options.data[k];
                eventData.push(row);
            }
            return eventData;
        };
        
        this.initData = function(data){
            if(data == undefined || data == null){
                return;
            }
            for (var k in data) {
                var row = data[k];
                this.newFilterEvent(row);
            }
        };
        
        this.newGuid = function () {
            var guid = "";
            for (var i = 1; i <= 32; i++) {
                var n = Math.floor(Math.random() * 16.0).toString(16);
                guid += n;
               // if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
            }
            return guid;
        };
        
    };
})(jQuery);

 

jquery动态的给div下增加Dom节点：

如图所示：

==》点击新增配置：

在elId下增加如图所示的div，初始化。右边的❌可以删除当前新增的div。