bootstrap-table行内编辑表格的实现
来源:互联网 发布:如何清除mac桌面图标 编辑:程序博客网 时间:2024/05/19 05:01
bootstrap-table官网上有editable和click-edit-row的例子,但是前者通过设置表格中某一列是否可编辑属性来控制行内编辑,会给可编辑的单元格添加格外的样式,且每编辑一个单元格就要点击一次确认或取消按钮。后者通过设同时置表格整体是否可编辑和某一列的编辑控件类型(input,select)来实现,可以完成一行编辑后再提交,点击表格行的任意位置都可以编辑,会在最后一列追加保存和取消按钮,会影响表格的样式。现在的需求时点击表格最后一列中的编辑按钮来控制这一行是否可编辑,最后一列不是追加按钮,而是用保存/取消按钮替代原型的编辑/取消按钮。显然官网上实现的编辑功能都不能满足这个需求。click-edit-row的例子与我需要实现的需求更接近,于是在这个文件上稍作修改以实现我的需求。
下面是实现后的效果图
图1
图2
实现思路:
- 缩小click监听事件元素的范围
table.on('click-row.bs.table', function (e, row, $element, field) { if(field ==='no') return; //|| field ==='noOld' this.$data.thId = $element.data().index; this.$data.itemid = $element.data().uniqueid; this.$data.divi = parseInt(row.area); this.$data.town=parseInt(row.town); clikcToEdit(this, $element); }.bind(this));
改写为
table.on('click','.btnEdit', function(e) {//btnEdit是编辑按钮的样式,因为这里的行数据是动态添加的,所以不能直接绑定click事件,使用委托性能也更好。 var $btn = e.target.nodeName == "BUTTON" ? $(e.target) : $(e.target.closest('button')); var $tr = $btn.closest('tr'); this.$data.thId = $tr.data().index; //thId表示更新行数据的索引 clikcToEdit(this, $tr); //e.stopImmediatePropagation(); //立即终止事件在元素树中的流动。如果使用select2组件美化下拉框,最好加上此句,因为这里的代码总会执行2次。 }.bind(this));
2.修改clickToEdit函数
首先将原来的按钮隐藏 tarNode.find('button').hide();
编辑完成刷新这行后(updateRow)再显示原来的按钮
tarNode.find('button').show();
效果如图1和图2所示。
将单元格的文本节点和元素节点可以通过按钮切换的原理:
编辑时执行
table.columns.forEach(function(column, i){ if (!column.editable) return; switch(column.editable){ case 'input': var div=$('<div class="editable-input col-md-12 col-sm-12 col-xs-12" style="position: relative;"/>'); txt.push(tarNode.find('td').eq(column.fieldIndex).text()); div.append($('<input type="text" class="form-control input-sm"/>')); div.append($('<span class="clear"><i class="fa fa-times-circle-o" aria-hidden="true"></i></span>')); tarNode.find('td').eq(column.fieldIndex).text('').append(div); break; case 'select': var select=$('<select id="'+column.field+'">'), options = $.selectArray[column.field]; tarNode.find('td').eq(column.fieldIndex).text('').append(select); setDivision($('#'+column.field), options); break; case 'textarea': break; default: console.log(column.fieldIndex+' '+column.editable); } }, evt);
编辑完后执行
$('#table').bootstrapTable('updateRow', {//此方法执行后单元格内值剩下文本节点 index: table.$data.thId, row: { noOld: txt[0], area: tarNode.find('select').eq(0).children(':selected').text(), town: tarNode.find('select').eq(1).children(':selected').text(), address: txt[1] } });
阅读全文
0 0
- bootstrap-table行内编辑表格的实现
- bootstrap-table 行内编辑简单实现
- bootstrap table 行内编辑 select2 多选问题
- bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能
- Bootstrap table选取表格内元素
- 点击编辑按钮,前端table表格行内指定td可修改。(table是动态生成的)
- bootstrap table的父子表格
- bootstrap的table表格使用
- bootstrap-table 实现单击单元格可编辑
- bootstrap-table 插件二次开发添加表格行新增和编辑功能
- bootstrap-table 实现表格增删改查
- bootstrap table的实现
- bootstrap table表格里的某一行置顶
- jQuery实现编辑修改表格table
- 基于bootstrap table分页数据及行内编辑和导出数据(一)
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- table根据表格内的元素改变行颜色的javascript实现
- javascript将table的td变为可编辑的input,实现表格动态编辑
- 通过SSH登陆国外服务器
- 长短时记忆网络(LSTM)的训练
- Dangerously Set innerHTML
- 递归神经网络
- if __name__ == '__main__'的理解
- bootstrap-table行内编辑表格的实现
- Apache POI for Microsoft Office
- 排它平方数
- ADC0832作AD转换及串口显示程序
- leetcode练习 Kth Smallest Element in a Sorted Matrix
- 消息队列activemq小测试
- spring通过xml方式配置AOP时,提示错误信息:匹配的通配符是严格的,但是对于元素'aop:aspectj- 自动代理”。
- getParameter 与 getAttribute的区别
- 原码反码和补码区别