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 = [''
            ,'
' + function(){ var tplData = $.extend(true, { LAY_INDEX: numbers }, record) ,checkName = table.config.checkName; //渲染不同风格的列 switch(item3.type){ case 'checkbox': return ''; break; case 'radio': if(tplData[checkName]){ thisCheckedRowIndex = i1; } return ''; 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; }() ,'
'].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(''+ tds.join('') + ''); trs_fixed.push(''+ tds_fixed.join('') + ''); trs_fixed_r.push(''+ tds_fixed_r.join('') + ''); if(that.layMain.find('tbody').length==0){ //********** 5 表格没有加载到数据时,不会有节点,该节点使用原有的模板渲染: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全局接口中注册

      实现效果:

layui 表格组件中实现动态增加数据行的一种方式_第1张图片

      

你可能感兴趣的:(javaWeb,html,spring,UI)