关于 skinnybrit51/editable-grid

寻找和bootstrap有关的可编辑表格时候，找到这个插件skinnybrit51/editable-grid，感觉很好用，插件地址是https://github.com/skinnybrit51/editable-grid

代码也很简单，不过测试了两天，最后发现一个低级错误

        var grid = new Grid({   // 这里 需要变成  var grid = new EditableGrid({
            el: el,
            borders: false,
            columns: [
                {
                    id: 'a',
                    title: 'a',
                    width: '33.3%'
                },
                {
                    id: 'b',
                    title: 'b',
                    width: '33.3%'
                },
                {
                    id: 'c',
                    title: 'c',
                    width: '33.3%'
                }
            ],
            data: [
                {
                    id: 'id-1',
                    a: 'a',
                    b: 'b',
                    c: 'c'
                },
                {
                    id: 'id-2',
                    a: 'a',
                    b: 'b',
                    c: 'c'
                }
            ]
        });
        grid.render();

引用文件有，

<link href="/Scripts/Bootstrap/bootstrap-3.1.1/bootstrap.min.css" rel="stylesheet"/>
<link href="/Scripts/Bootstrap/bootstrap-3.1.1/css/editable_grid.min.css" rel="stylesheet"/>

<script src="/Scripts/Bootstrap/bootstrap-3.1.1/jquery.min.js"></script>
<script src="/Scripts/Bootstrap/bootstrap-3.1.1/bootstrap.min.js"></script>
<script src="/Scripts/Bootstrap/bootstrap-3.1.1/js/editable_grid.min.js"></script>

除了支持bootstrap3之外，测试bootstrap4也是支持的，很好的插件，感谢作者 ！

 

在bootstrap.min.js中修改了几个小功能

/*! 修改记录 */
/*! 修改内容：修复行删除不了错误  b.ears.trigger("editable-can-delete",c).done(function(){for(var d=0;  改成 if(b.ears.trigger("editable-can-delete", c)){for(var d=0;*/
/*! 修改内容：修改删除按钮样式 <button type="button" class="close" aria-hidden="true">&times;</button> 改成 <button type="button" class="close" aria-hidden="true"><i class="zmdi zmdi-close-circle font-size-210 color-red" title="删除行"></i></button> */
/*! 修改内容：添加商品行按钮样式  <button type="button" class="new-row pull-right btn btn-link">Add</button> 改成  <button type="button" class="new-row pull-right btn btn-link"><i class="ion-plus-circled font-size-210 font-color-blue"></i> <span class="font-size-130">添加商品行</span></button>*/
/*! 修改内容：第一列固定放置删除按钮，不在放其他数据，这样需要让第一列的id=deleteBtColumn, createStringInput: function (a, b) { var c = this.createOpeningCellTag({ column: a }); return c += h(a.type, b), c += "</td>" } 改成 createStringInput: function (a, b) { var c = this.createOpeningCellTag({ column: a }); return c += a.id == "deleteBtColumn" ? "" : h(a.type, b), c += "</td>" }*/
/*! 修改内容：控制底部的添加商品按钮是否出现 初始化参数options中rows下增加IsEmptyRow: false。 false=不出现，true=出现  a.rows.newRow && (b += f.createTableFooterAddRow({ columns: a.columns })) 改成 a.rows.newRow && a.rows.IsEmptyRow && (b += f.createTableFooterAddRow({ columns: a.columns })) */

/*! 修改内容：数据列类型增加了type: 'integer' ，列内容只能是正整数。'<input type="text" class="form-control"/>' : '<input type="text" class="form-control" value="' + b + '"/>'  改成 ("integer" === a ? '<input type="number" min="1" step="1" class="form-control"/>' : '<input type="text" class="form-control"/>') : ("integer" === a ? '<input type="number" min="1" step="1" class="form-control" value="' + b + '"/>' : '<input type="text" class="form-control" value="' + b + '"/>')*/

默认出现每行第一列的删除按钮

var addListenerFunc = function (el) {
            //添加新行后继续进入可删除模式
            goodsGrid.trigger('editable-delete-mode', true);
        };

配置中使用addListeners: addListenerFunc,

 

备忘几个函数功能：

b._createDeleteRows() //展示删除按钮
: b._removeDeleteRows //隐藏删除按钮

createTableFooterAddRow //创建新行
如果列有超级链接，运行createOpeningCellTag
如果列属性中的link项==null,运行createInput

createInput 中根据类型不同运行不同的创建函数
case "date": return this.createDateInput(a, b);
case "cost": return this.createCostInput(a, b);
case "percent": return this.createPercentInput(a, b);
case "select": return this.createSelect(a, b);
case "checkbox": return this.createCheckboxInput(a, b) }
text  运行 return this.createStringInput(a, b)

_deleteRow //删除行函数