Added an expansion and configuration parameters

README.md

@@ -1,4 +1,4 @@
-editable-table
+# editable-table 扩展
 =================
 
 This tiny (3KB, < 120 lines) jQuery plugin turns any table into an editable spreadsheet. Here are the key features:
@@ -15,11 +15,71 @@ CSS)
 * Works well with Bootstrap
 * Depends only on jQuery
 
-Basic Usage
+## Basic Usage
 -----------
 
 See http://mindmup.github.com/editable-table/
 
+numeric-input-1.2.js
+这是一个对 editableTableWidget 的一个小扩展，可以定义表格哪几列需要修改，
+哪一列是汇总列，还有汇总的计算方式  type * 相乘 + 相加 - 相减
+
+如图：
+
+![screenshots_1](https://github.com/ulongx/editable-table/blob/master/screenshots_1.gif?raw=true)
+
+### 使用方式
+
+``` html
+
+<table id="editMainTable" class="table table-striped m-b-0">
+    <thead>
+    <tr>
+        <th>名称</th><th>品类</th><th>型号</th><th>数量</th><th>单价</th><th>总额</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>Car</td><td>Car</td><td>100*100</td><td>0</td><td>100</td><td>0</td>
+    </tr>
+    <tr>
+        <td>Bike</td><td>Car</td><td>140*10</td><td>1</td><td>100</td><td>100</td>
+    </tr>
+    <tr>
+        <td>Plane</td><td>Car</td><td>540*20</td><td>3</td><td>100</td><td>300</td>
+    </tr>
+    <tr>
+        <td>Yacht</td><td>Car</td><td>200*30</td><td>0</td><td>100</td><td>0</td>
+    </tr>
+    <tr>
+        <td>Segway</td><td>Car</td><td>240*30</td><td>1</td><td>100</td><td>100</td>
+    </tr>
+    </tbody>
+    <tfoot>
+    <tr>
+        <th><strong>合计</strong></th><th></th><th></th><th></th><th></th><th></th>
+    </tr></thead>
+</table>
+
+```
+
+``` javascript
+$('#editMainTable').editableTableWidget().numericInput({
+    columns: [3,4],   //需要计算的列
+    totalColIndex: 5, //汇总列的index
+    type: '*'
+});
+```
+
+* 设置不可以修改的列
+
+![sreenhots_2](https://github.com/ulongx/editable-table/blob/master/screenshots_2.gif?raw=true)
+``` javascript
+$('#editMainTable').editableTableWidget({
+  needEdits: [3,4]
+});
+```
+
 Dependencies
 ------------
 * jQuery http://jquery.com/

mindmup-editabletable.js

@@ -14,6 +14,11 @@ $.fn.editableTableWidget = function (options) {
 			active,
 			showEditor = function (select) {
 				active = element.find('td:focus');
+				if (activeOptions.needEdits.length > 0){
+          if ($.inArray($(active).index(),activeOptions.needEdits) === -1){
+          	return;
+					}
+				}
 				if (active.length) {
 					editor.val(active.text())
 						.removeClass('error')
@@ -126,6 +131,6 @@ $.fn.editableTableWidget.defaultOptions = {
 	cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
 					  'text-align', 'font', 'font-size', 'font-family', 'font-weight',
 					  'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
-	editor: $('<input>')
+	editor: $('<input>'),
+	needEdits: []
 };
-

numeric-input-1.2.js

@@ -0,0 +1,114 @@
+/* ulongx ->https://github.com/ulongx/editable-table
+numeric-input-1.2.js
+这是一个对 editableTableWidget 的一个小扩展，可以定义表格哪几列需要修改，
+哪一列是汇总列，还有汇总的计算方式  type * 相乘 + 相加 - 相减
+*/
+(function () {
+    "use strict";
+
+    $.fn.numericInput = function (options) {
+        //type * 相乘 + 相加 - 相减
+        var defaults = {
+            columns: [],   //需要更改的列,默认全部
+            totalColIndex: -1, //汇总列，默认没有
+            type: '*'
+        };
+
+        options = $.extend(defaults, options);
+
+        var element = $(this),
+            footer = element.find('tfoot tr'),
+            dataRows = element.find('tbody tr'),
+            initialTotal = function () {
+                var column,total,totalSum;
+                if(!options.columns.length) {
+                    for (column = 1; column < footer.children().size(); column++) {
+                        total = 0;
+                        dataRows.each(function () {
+                            var row = $(this);
+                            total += parseFloat(row.children().eq(column).text());
+                        });
+                        footer.children().eq(column).text(total);
+                    }
+                } else {
+                    for (var x in options.columns) {
+                        total = 0, totalSum = 0;
+                        dataRows.each(function () {
+                            var row = $(this);
+                            total += parseFloat(row.children().eq(options.columns[x]).text());
+                            if (options.totalColIndex !== -1){
+                                totalSum += parseFloat(row.children().eq(options.totalColIndex).text());
+                            }
+                        });
+                        footer.children().eq(options.columns[x]).text(total);
+                        if (options.totalColIndex !== -1){
+                            footer.children().eq(options.totalColIndex).text(totalSum);
+                        }
+                    }
+                }
+
+            };
+
+        element.find('td').on('change', function (evt) {
+            var cell = $(this),
+                column = cell.index(),
+                total = 0,
+                totalSum = 0,
+                totalSumEnd = 0;
+            if (options.columns.length && $.inArray(column,options.columns) === -1) {
+                //$.Message.info('本单元不可编辑');
+								alert('本单元不可编辑');
+                return false;
+            }
+            if (options.columns.length && options.totalColIndex !== -1){
+                var parentTr = cell.parent().children();
+                options.columns.map(function (item, i) {
+                    switch(options.type){
+                        case '*':
+                            if (totalSum === 0){
+                                totalSum = parseFloat(parentTr.eq(item).text());
+                            } else {
+                                totalSum *= parseFloat(parentTr.eq(item).text());
+                            }
+                            break;
+                        case '+':
+                            totalSum += parseFloat(parentTr.eq(item).text());
+                            break;
+                        case '-':
+                            totalSum -= parseFloat(parentTr.eq(item).text());
+                            break;
+                        default:
+                            break;
+                    }
+
+                });
+                parentTr.eq(options.totalColIndex).text(totalSum);
+            }
+
+            element.find('tbody tr').each(function () {
+                var row = $(this);
+                total += parseFloat(row.children().eq(column).text());
+                if (options.totalColIndex !== -1) {
+                    totalSumEnd += parseFloat(row.children().eq(options.totalColIndex).text());
+                }
+            });
+            // footer.children().eq(column).text(total);
+            if (options.totalColIndex !== -1) {
+                footer.children().eq(options.totalColIndex).text(totalSumEnd);
+            }else{
+                footer.children().eq(column).text(total);
+            }
+
+        }).on('validate', function (evt, value) {
+            var cell = $(this),
+                column = cell.index();
+            if (column === 0) {
+                return !!value && value.trim().length > 0;
+            } else {
+                return !isNaN(parseFloat(value)) && isFinite(value);
+            }
+        });
+        initialTotal();
+        return this;
+    };
+})(window.jQuery);