layui 表格組件中實現動態增加數據行的一種方式

        layui 以界面簡潔美觀而吸引了不少開發人員，在使用table組件時，需要能編輯表格內容，動態增加數據行。編輯功能組件已支持。但動態增加數據行好像沒有支持，網上提供的方式是，獲得組件的數據集再加入一個空記錄或默認記錄，以這個新的數據集作爲表格組件的數據源重新渲染表格。

        方法是行得通，但畢竟不是原生支持，有侷限。因爲我用表格組件是來實現在線設計數據庫表的，需要動態增加數據行，編輯數據行，如果採用上面的方式就算是刷新，編輯的內容就會丟掉，不符合需求。看了下表格模塊的源碼，好像單靠擴展還不行，並且要擴展還需要學習下，擴展的語法。直接改源碼來得更快些。

         源碼中有獲得後臺數據後進行渲染的方法，就以此方法爲基礎進行提取，單獨新建個方法：addData.原渲染方法在727行：

        ,render = function(){ //後續性能提升的重點

          var thisCheckedRowIndex;

         ....

        以此方法爲基礎，創建一個新的方法，每次增加一行記錄.

       

Class.prototype.addData=function(record){
	  record=record||{};  //**********1 無參數時，默認增加空白行
	  var that = this
	  ,curr=that.page
	  ,options = that.config;
	  var trs = []
	    ,trs_fixed = []
	    ,trs_fixed_r = [];
	  var tds = [], tds_fixed = [], tds_fixed_r = []
      ,numbers = 1 + options.limit*(curr - 1) + 1; //序號
	  
	  that.key = options.id || options.index;
	  if(!table.cache[that.key]){  //**********2 表格打開時如果沒有加載到數據，則創建數據緩存對象，避免後面無法增加新數據
		  table.cache[that.key]=[];
	  }
	  var i1=table.cache[that.key].length; //********** 3 行索引,加載了數據且數據不爲空纔會設置 table.cache[that.key]，設置爲已有數據記錄數
     
	  record[table.config.indexName] = i1; //數據中加入行索引屬性
	  record["LAY_RECORD_STATUS"] = 1;  //********** 4 表明是前臺生成的，刪除時可以直接刪除  0:後臺獲取的原數據，1：客戶端增加的，-1：等待刪除的；2：已修改的；
	  that.eachCols(function(i3, item3){
          var field = item3.field || i3
          ,key = options.index + '-' + item3.key
          ,content = record[field];
          
          if(content === undefined || content === null) content = '';
          if(item3.colGroup) return;
          
          //td內容
          var td = ['<td data-field="'+ field +'" data-key="'+ key +'" '+ function(){ //追加各種屬性
            var attr = [];
            if(item3.edit) attr.push('data-edit="'+ item3.edit +'"'); //是否允許單元格編輯
            if(item3.align) attr.push('align="'+ item3.align +'"'); //對齊方式
            if(item3.templet) attr.push('data-content="'+ content +'"'); //自定義模板
            if(item3.toolbar) attr.push('data-off="true"'); //行工具列關閉單元格事件
            if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定義事件
            if(item3.style) attr.push('style="'+ item3.style +'"'); //自定義樣式
            if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //單元格最小寬度
            return attr.join(' ');
          }() +' class="'+ function(){ //追加樣式
            var classNames = [];
            if(item3.hide) classNames.push(HIDE); //插入隱藏列樣式
            if(!item3.field) classNames.push('layui-table-col-special'); //插入特殊列樣式
            return classNames.join(' ');
          }() +'">'
            ,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回對應的CSS類標識
              return item3.type === 'normal' ? key 
              : (key + ' laytable-cell-' + item3.type);
            }() +'">' + function(){
              var tplData = $.extend(true, {
                LAY_INDEX: numbers
              }, record)
              ,checkName = table.config.checkName;
              
              //渲染不同風格的列
              switch(item3.type){
                case 'checkbox':
                  return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
                    //如果是全選
                    if(item3[checkName]){
                      item1[checkName] = item3[checkName];
                      return item3[checkName] ? 'checked' : '';
                    }
                    return tplData[checkName] ? 'checked' : '';
                  }() +'>';
                break;
                case 'radio':
                  if(tplData[checkName]){
                    thisCheckedRowIndex = i1;
                  }
                  return '<input type="radio" name="layTableRadio_'+ options.index +'" '
                  + (tplData[checkName] ? 'checked' : '') +' lay-type="layTableRadio">';
                break;
                case 'numbers':
                  return numbers;
                break;
              };
              
              //解析工具列模板
              if(item3.toolbar){
                return laytpl($(item3.toolbar).html()||'').render(tplData);
              }
              return item3.templet ? function(){
                return typeof item3.templet === 'function' 
                  ? item3.templet(tplData)
                : laytpl($(item3.templet).html() || String(content)).render(tplData) 
              }() : content;
            }()
          ,'</div></td>'].join('');
          
          tds.push(td);
          if(item3.fixed && item3.fixed !== 'right') tds_fixed.push(td);
          if(item3.fixed === 'right') tds_fixed_r.push(td);
        });
	  trs.push('<tr data-index="'+ i1 +'">'+ tds.join('') + '</tr>');
      trs_fixed.push('<tr data-index="'+ i1 +'">'+ tds_fixed.join('') + '</tr>');
      trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
      if(that.layMain.find('tbody').length==0){ //********** 5 表格沒有加載到數據時，不會有<table><tbody>節點,該節點使用原有的模板渲染：TPL_BODY，入參必須有data屬性，模板中會用到
    	  that.layMain.html($(laytpl(TPL_BODY).render({data:{}})));
      }
      that.layMain.find('tbody').append(trs.join(''));
      that.layFixLeft.find('tbody').append(trs_fixed.join(''));
      that.layFixRight.find('tbody').append(trs_fixed_r.join(''));
      that.renderForm();
      //typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex);
      that.syncCheckAll();
      
      //滾動條補丁
      that.haveInit ? that.scrollPatch() : setTimeout(function(){
        that.scrollPatch();
      }, 50);
      that.haveInit = true;
      
      layer.close(that.tipsIndex);
      
      //同步表頭父列的相關值
      options.HAS_SET_COLS_PATCH || that.setColsPatch();
      options.HAS_SET_COLS_PATCH = true;
      
     
      table.cache[that.key].push(record); //********** 5 最後將新增的記錄加入數據緩存中
  };

註釋中標記有：//***********  的就是需要調整的地方。 其中 第4處 可以不要（用於表格其他增強功能的，layui的表格組件在編輯功能方面還有不足）       

在54行表格實例中增加對外接口：

       ,addData:function(record){ 
          that.addData.call(that,record);
       }

       這樣就可以使用了，但只能以表格實例對象調用，不能用table.addData方式調用。如需要還要在table全局接口中註冊

      實現效果：