添加表格动态增删改查示例

This commit is contained in:
RuoYi
2019-06-18 21:56:08 +08:00
parent 1c235dc7f6
commit 7d6cdabc09
8 changed files with 282 additions and 24 deletions

View File

@ -131,9 +131,9 @@ $(function() {
var dataExpand = $.common.isEmpty($.table._option.expandAll) ? true : $.table._option.expandAll;
expandFlag = $.common.isEmpty(expandFlag) ? dataExpand : expandFlag;
if (!expandFlag) {
$('#' + $.table._option.id).bootstrapTreeTable('expandAll');
$.bttTable.bootstrapTreeTable('expandAll');
} else {
$('#' + $.table._option.id).bootstrapTreeTable('collapseAll');
$.bttTable.bootstrapTreeTable('collapseAll');
}
expandFlag = expandFlag ? false: true;
})

View File

@ -4,8 +4,9 @@
*/
(function ($) {
$.extend({
_treeTable: {},
_tree: {},
btTable: {},
bttTable: {},
// 表格封装处理
table: {
_option: {},
@ -43,6 +44,7 @@
};
var options = $.extend(defaults, options);
$.table._option = options;
$.btTable = $('#' + options.id);
$.table.initEvent();
$('#' + options.id).bootstrapTable({
url: options.url, // 请求后台的URL*
@ -72,6 +74,7 @@
showColumns: options.showColumns, // 是否显示隐藏某列下拉框
showToggle: options.showToggle, // 是否显示详细视图和列表视图的切换按钮
showExport: options.showExport, // 是否支持导出文件
uniqueId: options.uniqueId, // 唯 一的标识符
clickToSelect: options.clickToSelect, // 是否启用点击选中行
detailView: options.detailView, // 是否启用显示细节视图
onClickRow: options.onClickRow, // 点击某行触发的事件
@ -130,7 +133,7 @@
// 初始化事件
initEvent: function(data) {
// 触发行点击事件 加载成功事件
$("#" + $.table._option.id).on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () {
$.btTable.on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () {
// 工具栏按钮控制
var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
$('#' + $.table._option.toolbar + ' .btn-del').toggleClass('disabled', !rows.length);
@ -138,7 +141,7 @@
$('#' + $.table._option.toolbar + ' .btn-detail').toggleClass('disabled', rows.length!=1);
});
// 绑定选中事件、取消事件、全部选中、全部取消
$("#" + $.table._option.id).on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) {
$.btTable.on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) {
// 复选框分页保留保存选中数组
var rowIds = $.table.affectedRowIds(rows);
if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
@ -147,7 +150,7 @@
}
});
// 图片预览事件
$("#" + $.table._option.id).on('click', '.img-circle', function() {
$.btTable.on('click', '.img-circle', function() {
var src = $(this).attr('src');
var target = $(this).data('target');
if($.common.equals("self", target)) {
@ -179,7 +182,7 @@
},
// 序列号生成
serialNumber: function (index) {
var table = $('#' + $.table._option.id).bootstrapTable('getOptions');
var table = $.btTable.bootstrapTable('getOptions');
var pageSize = table.pageSize;
var pageNumber = table.pageNumber;
return pageSize * (pageNumber - 1) + index + 1;
@ -223,7 +226,7 @@
// 搜索-默认第一个form
search: function(formId, data) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
var params = $("#" + $.table._option.id).bootstrapTable('getOptions');
var params = $.btTable.bootstrapTable('getOptions');
params.queryParams = function(params) {
var search = $.common.formToJSON(currentId);
if($.common.isNotEmpty(data)){
@ -238,7 +241,7 @@
search.isAsc = params.order;
return search;
}
$("#" + $.table._option.id).bootstrapTable('refresh', params);
$.btTable.bootstrapTable('refresh', params);
},
// 导出数据
exportExcel: function(formId) {
@ -323,13 +326,13 @@
},
// 刷新表格
refresh: function() {
$("#" + $.table._option.id).bootstrapTable('refresh', {
$.btTable.bootstrapTable('refresh', {
silent: true
});
},
// 查询表格指定列值
selectColumns: function(column) {
var rows = $.map($('#' + $.table._option.id).bootstrapTable('getSelections'), function (row) {
var rows = $.map($.btTable.bootstrapTable('getSelections'), function (row) {
return row[column];
});
if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
@ -352,7 +355,7 @@
},
// 查询表格首列值
selectFirstColumns: function() {
var rows = $.map($('#' + $.table._option.id).bootstrapTable('getSelections'), function (row) {
var rows = $.map($.btTable.bootstrapTable('getSelections'), function (row) {
return row[$.table._option.columns[1].field];
});
if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
@ -374,11 +377,11 @@
},
// 显示表格指定列
showColumn: function(column) {
$("#" + $.table._option.id).bootstrapTable('showColumn', column);
$.btTable.bootstrapTable('showColumn', column);
},
// 隐藏表格指定列
hideColumn: function(column) {
$("#" + $.table._option.id).bootstrapTable('hideColumn', column);
$.btTable.bootstrapTable('hideColumn', column);
}
},
// 表格树封装处理
@ -401,7 +404,7 @@
};
var options = $.extend(defaults, options);
$.table._option = options;
var treeTable = $('#' + options.id).bootstrapTreeTable({
$.bttTable = $('#' + options.id).bootstrapTreeTable({
code: options.code, // 用于设置父子关系
parentCode: options.parentCode, // 用于设置父子关系
type: 'get', // 请求方式(*
@ -419,21 +422,20 @@
expandFirst: options.expandFirst, // 是否默认第一级展开--expandAll为false时生效
columns: options.columns
});
$._treeTable = treeTable;
},
// 条件查询
search: function(formId) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
var params = $.common.formToJSON(currentId);
$._treeTable.bootstrapTreeTable('refresh', params);
$.bttTable('refresh', params);
},
// 刷新
refresh: function() {
$._treeTable.bootstrapTreeTable('refresh');
$.bttTable('refresh');
},
// 查询表格树指定列值
selectColumns: function(column) {
var rows = $.map($('#' + $.table._option.id).bootstrapTreeTable('getSelections'), function (row) {
var rows = $.map($.btTable.bootstrapTreeTable('getSelections'), function (row) {
return row[column];
});
return $.common.uniqueFn(rows);
@ -819,7 +821,7 @@
// 修改信息
edit: function(id) {
if($.common.isEmpty(id) && $.table._option.type == table_type.bootstrapTreeTable) {
var row = $('#' + $.table._option.id).bootstrapTreeTable('getSelections')[0];
var row = $.btTable.bootstrapTreeTable('getSelections')[0];
if ($.common.isEmpty(row)) {
$.modal.alertWarning("请至少选择一条记录");
return;