拓展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="width: 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。