|
|
@@ -17,7 +17,7 @@ function IwbAjax(opt) {
|
|
|
if (opt.data === undefined) {
|
|
|
opt.data = {}
|
|
|
}
|
|
|
- opt = $.extend({}, {isAlert: true,}, opt)
|
|
|
+ opt = $.extend({}, { isAlert: true, }, opt)
|
|
|
fetch(opt.url, {
|
|
|
method: opt.method,
|
|
|
headers: opt.headers || {
|
|
|
@@ -27,7 +27,7 @@ function IwbAjax(opt) {
|
|
|
})
|
|
|
.then((response) => response.json())
|
|
|
.then((data) => {
|
|
|
- console.log(`[${opt.url}]返回数据：`, data)
|
|
|
+ // console.log(`[${opt.url}]返回数据：`, data)
|
|
|
if (data.success) {
|
|
|
if (opt.isAlert) {
|
|
|
MsgSuccess('操作成功', data.message || "")
|
|
|
@@ -67,11 +67,12 @@ function IwbTable(table, opts, isReload) {
|
|
|
const defaultOptions = {
|
|
|
checkBox: false,
|
|
|
idFiled: 'id',
|
|
|
+ isDragColumn: false,
|
|
|
tableCheckboxName: 'table-id',
|
|
|
selected_ids: new Set(),
|
|
|
selected_rows: new Set(),
|
|
|
rows: new Set(),
|
|
|
- checkBoxWidth: 50,
|
|
|
+ checkBoxWidth: 40,
|
|
|
checkBoxDisable: undefined,
|
|
|
pageSize: 15,
|
|
|
pageNum: 1,
|
|
|
@@ -91,7 +92,7 @@ function IwbTable(table, opts, isReload) {
|
|
|
}
|
|
|
$table.data('options', opt)
|
|
|
loading()
|
|
|
- const data = $.extend({}, opt.search, {pageNum: opt.pageNum, pageSize: opt.pageSize})
|
|
|
+ const data = $.extend({}, opt.search, { pageNum: opt.pageNum, pageSize: opt.pageSize })
|
|
|
fetch(opt.url, {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
@@ -141,44 +142,58 @@ function IwbTable(table, opts, isReload) {
|
|
|
check_all = true
|
|
|
// console.log('渲染表格：', opt.selected_ids,rows, total)
|
|
|
if (opt.checkBox) {
|
|
|
- head_str += `<th style="${opt.checkBoxWidth ? `width: ${opt.checkBoxWidth};` : ``}">
|
|
|
+ head_str += `<th style="${opt.checkBoxWidth ? `width: ${opt.checkBoxWidth}px;` : ``}">
|
|
|
${checkBoxDiv.format('', `${opt.tableCheckboxName}_head`, '')}
|
|
|
</th>`
|
|
|
}
|
|
|
for (let i = 0; i < opt.columns.length; i++) {
|
|
|
const col = opt.columns[i]
|
|
|
- head_str += `<th style="${col.width ? `width: ${col.width};` : ``}${col.style ? `${col.style};` : ``}">${col.title}</th>`
|
|
|
+ const style = `${col.width ? `width: ${col.width};` : ``}${col.thStyle ? `${col.thStyle};` : ``}`
|
|
|
+ head_str += `<th style="${style}">${col.title}</th>`
|
|
|
}
|
|
|
if (rows && rows.length) {
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
|
const row = rows[i]
|
|
|
- body_str += '<tr>'
|
|
|
+ body_str += `<tr data-id="${row[opt.idFiled]}">`
|
|
|
if (opt.checkBox) {
|
|
|
const disabled_checkbox = opt.checkBoxDisable && opt.checkBoxDisable(row) ? 'disabled' : ''
|
|
|
if (opt.selected_ids.size && opt.selected_ids.has(row[opt.idFiled] + "")) {
|
|
|
if (disabled_checkbox === '') {
|
|
|
- body_str += `<td>${checkBoxDiv.format(row[opt.idFiled], `${opt.tableCheckboxName}`, `checked`)}</td>`
|
|
|
+ body_str += `<td style="${opt.checkBoxWidth ? `width: ${opt.checkBoxWidth}px;` : ``}">${checkBoxDiv.format(row[opt.idFiled], `${opt.tableCheckboxName}`, `checked`)}</td>`
|
|
|
} else {
|
|
|
- body_str += `<td>${checkBoxDiv.format(row[opt.idFiled], `${opt.tableCheckboxName}`, `${disabled_checkbox}`)}</td>`
|
|
|
+ body_str += `<td style="${opt.checkBoxWidth ? `width: ${opt.checkBoxWidth}px;` : ``}">${checkBoxDiv.format(row[opt.idFiled], `${opt.tableCheckboxName}`, `${disabled_checkbox}`)}</td>`
|
|
|
}
|
|
|
} else {
|
|
|
check_all = false
|
|
|
- body_str += `<td>${checkBoxDiv.format(row[opt.idFiled], `${opt.tableCheckboxName}`, `${disabled_checkbox}`)}</td>`
|
|
|
+ body_str += `<td style="${opt.checkBoxWidth ? `width: ${opt.checkBoxWidth}px;` : ``}">${checkBoxDiv.format(row[opt.idFiled], `${opt.tableCheckboxName}`, `${disabled_checkbox}`)}</td>`
|
|
|
}
|
|
|
}
|
|
|
for (let j = 0; j < opt.columns.length; j++) {
|
|
|
- const col = opt.columns[j]
|
|
|
+ const col = opt.columns[j],
|
|
|
+ style = `${col.tdStyle ? `${col.tdStyle};` : ``}`,
|
|
|
+ classStr = `${col.isEdit ? 'edit-td' : ''}`,
|
|
|
+ col_data = row[col.data] === undefined || row[col.data] === null ? '-' : row[col.data]
|
|
|
+ body_str += `<td class="${classStr}" style="${style}" data-key="${col.data}" data-val="${col_data}">`
|
|
|
+ let str = ''
|
|
|
if (col.render) {
|
|
|
- body_str += `<td>${col.render(row, rows)}</td>`
|
|
|
+ str += col.render(row, rows)
|
|
|
} else {
|
|
|
- body_str += `<td>${row[col.data] === undefined || row[col.data] === null ? '-' : row[col.data]}</td>`
|
|
|
+ str += col_data
|
|
|
}
|
|
|
+ if (col.isEdit) {
|
|
|
+ body_str += col.render ? str : `<span class="edit-label"><span class="edit-text">${str}</span></span>`
|
|
|
+ body_str += `<div class="edit-td-input"><input class="form-control form-control-sm" data-col="" value="${col_data}"/></div>`
|
|
|
+ } else {
|
|
|
+ body_str += str
|
|
|
+ }
|
|
|
+ body_str += `</td>`
|
|
|
}
|
|
|
body_str += '</tr>'
|
|
|
}
|
|
|
} else {
|
|
|
body_str += '<tr><td colspan="' + opt.columns.length + '" class="text-center">暂无数据</td></tr>'
|
|
|
}
|
|
|
+
|
|
|
$tableBox.fadeOut(300, () => {
|
|
|
let page_str = formatPage(opt.pageNum, opt.pageSize, total)
|
|
|
$table.parent().find('.pagination-row').html(page_str)
|
|
|
@@ -222,10 +237,69 @@ function IwbTable(table, opts, isReload) {
|
|
|
if (check_all) {
|
|
|
$tableBox.find(`input[name=${opt.tableCheckboxName}_head]`).prop('checked', true)
|
|
|
}
|
|
|
+ $tableBox.find(`td.edit-td`).on("dblclick", function () {
|
|
|
+ const $this = $(this), $input = $this.find('.edit-td-input'), $label = $this.find('.edit-label')
|
|
|
+ // $tableBox.find(`.edit-td-input`).hide()
|
|
|
+ // $tableBox.find(`.edit-label`).show()
|
|
|
+ $(document).on("click.td-edit", function (event) {
|
|
|
+ if ($(event.target).closest($this).length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ $(document).off("click.td-edit")
|
|
|
+ $input.off("keyup.edit").hide();
|
|
|
+ $label.show()
|
|
|
+ })
|
|
|
+ $label.hide()
|
|
|
+ $input.off("keyup.edit").on("keyup.edit", function (event) {
|
|
|
+ if (event.keyCode === 13) {
|
|
|
+ const val = $input.find('.form-control').val(), key = $this.data('key')
|
|
|
+ if (!val) {
|
|
|
+ MsgError('不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (val === $this.data('val')) {
|
|
|
+ $input.off("keyup.edit").hide();
|
|
|
+ $label.show()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ IwbAjax({
|
|
|
+ url: opt.editUrl,
|
|
|
+ data: {
|
|
|
+ id: $this.closest('tr').data('id'),
|
|
|
+ key: key,
|
|
|
+ val: val
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ if (res.success) {
|
|
|
+ $this.data('val', val)
|
|
|
+ $label.find('.edit-text').text(val)
|
|
|
+ if ($label.attr('data-bs-original-title')) {
|
|
|
+ $label.attr('data-bs-original-title', val)
|
|
|
+ }
|
|
|
+ $input.off("keyup.edit").hide();
|
|
|
+ $label.show()
|
|
|
+ } else {
|
|
|
+ $input.val($this.data('val'))
|
|
|
+ MsgError(res.msg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }).show()
|
|
|
+ $input.focus()
|
|
|
+ })
|
|
|
+
|
|
|
$tableBox.fadeIn(500, function () {
|
|
|
$tableBox.find(`[data-bs-toggle="tooltip"]`).each(function () {
|
|
|
new bootstrap.Tooltip(this)
|
|
|
})
|
|
|
+ reSizeTdOneLine($table)
|
|
|
+
|
|
|
+ if (opt.isDragColumn) {
|
|
|
+ dragTableColumn($table)
|
|
|
+ }
|
|
|
+
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
@@ -237,14 +311,16 @@ function IwbTable(table, opts, isReload) {
|
|
|
|
|
|
let str = '<div class=" d-flex align-items-center justify-content-center justify-content-md-start dt-toolbar">'
|
|
|
// 每页显示条数选择
|
|
|
+
|
|
|
+ str += `<div class="dt-info"><strong> 共 ${total} 条</strong>，当前第 ${pageNum}/${totalPages} 页，每页</div>`
|
|
|
str += `<div><select class="form-select form-select-solid form-select-sm" onchange="IwbTableChangePageSize(this)">`
|
|
|
- ;[15, 25, 50, 100].forEach((size) => {
|
|
|
- str += `<option value="${size}" ${pageSize === size ? ' selected' : ''}>${size}</option>`
|
|
|
- })
|
|
|
- str += '</select></div>'
|
|
|
+ ;[15, 25, 50, 100].forEach((size) => {
|
|
|
+ str += `<option value="${size}" ${pageSize === size ? ' selected' : ''}>${size}</option>`
|
|
|
+ })
|
|
|
+ str += '</select>条</div>'
|
|
|
+ str += '</div>'
|
|
|
|
|
|
// 显示记录信息
|
|
|
- str += `<div class="dt-info">当前第 ${pageNum}/${totalPages} 页 共 ${total} 条</div></div>`
|
|
|
|
|
|
// 分页导航
|
|
|
str += '<div class="d-flex align-items-center justify-content-center justify-content-md-end"><div class="dt-paging paging_simple_numbers"><nav aria-label="pagination"><ul class="pagination">'
|
|
|
@@ -296,6 +372,65 @@ function IwbTable(table, opts, isReload) {
|
|
|
return str
|
|
|
}
|
|
|
|
|
|
+ function dragTableColumn(table) {
|
|
|
+ const $table = $(table), opt = $table.data('options'), tableEl = $table[0], rows = tableEl.rows,
|
|
|
+ header = rows[0],
|
|
|
+ col_length = header.cells.length, col_start = opt.checkBox ? 1 : 0;
|
|
|
+ let self = { mouseDown: false }, tableX = header.clientWidth;
|
|
|
+
|
|
|
+ for (let i = 0; i < rows.length; i++) {
|
|
|
+ for (let j = col_start; j < col_length; j++) {
|
|
|
+ const col = rows[i].cells[j];
|
|
|
+ col.onmousedown = function (event) {
|
|
|
+ if (self.mouseDown === true) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ self.el = this;
|
|
|
+ self.th = header.cells[j];
|
|
|
+ if (event.offsetX > this.offsetWidth - 10) {
|
|
|
+ self.mouseDown = true;
|
|
|
+ self.oldX = event.x;
|
|
|
+ self.oldWidth = self.el.offsetWidth;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ col.onmousemove = function (event) {
|
|
|
+ if (event.offsetX > this.offsetWidth - 10) {
|
|
|
+ this.style.cursor = 'col-resize';
|
|
|
+ } else {
|
|
|
+ this.style.cursor = 'default';
|
|
|
+ }
|
|
|
+ if (self.mouseDown === true) {
|
|
|
+ self.el.style.cursor = 'default';
|
|
|
+ if (self.oldWidth + (event.x - self.oldX) > 0) {
|
|
|
+ self.width = self.oldWidth + (event.x - self.oldX);
|
|
|
+ }
|
|
|
+ self.th.style.width = self.width + 'px';
|
|
|
+ reSizeTdOneLine(tableEl)
|
|
|
+ tableEl.style.width = tableX + (event.x - self.oldX) + 'px';
|
|
|
+ self.el.style.cursor = 'col-resize';
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ tableEl.onmouseup = function () {
|
|
|
+ if (self === undefined) {
|
|
|
+ self = this;
|
|
|
+ }
|
|
|
+ self.mouseDown = false;
|
|
|
+ self.el.style.cursor = 'default';
|
|
|
+ // tableX = header.clientWidth;
|
|
|
+ reSizeTdOneLine(tableEl)
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function reSizeTdOneLine(table) {
|
|
|
+ $(table).find('td .one-line').each(function () {
|
|
|
+ $(this).width(`${$(this).parent().width() - 10}px`)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
ajaxTable(tableOptions)
|
|
|
}
|
|
|
|
|
|
@@ -311,7 +446,7 @@ function IwbTableSearch(that) {
|
|
|
delete search[$(el).attr('name')]
|
|
|
}
|
|
|
})
|
|
|
- IwbTable($table, {search: search, pageNum: 1})
|
|
|
+ IwbTable($table, { search: search, pageNum: 1, selected_ids: new Set(), selected_rows: new Set() })
|
|
|
}
|
|
|
|
|
|
function IwbTableResetSearch(that) {
|
|
|
@@ -322,13 +457,13 @@ function IwbTableResetSearch(that) {
|
|
|
|
|
|
function IwbTableJumpPage(that, pageNum) {
|
|
|
const $table = $(that).closest('.table-box').find('.table')
|
|
|
- IwbTable($table, {pageNum: pageNum})
|
|
|
+ IwbTable($table, { pageNum: pageNum })
|
|
|
}
|
|
|
|
|
|
function IwbTableChangePageSize(that) {
|
|
|
const $table = $(that).closest('.table-box').find('.table')
|
|
|
const pageSize = parseInt($(that).val())
|
|
|
- IwbTable($table, {pageSize: pageSize})
|
|
|
+ IwbTable($table, { pageSize: pageSize })
|
|
|
}
|
|
|
|
|
|
function IwbTableGetSelectedIds(table) {
|
|
|
@@ -340,6 +475,7 @@ function IwbTableGetSelectedRows(table) {
|
|
|
return $(table) && $(table).data('options') ? Array.from($(table).data('options').selected_rows).sort((a, b) => (Number(a[opt.idFiled]) || 0) - (Number(b[opt.idFiled]) || 0)) : []
|
|
|
}
|
|
|
|
|
|
+
|
|
|
function AddModal(modal, callback) {
|
|
|
const $modal = $(modal)
|
|
|
$modal.find('.modal-header .modal-title span.prefix').html('添加')
|
|
|
@@ -465,7 +601,7 @@ function Confirm(title, callback) {
|
|
|
toast: false
|
|
|
}
|
|
|
Swal.fire(opts).then((result) => {
|
|
|
- console.log("CONFIRM", result)
|
|
|
+ // console.log("CONFIRM", result)
|
|
|
if (result.isConfirmed) {
|
|
|
callback && callback()
|
|
|
}
|
