商丘12345 前端

huaWuRiZhi.html 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="../css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
  6. <link href="../css/bootstrap.min.css" />
  7. <link rel="stylesheet" href="../css/boot/bootstrap-table.css" />
  8. <link href="../css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  9. <link href="../css/animate.min.css" rel="stylesheet">
  10. <link href="../css/style.min862f.css?v=4.1.0" rel="stylesheet">
  11. <link href="../css/layer/need/layer.css" />
  12. <link rel="stylesheet" href="../css/laydate/need/laydate.css" />
  13. <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
  14. <title>系统管理-->登录日志</title>
  15. <style>
  16. .clearfix:after {
  17. content: "";
  18. display: block;
  19. clear: both;
  20. }
  21. .toolBar {
  22. padding: 15px 0;
  23. border-bottom: 1px solid #ccc;
  24. margin-bottom: 25px;
  25. padding-right: 45px;
  26. }
  27. .toolBar input {
  28. width: 128px;
  29. padding: 2px 2PX 2PX 10PX;
  30. height: 28px;
  31. border: 1px solid #ebebeb;
  32. color: #1ab394;
  33. outline: none;
  34. vertical-align: middle;
  35. }
  36. .btns {
  37. background: #1ab394;
  38. color: #fff;
  39. padding: 3px 10px;
  40. outline: none;
  41. font-size: 12px;
  42. margin-left: 15px;
  43. border: 0;
  44. border-radius: 3px;
  45. }
  46. .model {
  47. position: fixed;
  48. top: 0;
  49. right: 0;
  50. bottom: 0;
  51. left: 0;
  52. height: 100%;
  53. width: 100%;
  54. background: rgba(0, 0, 0, 0.48);
  55. z-index: 100;
  56. display: none;
  57. }
  58. .box {
  59. width: 30%;
  60. margin: 0 auto;
  61. margin-top: 5%;
  62. }
  63. .box .btop {
  64. height: 35px;
  65. background: #1ab394;
  66. color: #fff;
  67. line-height: 35px;
  68. padding: 0 15px;
  69. /*margin-bottom: 15px;*/
  70. }
  71. .box .btop p.btl {
  72. float: left;
  73. margin: 0;
  74. }
  75. .box .btop p.btr {
  76. float: right;
  77. cursor: pointer;
  78. margin: 0;
  79. font-size: 20px;
  80. }
  81. .box>input {
  82. display: block;
  83. height: 34px;
  84. padding: 6px 12px;
  85. font-size: 14px;
  86. line-height: 1.42857143;
  87. color: #555;
  88. background-color: #fff;
  89. background-image: none;
  90. border: 1px solid #ccc;
  91. border-radius: 4px;
  92. margin: 35px auto;
  93. }
  94. .boxCon {
  95. width: 100%;
  96. background: #fff;
  97. text-align: center;
  98. padding: 10px 15px;
  99. height: auto;
  100. overflow-y: auto;
  101. }
  102. .boxCon>div {
  103. padding: 15px 0;
  104. }
  105. </style>
  106. </head>
  107. <body>
  108. <div class="container-fluid">
  109. <div class="toolBar clearfix">
  110. <div class="toolLeft" style="float: left;">
  111. <button class="btns del">批量删除</button>
  112. </div>
  113. <div class="toolRight" style="float: right;">
  114. <span>操作人名称:<input type="text" class="czName" /></span>
  115. <span>操作时间:<input type="text" class="laydate-icon loginTime" id="startTime"/></span>
  116. <button class="btns search">搜索</button>
  117. </div>
  118. </div>
  119. <div class="tableBox">
  120. <table id="table1" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  121. <thead>
  122. <tr>
  123. <th data-align="center" data-formatter="setCode"></th>
  124. <th data-field="state" data-checkbox="true" data-align="center"></th>
  125. <th data-field="F_LoginId" data-align="center">操作人编号</th>
  126. <th data-field="F_LoginDate" data-align="center">登录时间</th>
  127. <th data-field="F_LoginOutDate" data-align="center">退出时间</th>
  128. <th data-field="F_LoginName" data-align="center">操作人名称</th>
  129. <th data-field="F_Result" data-align="center">操作内容</th>
  130. </tr>
  131. </thead>
  132. </table>
  133. </div>
  134. </div>
  135. <!--删除弹出内容-->
  136. <div class="model delModel">
  137. <div class="box">
  138. <!--<div class="btop clearfix">
  139. <p class="btl"><span>删除参数信息</span></p>
  140. <p class="btr delBtr" title="关闭">X</p>
  141. </div>-->
  142. <div class="boxCon" style="height: 150px;">
  143. 您确定要删除选择的记录吗?
  144. <p style="margin-top: 30px;"><button class="btns sure">确定</button>
  145. <button class="btns return">取消</button></p>
  146. </div>
  147. </div>
  148. </div>
  149. <script src="../js/jquery.min.js?v=2.1.4"></script>
  150. <script src="../js/jquery.cookie.js"></script>
  151. <script src="../css/laydate/laydate.js"></script>
  152. <script src="../js/bootstrap.min.js"></script>
  153. <script src="../js/bootstrap-table.js"></script>
  154. <script src="../js/bootstrap-table-zh-CN.js"></script>
  155. <script src="../Script/Common/huayi.load.js"></script>
  156. <script src="../Script/Common/huayi.config.js"></script>
  157. <script>
  158. var table = $('#table1');
  159. var token = $.cookie("token");
  160. laydate.skin('molv');
  161. laydate({
  162. elem: '#startTime',
  163. event: 'focus',
  164. format: 'YYYY-MM-DD', // 分隔符可以任意定义,该例子表示只显示年月
  165. });
  166. $('.search').click(function(){
  167. initTable(token);
  168. })
  169. //==================删除功能开始================================
  170. //删除按钮
  171. $('.del').click(function() {
  172. $('.delModel').css('display', 'block');
  173. })
  174. //关闭按钮
  175. $('.delBtr').click(function() {
  176. $('.delModel').css('display', 'none');
  177. })
  178. //*****************删除功能结束****************************
  179. initTable(token);
  180. function initTable(token) {
  181. //先销毁表格
  182. table.bootstrapTable('destroy');
  183. //初始化表格,动态从服务器加载数据
  184. table.bootstrapTable({
  185. method: "get", //使用get请求到服务器获取数据
  186. url: huayi.config.callcenter_url+"Log/GetList", //获取数据的Servlet地址
  187. contentType: "application/x-www-form-urlencoded",striped: true, //表格显示条纹
  188. pagination: true, //启动分页
  189. pageSize: 5, //每页显示的记录数
  190. pageNumber: 1, //当前第几页
  191. pageList: [5, 10, 50, 100], //记录数可选列表
  192. search: false, //是否启用查询
  193. showColumns: false, //显示下拉框勾选要显示的列
  194. showRefresh: false, //显示刷新按钮
  195. sidePagination: "server", //表示服务端请求
  196. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  197. //设置为limit可以获取limit, offset, search, sort, order
  198. queryParamsType: "undefined",
  199. queryParams: function queryParams(params) { //设置查询参数
  200. var param = {
  201. pageindex: params.pageNumber,
  202. pagesize: params.pageSize,
  203. token: token,
  204. name:$('.czName').val(),//操作人名称
  205. logindate:$('.loginTime').val()//操作人名称
  206. };
  207. return param;
  208. },
  209. onLoadSuccess: function() { //加载成功时执行
  210. //layer.msg("加载成功");
  211. },
  212. onLoadError: function() { //加载失败时执行
  213. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  214. }
  215. });
  216. }
  217. /*选中行添加背景颜色*/
  218. table.on("click-row.bs.table", function(e, row, ele) {
  219. $('.success').removeClass('success'); //去除之前选中的行的,选中样式
  220. $(ele).addClass('success'); //添加当前选中的 success样式用于区别
  221. });
  222. function setCode(val, row, index) {
  223. return index + 1;
  224. }
  225. </script>
  226. </body>
  227. </html>