|
|
@@ -1,456 +1,365 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-
|
|
|
+<html>
|
|
|
<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <script src="https://admin.jubaolife.com/static/admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
|
|
|
- <title>列表</title>
|
|
|
- <style>
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- body {
|
|
|
- display: grid;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .container {
|
|
|
- width: 100%;
|
|
|
- height: 800px;
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .container-left {
|
|
|
- width: 200px;
|
|
|
- padding: 10px 15px;
|
|
|
- background: #fff !important;
|
|
|
- }
|
|
|
- .container-left input {
|
|
|
- width: 90%;
|
|
|
- min-height: 30px;
|
|
|
- outline: none;
|
|
|
- font-size: 16px;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 15px;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 5px;
|
|
|
- border: 1px solid rgb(69, 126, 123);
|
|
|
- }
|
|
|
-
|
|
|
- .container-left button {
|
|
|
- border-radius: 5px;
|
|
|
- font-size: 16px;
|
|
|
- padding: 10px 25px;
|
|
|
- margin: 10px 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .container-right {
|
|
|
- width: calc(100vw - 200px);
|
|
|
- padding: 10px 15px;
|
|
|
- overflow-y: auto;
|
|
|
- background: #fff !important;;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .container-right table {
|
|
|
- cursor: default;
|
|
|
- border: #091538;
|
|
|
- }
|
|
|
-
|
|
|
- .container-right table {
|
|
|
- width: calc(100vw - 300px);
|
|
|
- text-align: center;
|
|
|
- margin: 20px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .container-right table thead td {
|
|
|
- color: #fff !important;
|
|
|
- background: #091538;
|
|
|
- }
|
|
|
-
|
|
|
- .container-right table tr td {
|
|
|
- height: 35px;
|
|
|
- font-size: 18px;
|
|
|
- color: #091538;
|
|
|
- border: 1px solid #091538;
|
|
|
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
- }
|
|
|
-
|
|
|
- .container-right table tr td button {
|
|
|
- padding: 3px 7px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ <title>计算公式</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <link rel="stylesheet" href="./css/bootstrap.css">
|
|
|
+ <link rel="stylesheet" href="./css/bootstrap-table.css">
|
|
|
+ <script src="./js/jquery-3.6.0.min.js"></script>
|
|
|
+ <script src="./js/bootstrap.js"></script>
|
|
|
+ <script src="./js/jquery.validate.min.js"></script>
|
|
|
+ <script src="./js/bootstrap-table.js"></script>
|
|
|
+ <script src="./js/bootstrap-table-en-US.js"></script>
|
|
|
+ <script src="./js/bootstrap-table-zh-CN.js"></script>
|
|
|
+ </head>
|
|
|
+<body>
|
|
|
+<div style="width: 96%;margin:auto;">
|
|
|
+ <div id="toolbar" class="form-inline" style="margin-top: 2%;margin-bottom: 2%">
|
|
|
+ <label for="searchProvince">省调：</label>
|
|
|
+ <input type="text" class="form-control" id="searchProvince">
|
|
|
+ <label for="searchType" style="margin-left: 2%">公式类型：</label>
|
|
|
+ <input type="text" class="form-control" id="searchType">
|
|
|
+ <button style="margin-left: 2%;" type="button" class="btn btn-primary" id="btnQuery">
|
|
|
+ <i></i> 查询
|
|
|
+ </button>
|
|
|
+ <button style="margin-left: 2%;" type="button" class="btn btn-primary" id="btnAdd">
|
|
|
+ <i></i> 新增
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <table id="table" class="table table-bordered" data-toggle="table" data-locale="zh-CN"></table>
|
|
|
+
|
|
|
+ <!-- 模态框 -->
|
|
|
+ <div class="modal fade" id="myModal">
|
|
|
+ <div class="modal-dialog" style="margin-left: 25%;">
|
|
|
+ <div class="modal-content" style="width: 800px;height: 750px;padding-left: 1%">
|
|
|
+
|
|
|
+ <!-- 模态框头部 -->
|
|
|
+ <div class="modal-header">
|
|
|
+ <h4 class="modal-title">公式信息</h4>
|
|
|
+ <button type="button" class="close" data-dismiss="modal">×</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 模态框主体 -->
|
|
|
+ <div class="modal-body">
|
|
|
+ <form id="form" class="needs-validation" novalidate >
|
|
|
+ <input type="text" class="form-control" id="id" name = "id" style="display: none">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-4">
|
|
|
+ <label for="formula">省调:</label>
|
|
|
+ <input type="text" class="form-control" id="province" name = "province" required>
|
|
|
+ <div class="invalid-feedback">请输入省调！</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-4">
|
|
|
+ <label for="electricType">场站类型:</label>
|
|
|
+ <input type="text" class="form-control" id="electricType" name="electricType" required>
|
|
|
+ <div class="invalid-feedback">请输入场站类型！</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-4">
|
|
|
+ <label for="electricType">是否为百分比:</label>
|
|
|
+ <select class="form-control" id="isRate" name="isRate">
|
|
|
+ <option value="1">是</option>
|
|
|
+ <option value="0">否</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <label for="type">公式类型:</label>
|
|
|
+ <input type="text" class="form-control" id="type" name="type" required>
|
|
|
+ <div class="invalid-feedback">请输入公式类型！</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <label for="ruleFormula">公式规则:</label>
|
|
|
+ <input type="text" class="form-control" id="ruleFormula" name="ruleFormula">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="formula">公式内容:</label>
|
|
|
+ <textarea class="form-control" rows="10" id="formula" name="formula" required></textarea>
|
|
|
+ <div class="invalid-feedback">请输入公式类型！</div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 模态框底部 -->
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" id="updateSave" class="btn btn-secondary">保存修改</button>
|
|
|
+ <button type="submit" id="addSave" class="btn btn-secondary">保存新增</button>
|
|
|
+ <button type="button" class="btn btn-secondary" data-dismiss="modal" >取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- .container-right table tr td input {
|
|
|
- width: 200px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ <div class="modal fade" id="alertModal">
|
|
|
+ <div class="modal-dialog">
|
|
|
+ <div class="modal-content">
|
|
|
+ <!-- 模态框头部 -->
|
|
|
+ <div class="modal-header">
|
|
|
+ <h4 class="modal-title">操作提醒</h4>
|
|
|
+ <button type="button" class="close" data-dismiss="modal">×</button>
|
|
|
+ </div>
|
|
|
+ <!-- 模态框主体 -->
|
|
|
+ <div class="modal-body">
|
|
|
+ 操作成功
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- .delete {
|
|
|
- color: #fff;
|
|
|
- background-color: #091538;
|
|
|
- }
|
|
|
+ <div class="modal fade" id="confirmModal">
|
|
|
+ <div class="modal-dialog">
|
|
|
+ <div class="modal-content">
|
|
|
+ <!-- 模态框头部 -->
|
|
|
+ <div class="modal-header">
|
|
|
+ <h4 class="modal-title">操作提醒</h4>
|
|
|
+ <button type="button" class="close" data-dismiss="modal">×</button>
|
|
|
+ </div>
|
|
|
+ <!-- 模态框主体 -->
|
|
|
+ <div class="modal-body">
|
|
|
+ <input type="text" id = "deleteId" style="display:none;">
|
|
|
+ 是否删除
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 模态框底部 -->
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-secondary" onclick="doDelete()">确定删除</button>
|
|
|
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
|
|
|
- .change {
|
|
|
- background-color: rgb(227 236 229);
|
|
|
- }
|
|
|
+ //点击查询触发表格加载
|
|
|
+ $("#btnQuery").click(function () {
|
|
|
+ initTable();
|
|
|
+ });
|
|
|
|
|
|
- .container-right table tr td span {
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- border-radius: 5px;
|
|
|
- background-color: antiquewhite;
|
|
|
- }
|
|
|
+ //点击新增
|
|
|
+ $("#btnAdd").click(function () {
|
|
|
+ add();
|
|
|
+ });
|
|
|
|
|
|
- .container-right table tr td span:hover {
|
|
|
- color: #fff;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+ // 初始化
|
|
|
+ initTable();
|
|
|
+
|
|
|
+ // 初始化数据
|
|
|
+ function initTable() {
|
|
|
+ $('#table').bootstrapTable('destroy');
|
|
|
+ $('#table').bootstrapTable({
|
|
|
+ locale: 'zh-CN',
|
|
|
+ method: 'post',
|
|
|
+ contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
|
|
|
+ url: "/calculateView/jarCalculate/select",//请求路径
|
|
|
+ pageNumber: 1,//初始化加载第一页
|
|
|
+ striped: true, //是否显示行间隔色
|
|
|
+ showRefresh: false,//显示刷新按钮
|
|
|
+ pageSize: 5, //初始化单页记录数
|
|
|
+ pagination: true, //是否分页
|
|
|
+ pageList: [5, 10, 20, 30, 50],
|
|
|
+ // search: true, //显示查询框
|
|
|
+ sidePagination: "server", //使用服务端分页
|
|
|
+ // 下面是封装的请求参数
|
|
|
+ queryParams: function (params) {
|
|
|
+ var province = $('#searchProvince').val();
|
|
|
+ if(province!=null&&province!=undefined){
|
|
|
+ province = province.trim();
|
|
|
+ }
|
|
|
+ var type = $('#searchType').val();
|
|
|
+ if(type!=null&&type!=undefined){
|
|
|
+ type = type.trim();
|
|
|
+ }
|
|
|
+ var temp = {
|
|
|
+ limit: params.limit, // 每页显示数量
|
|
|
+ offset: params.offset, // SQL语句起始索引
|
|
|
+ //查询参数
|
|
|
+ province: province,
|
|
|
+ type: type
|
|
|
+ };
|
|
|
+ return temp;
|
|
|
+ },
|
|
|
+ //将返回的数据封装到表格
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ field: 'id', title: 'id', width: '60'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'province', title: '省调', width: '60'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'electricType', title: '场站类型', width: '80'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'type', title: '公式类型', width: '300'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'formula', title: '公式内容'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'ruleFormula', title: '公式规则', width: '300'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ field: 'operate',
|
|
|
+ width: '160',
|
|
|
+ formatter: option
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- .search {
|
|
|
- width: 200px;
|
|
|
- font-size: 16px;
|
|
|
- text-align: center;
|
|
|
- padding: 10px 5px;
|
|
|
- background-color: rgb(207, 183, 226);
|
|
|
- }
|
|
|
+ // 详情按钮
|
|
|
+ function option(value, row, index) {
|
|
|
+ var update = '<button class="btn btn-primary" style="margin-left: 4%" sid="' + row.id + '" onclick="btnUpdate(' + row.id + ')">修改</button>';
|
|
|
+ var deleted = '<button class="btn btn-primary" style="margin-left: 4%" sid="' + row.id + '" onclick="btnDeleted(' + row.id + ')">删除</button>';
|
|
|
+ return update + deleted;
|
|
|
+ }
|
|
|
|
|
|
- .search input {
|
|
|
- width: 130px;
|
|
|
- height: 30px;
|
|
|
- background-color: snow;
|
|
|
- border: 1px solid rgb(80, 80, 80);
|
|
|
- outline: none;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
+ // 更新公式
|
|
|
+ function btnUpdate(sid) {
|
|
|
+ $('#updateSave').show();
|
|
|
+ $('#addSave').hide();
|
|
|
+ // 清空表单
|
|
|
+ document.querySelector('#form').reset();
|
|
|
+ // 初始化表单
|
|
|
+ initOne(sid);
|
|
|
+ // 弹出模态框
|
|
|
+ $('#myModal').modal('show');
|
|
|
+ }
|
|
|
|
|
|
-<body>
|
|
|
-<div class="container" >
|
|
|
- <div class="container-left">
|
|
|
- <p>信息输入</p>
|
|
|
- <form action="#" method="GET">
|
|
|
- type：
|
|
|
- <input type="text" name="type" id="type"/>
|
|
|
- formula：
|
|
|
- <input type="text" name="formula" id="formula"/>
|
|
|
- province：
|
|
|
- <input type="text" name="province" id="province"/>
|
|
|
- electricType：
|
|
|
- <input type="text" name="electricType" id="electricType"/>
|
|
|
- ruleFormula：
|
|
|
- <input type="text" name="ruleFormula" id="ruleFormula"/>
|
|
|
- <button type="button" class="btn">添加</button>
|
|
|
- <button type="reset">重置</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <div class="container-right">
|
|
|
- <p>信息显示</p>
|
|
|
- <table cellpadding="0" cellspacing="0">
|
|
|
- <thead>
|
|
|
- <td>ID</td>
|
|
|
- <td>类型</td>
|
|
|
- <td style="width: 10px">公式</td>
|
|
|
- <td>省调</td>
|
|
|
- <td>场站类型</td>
|
|
|
- <td>公式规则</td>
|
|
|
- <td>移除</td>
|
|
|
- <td>修改</td>
|
|
|
- </thead>
|
|
|
- <tbody id="main">
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
+ // 更新公式
|
|
|
+ function add() {
|
|
|
+ $('#updateSave').hide();
|
|
|
+ $('#addSave').show();
|
|
|
+ // 清空表单
|
|
|
+ document.querySelector('#form').reset();
|
|
|
+ // 弹出模态框
|
|
|
+ $('#myModal').modal('show');
|
|
|
+ }
|
|
|
|
|
|
-</body>
|
|
|
-<script type="text/javascript">
|
|
|
- //TODO 1.获取元素
|
|
|
- // 获取存放数据位置的tbody标签
|
|
|
- var tbody = document.querySelector('tbody');
|
|
|
- // 获取输入数据区域的input的标签
|
|
|
- var inputs = document.querySelectorAll('.container-left input');
|
|
|
- // 获取触发添加功能的button按钮
|
|
|
- var btn = document.querySelector('.btn');
|
|
|
- // 获取触发清空表单的button按钮
|
|
|
- var reset = document.querySelector('button[type=reset]');
|
|
|
- // 设定序号初始值
|
|
|
- var number = 0;
|
|
|
- // 判断记录值
|
|
|
- var flag = true;
|
|
|
- // 定义空对象，存放输入数据
|
|
|
- var message = {};
|
|
|
- // 定义空数组，存放对象
|
|
|
- var students = [];
|
|
|
- // 接口数据
|
|
|
- var list = [
|
|
|
- {
|
|
|
- id: 23,
|
|
|
- type: "POINT_S",
|
|
|
- formula: "(1-math.abs((sj-yc)/yc))*100",
|
|
|
- province: "E61",
|
|
|
- electricType: "E2",
|
|
|
- ruleFormula: null
|
|
|
+ // 保存更新内容
|
|
|
+ $("#updateSave").click(function () {
|
|
|
+ // 校验数据
|
|
|
+ if(form.checkValidity()===false){
|
|
|
+ event.preventDefault();
|
|
|
+ event.stopPropagation();
|
|
|
+ form.classList.add('was-validated');
|
|
|
+ return;
|
|
|
}
|
|
|
- ];
|
|
|
- $.ajax({
|
|
|
- url: "jarCalculate/select",
|
|
|
- type: "GET",
|
|
|
- async: false,
|
|
|
- dataType: "json",
|
|
|
- success: function (res) {
|
|
|
- list = res;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 新增接口
|
|
|
- function postAdd(data) {
|
|
|
+ var formdata = $("#form").serializeObject();
|
|
|
$.ajax({
|
|
|
-
|
|
|
- type: "post",
|
|
|
- contentType: 'application/json',
|
|
|
- url: "jarCalculate/add",
|
|
|
- /* data,*/
|
|
|
- data: JSON.stringify(data),
|
|
|
- type: "POST",
|
|
|
- async: false,
|
|
|
- text: "json",
|
|
|
- success: function (res) {
|
|
|
- // 将输入的数据存入数组
|
|
|
- message = {
|
|
|
- "number": number,
|
|
|
- "id": data.id,
|
|
|
- "type": inputs[0].value,
|
|
|
- 'formula': inputs[1].value,
|
|
|
- 'province': inputs[2].value,
|
|
|
- 'electricType': inputs[3].value,
|
|
|
- 'ruleFormula': inputs[4].value
|
|
|
- };
|
|
|
- alert('新增成功')
|
|
|
- // 调用去重函数
|
|
|
- clearMess();
|
|
|
- // 启用自动数据重置
|
|
|
- reset.click();
|
|
|
-
|
|
|
+ type: 'post',
|
|
|
+ url: '/calculateView/jarCalculate/update',
|
|
|
+ contentType: "application/json; charset=utf-8",
|
|
|
+ data: JSON.stringify(formdata),
|
|
|
+ success: function (data) {
|
|
|
+ $("#myModal").modal('hide');
|
|
|
+ $("#alertModal").modal('show');
|
|
|
+ setTimeout(function (){
|
|
|
+ $('#alertModal').modal('hide')
|
|
|
+ }, 2000);
|
|
|
+ initTable();
|
|
|
}
|
|
|
});
|
|
|
- };
|
|
|
+ });
|
|
|
|
|
|
- // 修改
|
|
|
- function postEdit(data) {
|
|
|
+ // 保存新建内容
|
|
|
+ $("#addSave").click(function () {
|
|
|
+ // 校验数据
|
|
|
+ if(form.checkValidity()===false){
|
|
|
+ event.preventDefault();
|
|
|
+ event.stopPropagation();
|
|
|
+ form.classList.add('was-validated');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var formdata = $("#form").serializeObject();
|
|
|
+ console.log(formdata);
|
|
|
$.ajax({
|
|
|
- url: "jarCalculate/edit",
|
|
|
- data: JSON.stringify(data),
|
|
|
- type: "POST",
|
|
|
- async: false,
|
|
|
- dataType: "json",
|
|
|
- contentType: 'application/json',
|
|
|
- success: function (res) {
|
|
|
- alert(res);
|
|
|
+ type: 'post',
|
|
|
+ url: '/calculateView/jarCalculate/add',
|
|
|
+ contentType: "application/json; charset=utf-8",
|
|
|
+ data: JSON.stringify(formdata),
|
|
|
+ success: function (data) {
|
|
|
+ $("#myModal").modal('hide');
|
|
|
+ $('#alertModal').modal('show');
|
|
|
+ setTimeout(function (){
|
|
|
+ $('#alertModal').modal('hide')
|
|
|
+ }, 2000);
|
|
|
+ initTable();
|
|
|
}
|
|
|
});
|
|
|
- };
|
|
|
+ });
|
|
|
|
|
|
+ // 删除公式
|
|
|
+ function btnDeleted(sid) {
|
|
|
+ $('#deleteId').val(sid);
|
|
|
+ $('#confirmModal').modal('show');
|
|
|
+ }
|
|
|
+
|
|
|
// 删除
|
|
|
- function postDelet(index) {
|
|
|
+ function doDelete() {
|
|
|
+ var deleteId = $('#deleteId').val();
|
|
|
$.ajax({
|
|
|
- url: "jarCalculate/delete",
|
|
|
- data: JSON.stringify({
|
|
|
- id: students[index].id
|
|
|
- }),
|
|
|
- type: "post",
|
|
|
- dataType: "json",
|
|
|
- contentType: 'application/json',
|
|
|
- cache: false,
|
|
|
- success: function (res) {
|
|
|
- alert(res);
|
|
|
+ url: "/calculateView/jarCalculate/delete",
|
|
|
+ type: 'post',
|
|
|
+ data: {
|
|
|
+ id: deleteId
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ $('#confirmModal').modal('hide');
|
|
|
+ initTable();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
-</script>
|
|
|
-<script>
|
|
|
- for (var i = 0; i < list.length; i++) {
|
|
|
- message = {
|
|
|
- "number": i + 1,
|
|
|
- "id": list[i].id,
|
|
|
- "type": list[i].type,
|
|
|
- 'formula': list[i].formula,
|
|
|
- 'province': list[i].province,
|
|
|
- "electricType": list[i].electricType,
|
|
|
- 'ruleFormula': list[i].ruleFormula
|
|
|
- };
|
|
|
- inputs[0].value = list[i].type;
|
|
|
- inputs[1].value = list[i].formula;
|
|
|
- inputs[2].value = list[i].province;
|
|
|
- inputs[3].value = list[i].electricType;
|
|
|
- inputs[4].value = list[i].ruleFormula;
|
|
|
- // 调用去重函数
|
|
|
- clearMess();
|
|
|
- // 启用自动数据重置
|
|
|
- reset.click();
|
|
|
- }
|
|
|
- // TODO 2.添加功能
|
|
|
- btn.addEventListener('click', function () {
|
|
|
- // 输入框非空判断
|
|
|
- if (inputs[0].value != '' && inputs[0].value != null && inputs[1].value != '' && inputs[1].value !=
|
|
|
- null && inputs[2].value != '' && inputs[2].value != null && inputs[3].value != '' && inputs[3].value != null&& inputs[4].value != '' && inputs[4].value != null) {
|
|
|
- postAdd({
|
|
|
- type: inputs[0].value,
|
|
|
- formula: inputs[1].value,
|
|
|
- province: inputs[2].value,
|
|
|
- electricType: inputs[3].value,
|
|
|
- ruleFormula: inputs[4].value
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 空数据提示
|
|
|
- alert("数据输入不完全，请重新输入数据");
|
|
|
- }
|
|
|
- ;
|
|
|
- });
|
|
|
-
|
|
|
- //TODO 去重函数
|
|
|
- function clearMess() {
|
|
|
- students.push(message);
|
|
|
- // 调用回显函数
|
|
|
- innerMess();
|
|
|
- };
|
|
|
-
|
|
|
- // TODO 回显函数
|
|
|
- function innerMess() {
|
|
|
- // 生成表格内容区域
|
|
|
- if (flag) {
|
|
|
- // 创建新的tr节点
|
|
|
- var trs = document.createElement('tr');
|
|
|
- tbody.appendChild(trs);
|
|
|
-
|
|
|
- // 每次创建一个tr，number+1
|
|
|
- number++;
|
|
|
|
|
|
- // 创建一个td，接收number值，赋予序号的含义
|
|
|
- var tdNum = document.createElement('td');
|
|
|
- tdNum.classList.add('nums');
|
|
|
- tdNum.innerHTML = number;
|
|
|
- trs.appendChild(tdNum);
|
|
|
-
|
|
|
- // 将输入框的值赋予到新创建的td
|
|
|
- for (var i = 0; i < inputs.length; i++) {
|
|
|
- var tds = document.createElement('td');
|
|
|
- tds.innerHTML = inputs[i].value;
|
|
|
- trs.appendChild(tds);
|
|
|
+ // 初始化表单
|
|
|
+ function initOne(id) {
|
|
|
+ $.ajax({
|
|
|
+ type: "post",
|
|
|
+ url: "/calculateView/jarCalculate/getOne",
|
|
|
+ data: {
|
|
|
+ id:id
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ $("#id").val(data.id);
|
|
|
+ $("#province").val(data.province);
|
|
|
+ $("#electricType").val(data.electricType);
|
|
|
+ $("#type").val(data.type);
|
|
|
+ $("#isRate").val(data.isRate);
|
|
|
+ $("#formula").val(data.formula);
|
|
|
+ $("#ruleFormula").val(data.ruleFormula);
|
|
|
}
|
|
|
- ;
|
|
|
-
|
|
|
- // 创建移除操作按钮 - 删除
|
|
|
- var deleteBtn = document.createElement('td');
|
|
|
- deleteBtn.innerHTML = `<button class="delete" data-event="deleteMess">删除</button>`;
|
|
|
- trs.appendChild(deleteBtn);
|
|
|
-
|
|
|
- // 创建修改操作按钮 - 修改
|
|
|
- var changeBtn = document.createElement('td');
|
|
|
- changeBtn.innerHTML = `<button class="change" data-event="changeMess">修改</button>`;
|
|
|
- trs.appendChild(changeBtn);
|
|
|
- }
|
|
|
- ;
|
|
|
- };
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- //TODO 删除函数
|
|
|
- function deleteMess(element) {
|
|
|
- // 获取到当前标签的序号
|
|
|
- var deleteIndex = element.parentNode.parentNode;
|
|
|
- if (confirm("是否确认操作")) {
|
|
|
- deleteIndex.remove();
|
|
|
- // 根据序号删除数组中的对应数据
|
|
|
- for (var i = 0; i < students.length; i++) {
|
|
|
- if (students[i].number == deleteIndex.children[0].innerHTML) {
|
|
|
- postDelet(i)
|
|
|
+ //定义serializeObject方法，序列化表单
|
|
|
+ $.fn.serializeObject = function() {
|
|
|
+ var obj = {};
|
|
|
+ var arrayTmp = this.serializeArray();
|
|
|
+ $.each(arrayTmp, function() {
|
|
|
+ if (obj[this.name]) {
|
|
|
+ if (!obj[this.name].push) {
|
|
|
+ obj[this.name] = [ obj[this.name] ];
|
|
|
}
|
|
|
- };
|
|
|
- students.splice(i, 1);
|
|
|
- var nums = document.querySelectorAll('.nums');
|
|
|
- // 删除行的同时，控制删除行以外行数序号的删减
|
|
|
- var index;
|
|
|
- if (nums.length > 0) {
|
|
|
- for (var i = 0; i < nums.length; i++) {
|
|
|
- index = i;
|
|
|
- var nums = document.querySelectorAll('.nums');
|
|
|
- nums[index].innerHTML = index + 1;
|
|
|
- };
|
|
|
- };
|
|
|
- number--;
|
|
|
- };
|
|
|
- };
|
|
|
-
|
|
|
- //TODO 修改函数
|
|
|
- function changeMess(element) {
|
|
|
- var tds2 = element.parentNode.parentNode.children;
|
|
|
- for (var i = 1; i < tds2.length - 2; i++) {
|
|
|
- inputs[i - 1].value = tds2[i].innerHTML;
|
|
|
- tds2[i].innerHTML = `<input type="text" value='${tds2[i].innerText}'/>`;
|
|
|
- };
|
|
|
- element.parentNode.innerHTML = `<button class="change" data-event="updateMess">更新</button>`;
|
|
|
+ obj[this.name].push(this.value || '');
|
|
|
+ } else {
|
|
|
+ obj[this.name] = this.value || '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
};
|
|
|
|
|
|
- //TODO 更新函数
|
|
|
- function updateMess(element) {
|
|
|
- var id = '';
|
|
|
- var tdsInp = document.querySelectorAll('table input');
|
|
|
- var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);
|
|
|
- var tds3 = element.parentNode.parentNode.children;
|
|
|
- for (var i = 0; i < students.length; i++) {
|
|
|
- var a= students[i].number;
|
|
|
- var b = tds3[0].innerHTML;
|
|
|
- if (students[i].id == tds3[0].innerHTML) {
|
|
|
- id = students[i].id;
|
|
|
- };
|
|
|
- };
|
|
|
- students.splice(firstNumber - 1, 1);
|
|
|
- var message2 = {
|
|
|
- "number": firstNumber - 1,
|
|
|
- "id": id,
|
|
|
- "type": tdsInp[0].value,
|
|
|
- 'formula': tdsInp[1].value,
|
|
|
- 'province': tdsInp[2].value,
|
|
|
- "electricType": tdsInp[3].value,
|
|
|
- 'ruleFormula': tdsInp[4].value
|
|
|
- };
|
|
|
- postEdit({
|
|
|
- id: id,
|
|
|
- type: tdsInp[0].value,
|
|
|
- formula: tdsInp[1].value,
|
|
|
- province: tdsInp[2].value,
|
|
|
- electricType: tdsInp[3].value,
|
|
|
- ruleFormula: tdsInp[4].value,
|
|
|
- })
|
|
|
- students.push(message2);
|
|
|
- for (var i = 0; i < tdsInp.length; i++) {
|
|
|
- tds3[i + 1].innerHTML = tdsInp[i].value;
|
|
|
- }
|
|
|
- ;
|
|
|
- console.log(students)
|
|
|
- reset.click();
|
|
|
- element.parentNode.innerHTML = `<button class="change" data-event="changeMess">修改</button>`;
|
|
|
- };
|
|
|
- window.addEventListener('click', e => {
|
|
|
- const {event} = e.target.dataset
|
|
|
- if (event == 'updateMess') {
|
|
|
- updateMess(e.target)
|
|
|
- }
|
|
|
- if (event == 'changeMess') {
|
|
|
- changeMess(e.target)
|
|
|
- }
|
|
|
- if (event == 'deleteMess') {
|
|
|
- deleteMess(e.target)
|
|
|
- }
|
|
|
- })
|
|
|
</script>
|
|
|
-
|
|
|
-</html>
|
|
|
+</html>
|
zhangchenglong