展示效果:
编辑时会根据数据模型自动渲染样式及加载字典数据。
案例布局:
<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;
});