初始版本
This commit is contained in:
suncz
@@ -0,0 +1,437 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user