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全局接口中注册

实现效果：

layui 表格组件中实现动态增加数据行的一种方式相关推荐

python读文件路径-在Python中按路径读取数据文件的几种方式
我们知道,写Python代码的时候,如果一个包(package)里面的一个模块要导入另一个模块,那么我们可以使用相对导入: 假设当前代码结构如下图所示: img 其中test_1是一个包,在util. ...
Ant Design of Vue +TS 表单动态增加数据验证卧坑姿势
文章目录 Update 20210601 Update 20210525 原文: 1.a-form的model 2.获取数据源码 Update 20210601 今天做别的页面的时候发现又取不到数据 ...
layui 表格在点表头排序时数据错乱
layui 表格在点表头排序时数据错乱问题问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回 ...
EXTJS 中grid 动态增加列的方法
总结:gridpanel动态生成列的核心就是在拼凑columnmodel和后台返回store的数据对的上 1-首先动态拼凑columnmodel 前端拼凑例子 me.columns.push({tex ...
props传递对象_vue组件中使用props传递数据的实例详解
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法组件不仅仅是 ...
Vue子组件中渲染动态组件无效（第一次无效、第二次有效）
问题分析今天在写代码的时候,用到了 Vue框架的动态组件,本来用的好好的(具体用法参考官方文档),后来改进了一下业务功能,在子组建中也使用了和父组件相同的动态组件方法,由于子组件采用对话框i的形式, ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
Python抓取网页中的动态序列化数据
Python抓取网页中的动态序列化数据动态序列化数据经常应用于前后端分离的页面.或者通过VUE.JS等HTML页面环境,常规的爬虫抓取方法并不能满足数据采集的要求,因此需要其他的方式进行数据的采集. ...
Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录一.概述二.效果展示三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...

layui 表格组件中实现动态增加数据行的一种方式

layui 表格组件中实现动态增加数据行的一种方式相关推荐

最新文章

热门文章