信阳市12345_前端

MobileLocationList.html 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../js/huayi.load.js"></script>
  6. <title>手机号归属地</title>
  7. <style>
  8. .toolBar {
  9. padding: 15px 0;
  10. border-bottom: 1px solid #ccc;
  11. }
  12. .tool_downs {
  13. display: flex;
  14. justify-content: center;
  15. }
  16. .tool_downs span {
  17. display: block;
  18. width: 100%;
  19. height: 100%;
  20. text-align: center;
  21. }
  22. .tool_downs a {
  23. display: block;
  24. list-style: none;
  25. float: left;
  26. padding-left: 10px;
  27. }
  28. </style>
  29. <script>
  30. $(document).ready(function () {
  31. initTable();
  32. $(".searchGo").click(function () {
  33. initTable();
  34. });
  35. $(".addBtn").click(function () {
  36. layer.open({
  37. type: 2,
  38. content: "./MobileLocationAdd.html", //iframe的url,no代表不显示滚动条
  39. title: "手机号归属地",
  40. area: ["500px", "400px"], //宽高
  41. });
  42. });
  43. });
  44. function initTable() {
  45. //先销毁表格
  46. $("#tableList").bootstrapTable("destroy");
  47. //初始化表格,动态从服务器加载数据
  48. $("#tableList").bootstrapTable({
  49. method: "post", //使用get请求到服务器获取数据
  50. url: huayi.config.callcenter_url + "SystemApi/GetMobileLocationList", //获取数据的Servlet地址
  51. contentType: "application/x-www-form-urlencoded",
  52. striped: true, //表格显示条纹
  53. pagination: true, //启动分页
  54. pageSize: 10, //每页显示的记录数
  55. pageNumber: 1, //当前第几页
  56. pageList: [10, 20, 50, 100], //记录数可选列表
  57. search: false, //是否启用查询
  58. showColumns: false, //显示下拉框勾选要显示的列
  59. showRefresh: false, //显示刷新按钮
  60. sidePagination: "server", //表示服务端请求
  61. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  62. //设置为limit可以获取limit, offset, search, sort, order
  63. queryParamsType: "undefined",
  64. queryParams: function queryParams(params) {
  65. //设置查询参数
  66. var param = {
  67. currentPage: params.pageNumber,
  68. pageSize: params.pageSize,
  69. mobilePrefix: $("#keyvalue").val()
  70. };
  71. return param;
  72. },
  73. onLoadSuccess: function () {
  74. //加载成功时执行
  75. //layer.msg("加载成功");
  76. },
  77. onLoadError: function () {
  78. //加载失败时执行
  79. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  80. },
  81. });
  82. }
  83. function operation(val, row) {
  84. return (
  85. '<div class="tool_downs">' +
  86. '<a href="javascript:;" class="aBtn" authorize="yes" onclick="editBtn(' +
  87. row.mobilePrefix +
  88. ')" title="编辑">编辑</a>' +
  89. '<a href="javascript:;" class="aBtn" authorize="yes" onclick="deleteBtn(' +
  90. row.mobilePrefix +
  91. ')" title="删除">删除</a>' +
  92. "</div>"
  93. );
  94. }
  95. function editBtn(id) {
  96. layer.open({
  97. type: 2,
  98. content: "./MobileLocationAdd.html?id=" + id , //iframe的url,no代表不显示滚动条
  99. title: "手机号归属地",
  100. area: ["500px", "400px"], //宽高
  101. });
  102. }
  103. function deleteBtn(id) {
  104. layer.confirm('确定删除吗?', {
  105. btn: ['是', '否'] //按钮
  106. }, function () {
  107. $.getJSON(huayi.config.callcenter_url + "SystemApi/DeleteMobileLocation", {
  108. mobilePrefix: id
  109. }, function (result) {
  110. if (result.state.toLowerCase() == "success") {
  111. layer.msg("删除成功");
  112. initTable();
  113. }
  114. })
  115. });
  116. }
  117. </script>
  118. </head>
  119. <body class="gray-bg">
  120. <div class="container-fluid wrapper-content animated fadeInRight">
  121. <div class="toolBar clearfix">
  122. <div class="toolRight">
  123. <span>
  124. 手机号前缀:
  125. <input id="keyvalue" type="text" class="">
  126. </span>
  127. <button class="btns searchGo">搜索</button>
  128. <button class="btns addBtn">添加</button>
  129. </div>
  130. </div>
  131. <div class="treeTable clearfix">
  132. <div class="tableCon col-md-12">
  133. <table id="tableList" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  134. <thead>
  135. <tr>
  136. <th data-field="mobilePrefix" data-align="center">手机号前缀</th>
  137. <th data-field="areaCode" data-align="center">区号</th>
  138. <th data-field="location" data-align="center">归属地</th>
  139. <th data-field="cardType" data-align="center">卡类型</th>
  140. <th data-align="center" data-formatter="operation" data-width="150">操作</th>
  141. </tr>
  142. </thead>
  143. <tbody id="tbody"></tbody>
  144. </table>
  145. </div>
  146. </div>
  147. </div>
  148. </body>
  149. </html>