黄海 7 months ago
commit 552409acb0

@ -68,115 +68,117 @@
</head> </head>
<body class="layui-form"> <body class="layui-form">
<div class="layui-card" style="margin-top: 50px;"> <div class="layui-card" style="margin-top: 50px;">
<div class="layui-card-body"> <div class="layui-card-body">
<!-- <button type="button" class="layui-btn" id="getData">获取数据</button> --> <!-- <button type="button" class="layui-btn" id="getData">获取数据</button> -->
<div class="fix"> <div class="fix">
<button type="button" class="layui-btn" id="back">返回</button> <button type="button" class="layui-btn" id="back">返回</button>
</div> </div>
<table id="ID-table-demo-data"></table> <table id="ID-table-demo-data"></table>
<script type="text/html" id="table-bar"> <script type="text/html" id="table-bar">
<span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a <span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a
class="woo-theme-color">删除</a></span> class="woo-theme-color">删除</a></span>
</script> </script>
</div>
</div> </div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../js/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var $ = layui.jquery;
var id = GetQueryString("id");
var _data = [];
$.ajax({
type: "GET",
async: false,
url: '/dsBase/dataease/getDataSetContent?id=' + id,
dataType: "json",
success: function (res) {
_data = res.data;
}
});
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../js/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var $ = layui.jquery;
var id = GetQueryString("id");
var _data = [];
$.ajax({
type: "GET",
async: false,
url: '/dsBase/dataease/getDataSetContent?id=' + id + '&pageNumber=1&pageSize=1',
dataType: "json",
success: function (res) {
_data = res.data;
}
});
var _emptyData = {}; var _cols = [];
var _cols = []; let keys = Object.keys(_data[0]);
let keys = Object.keys(_data[0]);
keys.forEach((item, index) => { keys.forEach((item, index) => {
_emptyData[item] = ""; var _obj = { field: item, title: item, edit: 'text', align: 'center', expandedMode: 'tips' }
var _obj = {field: item, title: item, edit: 'text', align: 'center', expandedMode: 'tips'} _cols.push(_obj);
_cols.push(_obj); });
}); _cols.push({ title: '操作', align: 'center', toolbar: '#table-bar' });
_cols.push({title: '操作', align: 'center', toolbar: '#table-bar'});
table.render({
table.render({ elem: '#ID-table-demo-data',
elem: '#ID-table-demo-data', id: 'ID-table-demo-data',
id: 'ID-table-demo-data', url: '/dsBase/dataease/getDataSetContent?id=' + id,
page: true //开启分页 height: 'full-85',
, limit: 10 //每页显示的条数 page: {
, limits: [10, 20, 30] limit: 20
, request: { , layout: ['count', 'prev', 'page', 'next', 'skip']
pageName: 'pageNumber' //页码的参数名称默认page , prev: "上一页"
, limitName: 'pageSize' //每页数据量的参数名默认limit , next: "下一页"
}, },
cols: [_cols], request: {
data: _data pageName: 'pageNumber' //页码的参数名称默认page
}); , limitName: 'pageSize' //每页数据量的参数名默认limit
},
cols: [_cols]
table.on('tool(ID-table-demo-data)', function (obj) {
layer.confirm('确定删除吗?', {icon: 0}, function (index) {
var cacheData = table.cache['ID-table-demo-data'];
cacheData.splice(obj.index, 1)
table.renderData('ID-table-demo-data');
layer.close(index);
}); });
});
table.on('edit(ID-table-demo-data)', function(obj){ table.on('tool(ID-table-demo-data)', function (obj) {
var value = obj.value // 得到修改后的值 layer.confirm('确定删除吗?', { icon: 0 }, function (index) {
,data = obj.data // 得到所在行所有数据 var cacheData = table.cache['ID-table-demo-data'];
,field = obj.field; // 得到字段名 cacheData.splice(obj.index, 1)
// 发送Ajax请求 table.renderData('ID-table-demo-data');
$.ajax({ layer.close(index);
url: '/dsBase/dataease/saveDataSet', });
type: 'POST', });
data: {
dataset_id:id, table.on('edit(ID-table-demo-data)', function (obj) {
id: data.id, var value = obj.value // 得到修改后的值
field: field, , data = obj.data // 得到所在行所有数据
value: value , field = obj.field; // 得到字段名
}, // 发送Ajax请求
success: function(res){ $.ajax({
if(res.success){ url: '/dsBase/dataease/saveDataSet',
layer.msg('保存成功'); type: 'POST',
} else { data: {
layer.msg('保存失败'); dataset_id: id,
id: data.id,
field: field,
value: value
},
success: function (res) {
if (res.success) {
layer.msg('保存成功');
} else {
layer.msg('保存失败');
}
} }
} });
}); });
});
$("#back").click(function () { $("#back").click(function () {
history.back(); history.back();
}); });
function GetQueryString(name, istop) { function GetQueryString(name, istop) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); var r = window.location.search.substr(1).match(reg);
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg); if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); if (r != null) return unescape(r[2]);
return null; return null;
} }
}); });
</script> </script>
</body> </body>

@ -57,29 +57,47 @@
} }
.fix { .fix {
position: fixed; /* position: fixed;
top: 0; top: 0;
right: 10px; right: 10px;
background-color: white; background-color: white;
padding: 10px; padding: 10px;
z-index: 1000; z-index: 1000; */
display: flex;
justify-content: space-between;
align-items: center;
height: 55px;
} }
</style> </style>
</head> </head>
<body class="layui-form"> <body class="layui-form">
<div class="layui-card" style="margin-top: 50px;"> <div class="layui-card">
<div class="layui-card-body"> <div class="layui-card-body">
<!-- <button type="button" class="layui-btn" id="getData">获取数据</button> --> <!-- <button type="button" class="layui-btn" id="getData">获取数据</button> -->
<div class="fix"> <div class="fix">
<button type="button" class="layui-btn" id="saveData">保存</button> <div> <label class="layui-form-label" style="width: auto;">行政区划:</label>
<button type="button" class="layui-btn" id="back">返回</button> <div class="layui-input-inline">
<input type="text" id="keyword" lay-affix="clear" lay-filter="clear" placeholder="请输入行政区划"
class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-md" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
</div>
</div>
<div><button type="button" class="layui-btn" id="back">返回</button></div>
<!-- <button type="button" class="layui-btn" id="saveData">保存</button> -->
</div> </div>
<table id="ID-table-demo-data"></table> <table id="ID-table-demo-data"></table>
<script type="text/html" id="table-bar"> <script type="text/html" id="table-bar">
<span class="woo-tool-span woo-tool-text-span" lay-event="add"><a
class="woo-theme-color">向下插入</a></span>
<span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a <span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a
class="woo-theme-color">删除</a></span> class="woo-theme-color">删除</a></span>
</script> </script>
@ -96,91 +114,97 @@
var table = layui.table; var table = layui.table;
var $ = layui.jquery; var $ = layui.jquery;
var util = layui.util; var util = layui.util;
var form = layui.form;
var id = GetQueryString("id"); var id = GetQueryString("id");
// var id = "3";
var _data = []; var _data = [];
$.ajax({ $.ajax({
type: "GET", type: "GET",
async: false, async: false,
url: '/dsBase/dataease/getDataSetContentByCity?id=' + id, url: '/dsBase/dataease/getDataSetContentByCity?id=' + id + '&pageNumber=1&pageSize=1',
dataType: "json", dataType: "json",
success: function (res) { success: function (res) {
_data = res.data; _data = res.data;
} }
}); });
var _emptyData = {};
var _cols = []; var _cols = [];
let keys = Object.keys(_data[0]); let keys = Object.keys(_data[0]);
keys.forEach((item, index) => { keys.forEach((item, index) => {
_emptyData[item] = "";
var _obj = { field: item, title: item, edit: 'text', align: 'center' } var _obj = { field: item, title: item, edit: 'text', align: 'center' }
_cols.push(_obj); _cols.push(_obj);
}); });
_cols.push({ title: '操作', align: 'center', toolbar: '#table-bar' }); _cols.push({ title: '操作', align: 'center', toolbar: '#table-bar' });
table.render({ tableRender();
elem: '#ID-table-demo-data',
id: 'ID-table-demo-data', function tableRender() {
page: false, table.render({
cols: [_cols], elem: '#ID-table-demo-data',
data: _data id: 'ID-table-demo-data',
}); url: '/dsBase/dataease/getDataSetContentByCity?id=' + id,
where: {
keyword: $("#keyword").val()
},
height: 'full-90',
page: {
limit: 20
, layout: ['count', 'prev', 'page', 'next', 'skip']
, prev: "上一页"
, next: "下一页"
},
request: {
pageName: 'pageNumber' //页码的参数名称默认page
, limitName: 'pageSize' //每页数据量的参数名默认limit
},
cols: [_cols]
});
}
table.on('tool(ID-table-demo-data)', function (obj) { table.on('tool(ID-table-demo-data)', function (obj) {
if (obj.event === 'add') { layer.confirm('确定删除吗?', { icon: 0 }, function (index) {
_data.splice(obj.index + 1, 0, _emptyData); var cacheData = table.cache['ID-table-demo-data'];
table.cache['ID-table-demo-data'] = _data; cacheData.splice(obj.index, 1)
table.renderData('ID-table-demo-data'); table.renderData('ID-table-demo-data');
} else { layer.close(index);
layer.confirm('确定删除吗?', { icon: 0 }, function (index) {
var cacheData = table.cache['ID-table-demo-data'];
cacheData.splice(obj.index, 1)
table.renderData('ID-table-demo-data');
layer.close(index);
});
}
});
$("#saveData").click(function () {
const cleanedData = table.cache['ID-table-demo-data'].map(item => {
const { LAY_NUM, LAY_INDEX, ...rest } = item;
return rest;
}); });
});
table.on('edit(ID-table-demo-data)', function (obj) {
var value = obj.value // 得到修改后的值
, data = obj.data // 得到所在行所有数据
, field = obj.field; // 得到字段名
// 发送Ajax请求
$.ajax({ $.ajax({
type: "POST",
dataType: "json",
async: false,
url: '/dsBase/dataease/saveDataSet', url: '/dsBase/dataease/saveDataSet',
type: 'POST',
data: { data: {
"id": id, dataset_id: id,
"data": JSON.stringify(cleanedData) id: data.id,
field: field,
value: value
}, },
success: function (res) { success: function (res) {
if (res.success) { if (res.success) {
layer.msg("保存成功!", { layer.msg('保存成功');
icon: 1,
time: 1300
});
} else { } else {
layer.msg(res.message, { layer.msg('保存失败');
icon: 2,
time: 2000
});
} }
} }
}); });
}); });
form.on('submit(user-query)', function () {
tableRender();
// 阻止表单的默认提交行为
return false;
});
$("#back").click(function () { $("#back").click(function () {
history.back(); history.back();

@ -68,118 +68,118 @@
</head> </head>
<body class="layui-form"> <body class="layui-form">
<div class="layui-card" style="margin-top: 50px;"> <div class="layui-card" style="margin-top: 50px;">
<div class="layui-card-body"> <div class="layui-card-body">
<!-- <button type="button" class="layui-btn" id="getData">获取数据</button> --> <!-- <button type="button" class="layui-btn" id="getData">获取数据</button> -->
<div class="fix"> <div class="fix">
<button type="button" class="layui-btn" id="saveData">保存</button> <!-- <button type="button" class="layui-btn" id="saveData">保存</button> -->
<button type="button" class="layui-btn" id="back">返回</button> <button type="button" class="layui-btn" id="back">返回</button>
</div> </div>
<table id="ID-table-demo-data"></table> <table id="ID-table-demo-data"></table>
<script type="text/html" id="table-bar"> <script type="text/html" id="table-bar">
<span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a <span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a
class="woo-theme-color">删除</a></span> class="woo-theme-color">删除</a></span>
</script> </script>
</div>
</div> </div>
</div>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../js/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var $ = layui.jquery;
var id = GetQueryString("id");
var _data = [];
$.ajax({
type: "GET",
async: false,
url: '/dsBase/dataease/getDataSetContentByProvince?id=' + id,
dataType: "json",
success: function (res) {
_data = res.data;
}
});
var _emptyData = {}; <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
var _cols = []; <script src="../js/layui/layui.js"></script>
let keys = Object.keys(_data[0]); <script>
layui.use('table', function () {
var table = layui.table;
var $ = layui.jquery;
var id = GetQueryString("id");
var _data = [];
$.ajax({
type: "GET",
async: false,
url: '/dsBase/dataease/getDataSetContentByProvince?id=' + id + '&pageNumber=1&pageSize=1',
dataType: "json",
success: function (res) {
_data = res.data;
}
});
keys.forEach((item, index) => { var _cols = [];
_emptyData[item] = ""; let keys = Object.keys(_data[0]);
var _obj = {field: item, title: item, edit: 'text', align: 'center'}
_cols.push(_obj);
});
_cols.push({title: '操作', align: 'center', toolbar: '#table-bar'});
table.render({
elem: '#ID-table-demo-data',
id: 'ID-table-demo-data',
page: false,
cols: [_cols],
data: _data
});
table.on('tool(ID-table-demo-data)', function (obj) { keys.forEach((item, index) => {
layer.confirm('确定删除吗?', {icon: 0}, function (index) { var _obj = { field: item, title: item, edit: 'text', align: 'center' }
var cacheData = table.cache['ID-table-demo-data']; _cols.push(_obj);
cacheData.splice(obj.index, 1) });
table.renderData('ID-table-demo-data'); _cols.push({ title: '操作', align: 'center', toolbar: '#table-bar' });
layer.close(index);
table.render({
elem: '#ID-table-demo-data',
id: 'ID-table-demo-data',
url: '/dsBase/dataease/getDataSetContentByProvince?id=' + id,
height: 'full-85',
page: {
limit: 20
, layout: ['count', 'prev', 'page', 'next', 'skip']
, prev: "上一页"
, next: "下一页"
},
request: {
pageName: 'pageNumber' //页码的参数名称默认page
, limitName: 'pageSize' //每页数据量的参数名默认limit
},
cols: [_cols]
}); });
});
$("#saveData").click(function () { table.on('tool(ID-table-demo-data)', function (obj) {
const cleanedData = table.cache['ID-table-demo-data'].map(item => { layer.confirm('确定删除吗?', { icon: 0 }, function (index) {
const {LAY_NUM, LAY_INDEX, ...rest} = item; var cacheData = table.cache['ID-table-demo-data'];
return rest; cacheData.splice(obj.index, 1)
table.renderData('ID-table-demo-data');
layer.close(index);
});
}); });
$.ajax({ table.on('edit(ID-table-demo-data)', function (obj) {
type: "POST", var value = obj.value // 得到修改后的值
dataType: "json", , data = obj.data // 得到所在行所有数据
async: false, , field = obj.field; // 得到字段名
url: '/dsBase/dataease/saveDataSet', // 发送Ajax请求
data: { $.ajax({
"id": id, url: '/dsBase/dataease/saveDataSet',
"data": JSON.stringify(cleanedData) type: 'POST',
}, data: {
success: function (res) { dataset_id: id,
if (res.success) { id: data.id,
layer.msg("保存成功!", { field: field,
icon: 1, value: value
time: 1300 },
}); success: function (res) {
} else { if (res.success) {
layer.msg(res.message, { layer.msg('保存成功');
icon: 2, } else {
time: 2000 layer.msg('保存失败');
}); }
} }
} });
}); });
});
$("#back").click(function () { $("#back").click(function () {
history.back(); history.back();
}); });
function GetQueryString(name, istop) { function GetQueryString(name, istop) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); var r = window.location.search.substr(1).match(reg);
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg); if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); if (r != null) return unescape(r[2]);
return null; return null;
} }
}); });
</script> </script>
</body> </body>

Loading…
Cancel
Save