123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249 |
- <!DOCTYPE html>
- <html >
- <head>
- <meta charset="UTF-8">
- <title>参赛队成绩表格</title>
- <link rel="stylesheet" href="static/css/index.css">
- <link rel="stylesheet" href="static/eui/element-ui.css">
- <script src="static/vue/vue.min.js"></script>
- <script src="static/vue/vue-resource.js"></script>
- <script src="static/eui/index.js"></script>
- <script src="static/comm/Ajax.js"></script>
- <script src="js/jquery-3.4.1.min.js"></script>
- <link rel="stylesheet" href="css/demo.css">
- <script src="js/other.js"></script>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- <style type="text/css">
- .match-achievement{
- margin: 50px 50px;
- width:1000px;
- }
- .match-achievement table{
- background:#E0ECFF;
- width:100%;
- }
- .match-achievement td{
- background:#fafafa;
- text-align:center;
- padding:2px;
- }
- .match-achievement td{
- background:#E0ECFF;
- }
- .match-achievement td.drop{
- background:#fafafa;
- width:100px;
- }
- .match-achievement td.over{
- background:#FBEC88;
- }
- .item{
- text-align:center;
- border:1px solid #499B33;
- background:#fafafa;
- width:100px;
- }
- .assigned{
- border:1px solid #BC2A4D;
- }
- .add{
- width: 100px;
- height: 30px;
- }
- a{
- text-decoration: none;
- color: #000000;
- }
- a:hover{
- color: #CC2222;
- }
- </style>
- </head>
- <body style="width: 70%;">
- <div id="app">
- <div class="match-achievement" >
- <h1>参赛队成绩表</h1>
-
- <table class="tab" >
- <tr>
- <td>
- <a href="#" class="easyui-linkbutton"
- data-options="iconCls:'icon-add'" id="add">新增
- </a>
- <a href="#" class="easyui-linkbutton"
- data-options="iconCls:'icon-edit'" id="edit">编辑
- </a>
- <a href="#" class="easyui-linkbutton"
- data-options="iconCls:'icon-cancel'" id="del">删除
- </a>
- </td>
- <td>id</td>
- <td>项目名</td>
- <td>性别</td>
- <td>所属部门</td>
- <td>排序</td>
- <td>取前几名</td>
- <td>前几名的分值</td>
-
-
- </tr>
- <tr tr v-for="c1 in c1s">
- <td class="drop"><input type="checkbox"></td>
- <td class="drop">{{c1.id}}</td>
- <td class="drop">{{c1.name}}</td>
- <td class="drop">{{c1.gender}}</td>
- <td class="drop">{{c1.department}}</td>
- <td class="drop">{{c1.sequenue}}</td>
- <td class="drop">{{c1.tops}}</td>
- <td class="drop">{{c1.scours}}</td>
- </tr>
-
- </table>
- </div>
- <!--输入框-->
- <div class="inp">
- <h3>新增</h3>
- <form method="post">
- 项目名:<input id="addname" type="text" name="title"><br>
- 性别:<input id="addgender" type="text" name="sotr"><br>
- 所属部门:<input id="adddepartment" type="text" name="sotr"><br>
-
-
- </form>
- <button value="按钮" id="findAll" @click="onSubmit1">添加</button>
- </div>
- <div class="editinp">
- <h3>编辑 </h3>
- <form method="post">
- id:<input id="gaiid" type="text" name="id"><br>
- 项目名:<input id="gainame" type="text" name="title"><br>
- 性别:<input id="gaigender" type="text" name="sotr">a:综合 m男 f女<br>
- 所属部门:<input id="gaidepartment" type="text" name="id"><br>
- 排序:<input id="gaisequenue" type="text" name="title"><br>
- 取前几名:<input id="gaitops" type="text" name="sotr"><br>
- 前几名的分值:<input id="gaiscours" type="text" name="id"><br>
-
- </form>
- <button value="按钮" id="findAll2" @click="onSubmit2">修改</button>
- </div>
- <div class="delinp">
- <h3>删除 </h3>
- <form method="post">
- id: <input type="text" id="shanid" name="id"><br>
-
- </form>
- <button value="按钮" id="findAll3" @click="onSubmit3">删除</button>
- </div>
- </div>
- </body>
-
- <script>
-
- new Vue({
- el: '#app',
- data() {
- return {
- c1s: [],
- listLoading:false,
- }
- },
- created() {
- this.ajax = new Ajax(this);
- this.getSportsitems_peopleController()
-
- },
- methods: {
-
- //通过ajax去请求服务端,获取数据
- getSportsitems_peopleController() {
- let that = this;
- let url = "SportsitemsController/findAll";
- //调用Ajax的get方法
- that.ajax.get(url, function (rs) {
- that.c1s = rs;
- console.log(that.c1s)
- });
- },
-
- //通过ajax去请求服务端,获取数据
- getSportsitems_peopleController1() {
- var name2 = $("#addname").val();
- var gender2 =$("#addgender").val();
- var department2 = $("#adddepartment").val();
-
- axios.post('http://localhost:8199/SportsitemsController/save', {
- gender: gender2,
- name: name2,
- department : department2
- }).then(function (response) {
- location.reload();
- console.log(response);
- }).catch(function (error) {
- console.log(error);
- });
-
- },
-
- getSportsitems_peopleController2() {
- var id2 =$("#gaiid").val();
- var name2 = $("#gainame").val();
- var gender2 =$("#gaigender").val();
- var department2 = $("#gaidepartment").val();
- var sequenue2 = $("#gaisequenue").val();
- var tops2 = $("#gaitops").val();
- var scours2 = $("#gaiscours").val();
-
-
- axios.post('http://localhost:8199/SportsitemsController/update', {
- id : id2,
- name : name2,
- gender : gender2,
- department : department2,
- sequenue : sequenue2,
- tops : tops2,
- scours : scours2
- }).then(function (response) {
- location.reload();
- console.log(response);
- }).catch(function (error) {
- console.log(error);
- });
-
- },
-
- getSportsitems_peopleController3() {
- var id2 =$("#shanid").val();
-
- axios.post('http://localhost:8199/SportsitemsController/delete', {
- id: id2
- }).then(function (response) {
- location.reload();
- console.log(response);
- }).catch(function (error) {
- console.log(error);
- });
-
- },
-
-
- onSubmit1() {
- let that = this;
- that.getSportsitems_peopleController1()
- },
- onSubmit2() {
- let that = this;
- that.getSportsitems_peopleController2()
- },
-
- onSubmit3() {
- let that = this;
- that.getSportsitems_peopleController3()
- },
-
-
-
- }
- })
-
- </script>
- </html>
|