emap组件，可编辑表格

展示效果：
编辑时会根据数据模型自动渲染样式及加载字典数据。




案例布局：

<article bh-layout-role="single">
    <h2>表格编辑</h2>
    <section>
        <div class="emap">
            <div class="tpl bh-mb-8">
                <button class="bh-btn bh-btn-primary" data-action="编辑当前页">编辑当前页</button>
            </div>
            <div class="edit_tpl bh-bg-info-3 bh-pv-8" style="display:none">
                <button class="bh-btn bh-btn-primary" data-action="新增">新增一行</button>
                <button class="bh-btn bh-btn-default" data-action="删除">删除</button>
                <button class="bh-btn bh-btn-default" data-action="保存">保存</button>
                <button class="bh-btn bh-btn-default" data-action="取消">取消</button>
            </div>
            <div id="emapEditableDataTable"></div>
        </div>
        <h3 class="bh-mv-8">isAutoAdd为true，如果表格数据为空，直接进入编辑模式</h3>
        <div class="empty">
            <div class="tpl bh-mb-8" style="display:none">
                <button class="bh-btn bh-btn-primary" data-action="编辑当前页">编辑当前页</button>
            </div>
            <div class="edit_tpl bh-bg-info-3 bh-pv-8" style="display:none">
                <button class="bh-btn bh-btn-primary" data-action="add">新增一行</button>
                <button class="bh-btn bh-btn-default" data-action="save">保存</button>
                <button class="bh-btn bh-btn-default" data-action="cancel">取消</button>
            </div>
            <div id="emptyTable"></div>
        </div>
        <pre data-src="modules/tableEdit/tableEdit.js"></pre>
        <script>
        self.Prism.fileHighlight()
        </script>
    </section>
</article>

案例JS

define(function(require, exports, module) {
    var utils = require('utils');
    var viewConfig = {
        initialize: function() {
            var view = utils.loadCompiledPage('tableEdit');
            this.$rootElement.html(view.render({}), true);
            this.initTable();
            this.initEmptyTable();
            this.eventMap = {
                '[data-action="编辑当前页"]': this.actionEdit,
                '[data-action="新增"]': this.actionAdd,
                '[data-action="删除"]': this.actionDelete,
                '[data-action="保存"]': this.actionSave,
                '[data-action="取消"]': this.actionCancel,
                '[data-action="delete_new"]': this.actionDeleteNewRow,
                '[data-action="cancel_delete_new"]': this.actionCancelDeleteNewRow,
                '[data-action="delete_emap"]': this.actionDeleteEmapRow,
                '[data-action="cancel_delete_emap"]': this.actionCancelDeleteEmapRow,
                '[data-action="add"]': this.actionEmptyAdd,
                '[data-action="cancel"]': this.actionEmptyCancel
            };
        },

        actionEdit: function() {
            $('#emapEditableDataTable').emapEditableDataTable('enterEditMode');
            $('.emap .tpl').hide();
            $('.emap .edit_tpl').show();
        },

        actionAdd: function() {
            $('#emapEditableDataTable').emapEditableDataTable('addRow', {});
        },

        actionDelete: function() {
            var $table = $('#emapEditableDataTable');
            var rows = $table.emapEditableDataTable('checkedRowsIndex');
            if (rows.emap && rows.emap.length) {
                var $emap = $table.emapEditableDataTable('getEmapDataTable');
                var $as = $emap.find('a[data-action]:visible'); //记得添加:visible，否则可能产生bug
                rows.emap.forEach(function(index) {
                    if ($as.eq(index).attr('data-action') === 'delete_emap') {
                        $as.eq(index).click();
                    }
                });
            }
            if (rows.new && rows.new.length) {
                var $new = $table.emapEditableDataTable('getNewDataHolderTable');
                var $as = $new.find('a[data-action]:visible'); //记得添加:visible，否则可能产生bug
                rows.new.forEach(function(index) {
                    if ($as.eq(index).attr('data-action') === 'delete_new') {
                        $as.eq(index).click();
                    }
                });
            }
        },

        actionCancel: function() {
            $('#emapEditableDataTable').emapEditableDataTable('leaveEditMode');
            $('.emap .tpl').show();
            $('.emap .edit_tpl').hide();
        },

        actionDeleteNewRow: function(e) {
            var index = $(e.target).data('row');
            $('#emapEditableDataTable').emapEditableDataTable('deleteNewRow', {
                rowIndex: index
            });
            $(e.target).text('取消删除');
            $(e.target).attr('data-action', 'cancel_delete_new');
        },

        actionCancelDeleteNewRow: function(e) {
            var index = $(e.target).data('row');
            $('#emapEditableDataTable').emapEditableDataTable('cancelDeleteNewRow', {
                rowIndex: index
            });
            $(e.target).text('删除');
            $(e.target).attr('data-action', 'delete_new');
        },

        actionDeleteEmapRow: function(e) {
            var index = $(e.target).data('row');
            $('#emapEditableDataTable').emapEditableDataTable('deleteEmapRow', {
                rowIndex: index
            });
            $(e.target).text('取消删除');
            $(e.target).attr('data-action', 'cancel_delete_emap');
        },

        actionCancelDeleteEmapRow: function(e) {
            var index = $(e.target).data('row');
            $('#emapEditableDataTable').emapEditableDataTable('cancelDeleteEmapRow', {
                rowIndex: index
            });
            $(e.target).text('删除');
            $(e.target).attr('data-action', 'delete_emap');
        },

        actionSave: function() {
            var $table = $('#emapEditableDataTable');
            if ($table.emapEditableDataTable('validateTable')) {
                var changeRows = $table.emapEditableDataTable('getChangedRows');
                console.log(changeRows);
                //TODO:保存
                this.actionCancel();
                $table.emapEditableDataTable('getEmapDataTable').emapdatatable('reload');
            } else {
                $.bhTip({
                    state: 'warning',
                    content: '存在非法输入'
                });
            }
        },

        initTable: function() {
            var tableOptions = {
                pagePath: 'modules/dataTable.do',
                action: 'T_PXXX_XSJBXX_QUERY',
                isCellEditable: function(row, column, value, rowData, colModel, settings) {
                    if (settings.isNewDataHolder) {
                        return true;
                    }
                    return true;
                    return (column !== 'WID') && (row % 2);
                },
                customColumns: [{
                    colIndex: '0',
                    type: 'checkbox'
                }, {
                    colIndex: 'last',
                    type: 'tpl',
                    column: {
                        text: '操作',
                        align: 'center',
                        cellsAlign: 'center',
                        cellsRenderer: function(row, column, value, rowData) {
                            return '<a href="javascript:void(0)" data-action="detail" data-x-wid=' + rowData.WID + '>' + '详情' + '</a>' +
                                ' | <a href="javascript:void(0)" data-action="edit" data-x-wid=' + rowData.WID + '>' + '编辑' + '</a>';
                        }
                    }
                }, {
                    colIndex: '40',
                    type: 'edit_tpl',
                    column: {
                        text: '操作',
                        align: 'center',
                        cellsAlign: 'center',
                        cellsRenderer: function(row, column, value, rowData, colModel, settings) {
                            if (settings.isNewDataHolder) {
                                if (rowData.isToDelete) {
                                    return '<a href="javascript:void(0)" data-action="cancel_delete_new"  data-row=' + row + '>' + '取消删除' + '</a>';
                                } else {
                                    return '<a href="javascript:void(0)" data-action="delete_new"  data-row=' + row + '>' + '删除' + '</a>';
                                }
                            } else {
                                if (rowData.isToDelete) {
                                    return '<a href="javascript:void(0)" data-action="cancel_delete_emap"  data-row=' + row + '>' + '取消删除' + '</a>';
                                } else {
                                    return '<a href="javascript:void(0)" data-action="delete_emap"  data-row=' + row + '>' + '删除' + '</a>';
                                }
                            }
                        }
                    }
                }]
            };

            $('#emapEditableDataTable').emapEditableDataTable({
                emapdatatable: tableOptions
            });
        },

        actionEmptyAdd: function() {
            $('#emptyTable').emapEditableDataTable('addRow', {});
        },

        actionEmptyCancel: function() {
            $('#emptyTable').emapEditableDataTable('leaveEditMode');
            $('.empty .tpl').show();
            $('.empty .edit_tpl').hide();
        },

        initEmptyTable: function() {
            var tableModel = WIS_EMAP_SERV.getModel('modules/dataTable.do', 'T_PXXX_XSJBXX_QUERY', 'table');
            var tableOptions = {
                datamodel: tableModel,
                pagePath: '',
                source: {
                    localData: [{}],
                    dataType: 'array',
                    datafields: []
                },
                isCellEditable: function(row, column, value, rowData, colModel, settings) {
                    if (settings.isNewDataHolder) {
                        return true;
                    }
                    return (column !== 'WID') && (row % 2);
                },
                customColumns: [{
                    colIndex: '0',
                    type: 'checkbox'
                }]
            };

            /**
             * !!!!!!!!!!!!!!
             *  emap数据为空时，emapEditableDataTable会进入编辑模式，并触发emapdata.empty事件，
             *  页面需要监听此事件，做出相应的处理
             */
            $('#emptyTable').on('emapdata.empty', function() {
                $('.empty .tpl').hide();
                $('.empty .edit_tpl').show();
            });
            /**
             * !!!!!!!!!!!!!!
             */

            $('#emptyTable').on('emapdata.unempty', function() {
                $('.empty .tpl').show();
                $('.empty .edit_tpl').hide();
            });

            $('#emptyTable').emapEditableDataTable({
                isAutoAdd: true,
                emapdatatable: tableOptions
            });
        }
    };

    return viewConfig;
});