You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

183 lines
5.4 KiB

9 months ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
9 months ago
<link href="../js/layui/css/layui.css" rel="stylesheet">
9 months ago
<style>
.woo-tool-text-delimiter {
width: 1px;
height: 12px;
background: #EEEEEE;
display: inline-block;
margin: 0 6px 0 4px;
}
.woo-theme-color {
color: #1e9fff !important;
}
.woo-tool-span {
margin: 0 3px;
position: relative;
top: -1px;
cursor: pointer;
}
.layui-card-body .layui-form {
margin-top: 0 !important;
}
.layui-form-select {
width: 300px;
}
.layui-card {
margin-bottom: 15px;
border-radius: 2px;
background-color: #fff;
box-shadow: none;
}
9 months ago
.layui-fixbar li {
height: 38px;
line-height: 38px;
border: 1px solid transparent;
padding: 0 18px;
background-color: #16baaa;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px !important;
border-radius: 2px;
cursor: pointer;
}
.fix {
position: fixed;
top: 0;
right: 10px;
background-color: white;
padding: 10px;
z-index: 1000;
}
9 months ago
</style>
</head>
9 months ago
<body class="layui-form">
7 months ago
<div class="layui-card" style="margin-top: 50px;">
<div class="layui-card-body">
<!-- <button type="button" class="layui-btn" id="getData">获取数据</button> -->
<div class="fix">
<button type="button" class="layui-btn" id="back">返回</button>
</div>
<table id="ID-table-demo-data"></table>
9 months ago
7 months ago
<script type="text/html" id="table-bar">
<span class="woo-tool-span woo-tool-text-span" lay-event="delete"><a
class="woo-theme-color">删除</a></span>
</script>
9 months ago
9 months ago
</div>
7 months ago
</div>
9 months ago
7 months ago
<!-- 请勿在项目正式环境中引用该 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;
}
});
9 months ago
7 months ago
var _emptyData = {};
var _cols = [];
let keys = Object.keys(_data[0]);
9 months ago
7 months ago
keys.forEach((item, index) => {
_emptyData[item] = "";
var _obj = {field: item, title: item, edit: 'text', align: 'center', expandedMode: 'tips'}
_cols.push(_obj);
});
_cols.push({title: '操作', align: 'center', toolbar: '#table-bar'});
table.render({
elem: '#ID-table-demo-data',
id: 'ID-table-demo-data',
page: true //开启分页
, limit: 10 //每页显示的条数
, limits: [10, 20, 30]
, request: {
pageName: 'pageNumber' //页码的参数名称默认page
, limitName: 'pageSize' //每页数据量的参数名默认limit
},
cols: [_cols],
data: _data
});
9 months ago
7 months ago
table.on('tool(ID-table-demo-data)', function (obj) {
7 months ago
layer.confirm('确定删除吗?', {icon: 0}, function (index) {
var cacheData = table.cache['ID-table-demo-data'];
cacheData.splice(obj.index, 1)
7 months ago
table.renderData('ID-table-demo-data');
7 months ago
layer.close(index);
7 months ago
});
7 months ago
});
9 months ago
7 months ago
table.on('edit(ID-table-demo-data)', function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在行所有数据
,field = obj.field; // 得到字段名
// 发送Ajax请求
7 months ago
$.ajax({
url: '/dsBase/dataease/saveDataSet',
7 months ago
type: 'POST',
7 months ago
data: {
7 months ago
dataset_id:id,
id: data.id,
field: field,
value: value
7 months ago
},
7 months ago
success: function(res){
if(res.success){
layer.msg('保存成功');
7 months ago
} else {
7 months ago
layer.msg('保存失败');
9 months ago
}
7 months ago
}
9 months ago
});
7 months ago
});
9 months ago
9 months ago
7 months ago
$("#back").click(function () {
history.back();
});
8 months ago
7 months ago
function GetQueryString(name, istop) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
9 months ago
7 months ago
if (r != null) return unescape(r[2]);
return null;
}
});
</script>
9 months ago
</body>
</html>