├── README.md
├── demo.gif
└── tableEdit.js


/README.md:
--------------------------------------------------------------------------------
 1 | # layui.tableEdit
 2 | 基于Layui的table组件编辑扩展
 3 | [Layui](https://www.layui.com/)
 4 | 
 5 | 经典模块化前端框架
 6 | 
 7 | ## 参数
 8 | 
 9 | | 参数           | 类型               | 默认值                 |描述                                                           |
10 | |----------------|--------------------|------------------------|---------------------------------------------------------------|
11 | | tableId           | string      | -                      | table对象ID              |
12 | | tableObj           | object             | null                   | table渲染后的对象    |
13 | | addEmptyRow           | bool            | true                      | 是否自动添加新行                         |
14 | | emptyRowData         | object             | {}                    | 新行默认数据                                    |
15 | | rowEditCustomer  | function |null | 自定义编辑框渲染，返回Jquery对象 function (field, rowData) { return $('<div></div>'); 自定义渲染的改变事件自行处理}
16 | | rowEditChange       | function           | null                      | 编辑框改变事件回调 function (data, field) { }          |
17 | | rowEditRender       | function              | null                    | 自定义渲染编辑框时回调 当 editRow="customer" 触发回调 function (field, inputId, rowData) { }  |
18 | 
19 | 
20 | ## 获取编辑后数据
21 | 
22 | var tableEditObj = tableEidt.render(options);
23 | 
24 | var data = tableEditObj.data();
25 | 
26 | ## table cols 参数扩展
27 | 扩展 editRow = "customer|number|float"
28 | 
29 | customer：自定渲染（默认创建一个input）
30 | 
31 | number：只能输入数字的文本框
32 | 
33 | float：只能输入数字和小数的文本框
34 | 
35 | 
36 | 例：{field:'key', width:150,editRow:'customer'}
37 | 
38 | ## Demo展示
39 | ![Demo](https://github.com/junshaochen/layui.tableEdit/blob/master/demo.gif)
40 | 
41 | ## 有问题反馈
42 | 在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流
43 | 
44 | * 邮件(446252517#qq.com, 把#换成@)
45 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/junshaochen/layui.tableEdit/1b29fde0f7e47036c447b0e93594612db4da5c6a/demo.gif


--------------------------------------------------------------------------------
/tableEdit.js:
--------------------------------------------------------------------------------
  1 | layui.define(['table', 'jquery', 'form'], function (exports) {
  2 |     "use strict";
  3 | 
  4 |     var MOD_NAME = 'tableEdit',
  5 |         $ = layui.jquery,
  6 |         table = layui.table,
  7 |         tableEdit = {
  8 |             v: "1.0.0",
  9 |             config: {
 10 |                 tableId: '',//目标tableID
 11 |                 tableObj: null,//渲染后的table对象 tableId 和 tableObj 二选一
 12 |                 addEmptyRow: true,//是否自动添加空行
 13 |                 emptyRowData: {},//空行数据，请根据表格数据格式添加
 14 |                 rowEditChange:null,// function (data, field) { },//编辑数据改变时回调 当 editRow="customer" 触发回调
 15 |                 rowEditCustomer: null,//function (field, rowData) { return null; },//自定义编辑框渲染，返回Jquery对象
 16 |                 rowEditRender: null,//function (field, inputId, rowData) { }//自定义渲染编辑框时回调 当 editRow="customer" 触发回调
 17 |             }
 18 |         },
 19 |         thisEdit = function () {
 20 |             var that = this;
 21 |             return {
 22 |                 render: function (options) {
 23 |                     var inst = new editClass($.extend({}, that.config, options));
 24 |                     return thisEdit.call(inst);
 25 |                 },
 26 |                 reload: function (data) {
 27 |                     that.reload.call(that, data);
 28 |                 },
 29 |                 addEmptyRow: function () {
 30 |                     that.addEmptyRow.call(that);
 31 |                 },
 32 |                 data: function () { return that.getData(); },
 33 |                 config: that.config
 34 |             }
 35 |         },
 36 |         editClass = function (options) {
 37 |             var that = this;
 38 |             that.config = $.extend({}, that.config, tableEdit.config, options);
 39 |             that.render();
 40 |         };
 41 |     editClass.prototype.render = function (options) {
 42 |         if (!this.config.tableId && !this.config.tableObj) return;
 43 |         var that = this,
 44 |             tableId = that.config.tableId;
 45 |         that.tableObj = this.config.tableObj ? this.config.tableObj : table.reload(tableId);
 46 |         var data = that.tableObj.config.data,
 47 |             cols = that.tableObj.config.cols,
 48 |             style = 'position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 14px 1px; border: none; border-radius: 0;',
 49 |             createCustomerInput = function (inputId, val) {
 50 |                 return $('<input id="' + inputId + '" value="' + val + '" type="text" class="layui-input" style="' + style+'"/>');
 51 |             },
 52 |             createNumberInput = function (inputId, val) {
 53 |                 return $('<input id="' + inputId + '" value="' + val + '" type="text" class="layui-input" style="' + style +'" onkeyup="value=value.replace(/[^\\d]/g,\'\')"/>');
 54 |             },
 55 |             createFloatInput = function (inputId, val) {
 56 |                 return $('<input id="' + inputId + '" value="' + val + '" type="text" class="layui-input" style="' + style +'" onkeyup="if(isNaN(value))execCommand(\'undo\')"/>');
 57 |             },
 58 |             inputChange = function ($input, row, field) {
 59 |                 var rowData = data[row];
 60 |                 $input.change(function () {
 61 |                     var newVal = $(this).val();
 62 |                     data[row][field] = newVal;
 63 |                     if (that.config.rowEditChange) {
 64 |                         var addNewRow = that.config.rowEditChange.call(that, rowData, field);
 65 |                         if (addNewRow && row == data.length - 1)
 66 |                             return that.addEmptyRow(), false;
 67 |                     }
 68 |                     that.reload();
 69 |                 });
 70 |             };
 71 |         if (data && data.length > 0)
 72 |             for (var i = 0; i < data.length; i++) {
 73 |                 //循环字段
 74 |                 var rowData = data[i],
 75 |                     row = rowData.LAY_TABLE_INDEX;
 76 |                 $.each(cols, function (n, oneCol) {
 77 |                     $.each(oneCol, function (nn, one) {
 78 |                         if (!one.field) return true;
 79 |                         if (!one.editRow) return true;
 80 |                         var $td = $("div[lay-id='" + tableId + "'] tr[data-index='" + row + "'] td[data-field='" + one.field + "']"),
 81 |                             createFunc;
 82 |                         switch (one.editRow) {
 83 |                             case "customer":
 84 |                                 if (that.config.rowEditCustomer) {
 85 |                                     var $obj = that.config.rowEditCustomer(one.field, rowData);
 86 |                                     if ($obj) {
 87 |                                         var div = $('<div style="' + style + ';padding:0;"></div>');
 88 |                                         div.append($obj);
 89 |                                         $td.append(div);
 90 |                                         if (layui.form)
 91 |                                             layui.form.render();
 92 |                                         break;
 93 |                                     }
 94 |                                 }
 95 |                                 createFunc = createCustomerInput;
 96 |                                 break;
 97 |                             case "number":
 98 |                                 createFunc = createNumberInput;
 99 |                                 break;
100 |                             case "float":
101 |                                 createFunc = createFloatInput;
102 |                                 break;
103 |                         }
104 |                         if (createFunc) {
105 |                             var inputId = 'rowedit_' + one.field + '_' + row,
106 |                                 $input = createFunc(inputId, rowData[one.field]);
107 |                             inputChange($input, row, one.field);
108 |                             $td.append($input);
109 |                             if (one.editRow == "customer" && that.config.rowEditRender) {
110 |                                 that.config.rowEditRender.call(that, one.field, inputId, rowData);
111 |                             }
112 |                         }
113 |                     });
114 |                 });
115 |             }
116 |         else if (that.config.addEmptyRow)
117 |             that.addEmptyRow();
118 |         return that;
119 |     }
120 |     //添加空行
121 |     editClass.prototype.addEmptyRow = function () {
122 |         this.tableObj.config.data.push(this.config.emptyRowData);
123 |         this.reload();
124 |     }
125 |     //重载表格
126 |     editClass.prototype.reload = function (data) {
127 |         data = data || this.tableObj.config.data;
128 |         if (data && data.length > 0) {
129 |             if (this.config.addEmptyRow) {
130 |                 //判断是否存在空行
131 |                 var lastRow = data[data.length - 1], haveEmptyRow = true;
132 |                 $.each(this.config.emptyRowData, function (key, val) {
133 |                     if (lastRow[key] != val)
134 |                         return haveEmptyRow = false, false;
135 |                 });
136 |                 if (!haveEmptyRow)
137 |                     data.push(this.config.emptyRowData);
138 |             }
139 |         }
140 |         var tableId = this.config.tableId;
141 |         table.reload(tableId, { data: data });
142 |         this.render();
143 |     }
144 |     //获取编辑数据
145 |     editClass.prototype.getData = function () {
146 |         var d = JSON.parse(JSON.stringify(table.cache[this.tableObj.config.id]));
147 |         for (var i = d.length - 1; i >= 0; i--) {
148 |             var one = d[i];
149 |             if (one.length == 0)
150 |                 d = d.splice(i, 1);
151 |             else {
152 |                 one.row = one.LAY_TABLE_INDEX + 1;
153 |                 delete one.LAY_TABLE_INDEX;
154 |             }
155 |         }
156 |         //排除空行
157 |         if (this.config.addEmptyRow)
158 |             d.splice(d.length - 1, 1);
159 |         return d;
160 |     }
161 |     //核心入口  
162 |     tableEdit.render = function (options) {
163 |         var inst = new editClass(options);
164 |         return thisEdit.call(inst);
165 |     };
166 |     exports(MOD_NAME, tableEdit);
167 | });


--------------------------------------------------------------------------------