438 lines
17 KiB
HTML
438 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||
<div id="selectTableField" class="dialog functionDialog" data-width="650" data-height="515">
|
||
<style>
|
||
.dialogContent .label {
|
||
margin-bottom: 5px;
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
.functionDialog .fields-display {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.functionDialog .field-table {
|
||
margin-bottom: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.functionDialog .field-table li {
|
||
display: inline-block;
|
||
padding: 0 15px;
|
||
line-height: 38px;
|
||
border-top: 1px solid #ddd;
|
||
border-bottom: 1px solid #ddd;
|
||
border-right: 1px solid #ddd;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.functionDialog .field-table li:first-child {
|
||
border-left: 1px solid #ddd;
|
||
}
|
||
|
||
.functionDialog .fields-select {
|
||
position: relative;
|
||
}
|
||
|
||
.functionDialog .fields-select .reset {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
color: #91c573;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.functionDialog .field-list {
|
||
padding-top: 10px;
|
||
border-top: 1px solid #e1e1e1;
|
||
font-size: 0;
|
||
}
|
||
|
||
.functionDialog .field-list .field-item {
|
||
margin-bottom: 15px;
|
||
display: inline-block;
|
||
width: 25%;
|
||
color: #242424;
|
||
}
|
||
|
||
.functionDialog .field-list .field-item .name {
|
||
margin-top: 2px;
|
||
width: 80%;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.functionDialog .checkbox-icon {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.functionDialog .range-item .name {
|
||
display: inline-block;
|
||
width: 100px;
|
||
vertical-align: top;
|
||
line-height: 60px;
|
||
}
|
||
|
||
.functionDialog .range-item .irs {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
width: 300px;
|
||
}
|
||
</style>
|
||
<div class="title">
|
||
<span>显示设置</span>
|
||
<div class="dialogClose">╳</div>
|
||
</div>
|
||
<div class="dialogBody">
|
||
<div class="dialogContent appBody" style="left: 0; padding-top: 0;">
|
||
<div class="appPage" style="min-width: 100% !important; border-top: 0;">
|
||
<div class="tabBody">
|
||
<ul class="tagSwitch noBorder">
|
||
<li tagindex="1" class="tag active">基本设置</li>
|
||
<li tagindex="2" th:if="${filter}" class="tag">筛选设置</li>
|
||
<li tagindex="3" class="tag" th:if="${range}">输入框设置</li>
|
||
</ul>
|
||
<div class="tagContents">
|
||
<div tagindex="1" class="tagContent active">
|
||
<div class="listBody">
|
||
<div class="fields-display">
|
||
<div class="label">拖动区块调整顺序：</div>
|
||
<ul id="fieldTable" class="field-table"></ul>
|
||
</div>
|
||
|
||
<div id="fieldsSelect1" class="fields-select">
|
||
<div class="label">显示列</div>
|
||
<div class="field-list">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div tagindex="2" class="tagContent">
|
||
<div class="listBody">
|
||
<div class="fields-display">
|
||
<div class="label">拖动区块调整顺序：</div>
|
||
<ul id="filterField" class="field-table"></ul>
|
||
</div>
|
||
|
||
<div id="fieldsSelect2" class="fields-select">
|
||
<div class="label">显示列</div>
|
||
<div class="field-list">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div tagindex="3" class="tagContent">
|
||
<div class="range-list"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialogFooter">
|
||
<a class="cancel">取消</a>
|
||
<a class="confirm">确定</a>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(function () {
|
||
var $table = '[[${table}]]';
|
||
var fieldControl = '[[${fieldControl}]]';
|
||
var $dialog = $(".functionDialog");
|
||
Dialog.start({
|
||
dialog: $dialog,
|
||
confirm: function () {
|
||
$.ajax({
|
||
url: "/tableStorage/save.html",
|
||
type: "post",
|
||
dataType: "json",
|
||
data: {
|
||
name: $table + '_fields',
|
||
content: JSON.stringify(fields1)
|
||
},
|
||
success: function (res) {
|
||
if (res.errorCode !== "0") {
|
||
Dialog.error(res.errorInfo);
|
||
} else {
|
||
var $reloadBtn = $(".refresh");
|
||
if ($reloadBtn.length !== 0) {
|
||
$reloadBtn.click();
|
||
|
||
} else {
|
||
if (selectFieldConfirmCallback && typeof selectFieldConfirmCallback === 'function') {
|
||
selectFieldConfirmCallback($table);
|
||
}
|
||
}
|
||
Dialog.close($dialog);
|
||
}
|
||
},
|
||
error: function () {
|
||
console.log("ajax error")
|
||
}
|
||
});
|
||
|
||
if ('[[${filter}]]' === 'true') {
|
||
$.ajax({
|
||
url: "/tableStorage/save.html",
|
||
type: "post",
|
||
dataType: "json",
|
||
data: {
|
||
name: $table + '_filters',
|
||
content: JSON.stringify(fields2)
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
var storeFields1 = {};
|
||
var fields1 = [];
|
||
|
||
var storeFields2 = {};
|
||
var fields2 = [];
|
||
|
||
initData();
|
||
$(".fields-select").find(".reset").on("click", initData);
|
||
|
||
// 初始加载数据
|
||
function initData() {
|
||
$.ajax({
|
||
url: '/tableStorage/getByName.html',
|
||
dataType: 'json',
|
||
data: {
|
||
name: $table + '_fields',
|
||
fieldControl: fieldControl
|
||
},
|
||
success: function (res) {
|
||
if (res.errorCode === '0') {
|
||
var content = res.data.value.content;
|
||
var temp = JSON.parse(content);
|
||
if (fieldControl === 'true') {
|
||
var invalidFieldList = res.data.value.invalidFieldList;
|
||
storeFields1 = [];
|
||
for (var i in temp) {
|
||
var flag = true;
|
||
for (var j in invalidFieldList) {
|
||
if (temp[i].id === invalidFieldList[j]) {
|
||
flag = false;
|
||
break;
|
||
}
|
||
}
|
||
if (flag) {
|
||
storeFields1.push(temp[i]);
|
||
}
|
||
}
|
||
} else {
|
||
storeFields1 = temp;
|
||
}
|
||
|
||
storeFields1.sort(function (a, b) {
|
||
return a.index - b.index;
|
||
});
|
||
fields1 = objDeepCopy(storeFields1);
|
||
createTable(storeFields1, $("#fieldTable"));
|
||
initCheckbox(storeFields1, $("#fieldsSelect1"));
|
||
initRange(storeFields1);
|
||
} else {
|
||
console.log(res.errorInfo);
|
||
}
|
||
},
|
||
error: function () {
|
||
console.log('ajax error');
|
||
}
|
||
});
|
||
|
||
if ('[[${filter}]]' === 'true') {
|
||
$.ajax({
|
||
url: '/tableStorage/getByName.html',
|
||
dataType: 'json',
|
||
data: {
|
||
name: $table + '_filters'
|
||
},
|
||
success: function (res) {
|
||
if (res.errorCode === '0') {
|
||
var content = res.data.value.content;
|
||
storeFields2 = JSON.parse(content);
|
||
storeFields2.sort(function (a, b) {
|
||
return a.index - b.index;
|
||
});
|
||
fields2 = objDeepCopy(storeFields2);
|
||
createTable(storeFields2, $("#filterField"));
|
||
initCheckbox(storeFields2, $("#fieldsSelect2"));
|
||
initRange(storeFields2);
|
||
} else {
|
||
console.log(res.errorInfo);
|
||
}
|
||
},
|
||
error: function () {
|
||
console.log('ajax error');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function createTable(fieldsArr, $dom) {
|
||
var thHtml = '';
|
||
fieldsArr.forEach(function (field) {
|
||
if (!field.hide) {
|
||
thHtml += '<li data-id="' + field.id + '">' + field.name + '</li>';
|
||
}
|
||
});
|
||
$dom.html(thHtml);
|
||
}
|
||
|
||
// 初始化 checkbox
|
||
function initCheckbox(storeFields, $dom) {
|
||
var fieldItemHtml = '';
|
||
storeFields.forEach(function (field) {
|
||
var disabled = field.required ? 'disabled' : '';
|
||
var $commonFieldItem = $('<div class="field-item">' +
|
||
' <span class="common-single-checkbox" ' + disabled + '></span>' +
|
||
' <span class="name"></span>' +
|
||
' </div>');
|
||
var $checkbox = $commonFieldItem.find('.common-single-checkbox');
|
||
$checkbox.attr('data-name', field.id);
|
||
if (!field.hide) {
|
||
$checkbox.attr('data-init', true);
|
||
}
|
||
$commonFieldItem.find(".name").text(field.name);
|
||
fieldItemHtml += $commonFieldItem.prop("outerHTML");
|
||
});
|
||
$dom.find(".field-list").html(fieldItemHtml);
|
||
|
||
initSingleCheckboxAction($dom.find('.common-single-checkbox'));
|
||
$dom.find('.common-single-checkbox').on('clickCheckbox', clickCheckbox);
|
||
}
|
||
|
||
// 点击 checkbox
|
||
function clickCheckbox() {
|
||
var tagindex = $("#selectTableField .tagSwitch .tag.active").attr('tagindex');
|
||
var fieldsArr = [];
|
||
if (tagindex === '1') {
|
||
fieldsArr = fields1;
|
||
} else if (tagindex === '2') {
|
||
fieldsArr = fields2;
|
||
}
|
||
|
||
var hide = $(this).attr('data-flag') === 'false';
|
||
var index = findIndexById(fieldsArr, $(this).attr('data-name'));
|
||
if (index !== -1) {
|
||
fieldsArr[index].hide = hide;
|
||
}
|
||
createTable(fieldsArr, $(this).parents('.listBody').find('.field-table'));
|
||
}
|
||
|
||
// 深拷贝对象数据
|
||
function objDeepCopy(source) {
|
||
var sourceCopy = source instanceof Array ? [] : {};
|
||
for (var item in source) {
|
||
sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
|
||
}
|
||
return sourceCopy;
|
||
}
|
||
|
||
function findIndexById(arr, id) {
|
||
for (var i in arr) {
|
||
if (arr[i].id === id) {
|
||
return i;
|
||
}
|
||
}
|
||
return -1;
|
||
}
|
||
|
||
function initRange(storeFields) {
|
||
storeFields.forEach(function (item) {
|
||
var width = store.get($table + '_width-' + item.id);
|
||
if (width) {
|
||
var id = "range-" + item.id.split('.').join('-');
|
||
$('.range-list').append('<div class="range-item">' +
|
||
' <span class="name">' + item.name + '</span>' +
|
||
' <input class="range" id="' + id + '"/>' +
|
||
' </div>');
|
||
$("#" + id).ionRangeSlider({
|
||
min: 100,
|
||
max: 400,
|
||
from: width,
|
||
onChange: function (data) {
|
||
var $wrapper = $('.im-table-header').find('[data-column="' + item.id + '"]');
|
||
var $target = $wrapper.find('.im-form-header-input');
|
||
if ($target.length === 0) {
|
||
$target = $wrapper.find('im-select');
|
||
}
|
||
|
||
$target.css('width', data.from + 'px');
|
||
},
|
||
onFinish: function (data) {
|
||
store.set($table + '_width-' + item.id, data.from);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
Sortable.create(document.getElementById('fieldTable'), {
|
||
onEnd: function (e) {
|
||
var arr = [];
|
||
$("#fieldTable").find('li').each(function (index) {
|
||
arr.push({
|
||
id: $(this).attr('data-id'),
|
||
index: index,
|
||
name: $(this).text(),
|
||
hide: false
|
||
})
|
||
});
|
||
fields1.forEach(function (item) {
|
||
if (item.hide) {
|
||
arr.push({
|
||
id: item.id,
|
||
index: arr.length,
|
||
name: item.name,
|
||
hide: true
|
||
});
|
||
}
|
||
});
|
||
fields1 = arr;
|
||
}
|
||
});
|
||
|
||
Sortable.create(document.getElementById('filterField'), {
|
||
onEnd: function (e) {
|
||
var arr = [];
|
||
$("#filterField").find('li').each(function (index) {
|
||
arr.push({
|
||
id: $(this).attr('data-id'),
|
||
index: index,
|
||
name: $(this).text(),
|
||
hide: false
|
||
})
|
||
});
|
||
fields2.forEach(function (item) {
|
||
if (item.hide) {
|
||
arr.push({
|
||
id: item.id,
|
||
index: arr.length,
|
||
name: item.name,
|
||
hide: true
|
||
});
|
||
}
|
||
});
|
||
fields2 = arr;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
</html>
|