关于Bootstrap table 行内编辑

行内编辑是很方便的编辑形式。通过各种尝试，发现了三种方法。

1.bootstrap table 自带的行内编辑：

也许是最简单的bootstrap-table 表格行内编辑实现！！！

确认可用。方法简便，不需要其他的扩展js,缺点也在此，扩展麻烦，对于前端小白来说，难度太大。

/**
         * @param {点击列的 field 名称} field
         * @param {点击列的 value 值} value
         * @param {点击列的整行数据} row
         * @param {td 元素} $element
         */
        onClickCell: function(field, value, row, $element) {
            $element.attr('contenteditable', true);
            $element.blur(function() {
                let index = $element.parent().data('index');
                let tdValue = $element.html();

                saveData(index, field, tdValue);
            })
        }

a.获取表格数据：

$table.bootstrapTable('getData')

b.新增数据

$table.bootstrapTable('insertRow', {
            index: 0,
            row: {
                id: '',
                name: '',
                price: ''
            }
        });

2.通过bootstrap-table-editable.js  ，需要引用相关的bootstrap-editable.js等文件

参考bootstrap-table 行内编辑相关问题

里面有内联的样式

参考行内编辑解决方案：x-editable

里面有各种样式，其中行内编辑是弹出式的。注意样式使用时，列宽会发生变化，文章里也提到了解决方案

{
                field: "DeptId",
                title: "部门",
                editable: {
                    type: 'select',
                    title: '部门',
                    source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
                }
            }

 

3.通过bootstrap-table-edit.js。此样式简单，可扩展，比如下拉菜单

参考BootStrap 可编辑表Table格

参考bootstrap table 的可编辑列表的实例     里面有全套的js。

使用方法：

 {field:"JX_NAME",title:"所获奖项明称",align:"center",edit:{required:true,type:'text' }},  

   a.增加 

 $('#reportTable1').bootstrapTable('append',rows);

b.删除 

$('#reportTable1').bootstrapTable('removeRow', deleteIndex);

   忘记 下面方法2能不能用

$('#table').bootstrapTable('removeByUniqueId', deleteIndex);

   $('#table').bootstrapTable('insertRow', {
                index: 0,
                row: {
                    id: '',
                    name: '',
                    price: ''
                }
            });

 

总结：各有优缺点。但是js最好统一。2最好看，1最简单，3也好实现