论坛首页新手上路 签到
查看: 2417|回复: 0

emap组件,可编辑表格

[复制链接]
金智-金诚

签到天数: 13 天

[LV.3]

27

主题

38

帖子

65

积分

超级版主

Rank: 8Rank: 8Rank: 8Rank: 8

积分
65
发表于 2017-1-4 14:31:56 | 显示全部楼层 |阅读模式
本帖最后由 jj5671202 于 2017-1-4 14:44 编辑

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




案例布局:

<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;
});

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

Archiver|手机版|小黑屋|江苏金智教育信息股份有限公司 ( 系统管理员:binmeng@wisedu.com  

GMT+8, 2021-4-19 01:32

Powered by Discuz! X3.2

© 2015 Design: www.wisedu.com

快速回复 返回顶部 返回列表