user.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用户管理</title>
  6. <link href="plugin/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  7. <link href="plugin/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
  8. <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
  9. <link rel="stylesheet" href="css/base.css">
  10. <link rel="stylesheet" href="css/table.css">
  11. </head>
  12. <body style="background-color: #e6ecf5;min-width: 1100px">
  13. <main class="main">
  14. <!--头部-->
  15. <header class="heared">
  16. <span class="head-logo">前后台通用模板</span>
  17. <ul class="head-ul"><li><a href="home.html" class="active-a">首页</a> </li>
  18. <li><a href="videlctr.html">视频监控</a> </li>
  19. <li><a href="map.html">地图管理</a> </li>
  20. <li><a href="static.html">统计分析</a> </li>
  21. <li><a href="form.html">表单信息</a> </li>
  22. <li><a href="user.html">用户管理</a></li>
  23. <li><a href="part.html">部门管理</a></li>
  24. <li><a href="date.html">日程管理</a></li>
  25. </ul>
  26. <div class="head-right"><span id="time"></span><span>Admin</span></div>
  27. </header>
  28. <!--身体-->
  29. <section class="section" >
  30. <div class="l_left news_left">
  31. <h6>部门目录</h6>
  32. <div class="tree_left_top">
  33. <div class=" order_ztree l_left organize_ztree" style="width: 100%">
  34. <p><ul id="treeDemo" class="ztree" style=" overflow:auto;margin-left: 20px"></ul></p>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="l_left news_right">
  39. <h6>用户管理</h6>
  40. <div class="notice_check">
  41. <div class="btn-group l_left" style="margin-right: 4px">
  42. <button type="button" class="btn btn-default change" style="height: 30px;line-height: 30px;padding: 0 12px !important;font-size: 12px">选择条件</button>
  43. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="height: 30px;line-height: 30px">
  44. <span class="caret"></span>
  45. <span class="sr-only"></span>
  46. </button>
  47. <ul class="dropdown-menu">
  48. <li>部门名称</li>
  49. <li>部门编号</li>
  50. <li>负责人</li>
  51. <li>电话号</li>
  52. <li>分机号</li>
  53. </ul>
  54. </div>
  55. <div class="l_left">
  56. <input type="text" class="find_input">
  57. </div>
  58. <button class="check_btn">查询</button>
  59. <div class="notice_nav r_right">
  60. <a class="btn btn-default" onclick="addUser()"><span class="glyphicon glyphicon-plus"></span>新增</a>
  61. <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>删除</a>
  62. <a class="btn btn-default" onclick="addUser()"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
  63. <a class="btn btn-default" onclick="reset_password()"><span class="glyphicon glyphicon-lock"></span>重置密码</a>
  64. </div>
  65. <div class="clear"></div>
  66. </div>
  67. <ul class="news_table department_table">
  68. <li>
  69. <table id="table" class="table_style" style="margin: 0 auto" ></table>
  70. </li>
  71. </ul>
  72. </div>
  73. <div class="clear"></div>
  74. </section>
  75. </main>
  76. <script src="js/jquery.js"></script>
  77. <script src="plugin/bstable/js/bootstrap.min.js"></script>
  78. <script src="plugin/bstable/js/bootstrap-table.js"></script>
  79. <script src="plugin/bstable/js/bootstrap-table-zh-CN.min.js"></script>
  80. <script type="text/javascript" src="plugin/ztree/jquery.ztree.core-3.5.js"></script>
  81. <script type="text/javascript" src="plugin/ztree/jquery.ztree.excheck-3.5.js"></script>
  82. <script type="text/javascript" src="plugin/ztree/jquery.ztree.exedit-3.5.js"></script>
  83. <script src="plugin/layer_v2.1/layer/layer.js"></script>
  84. <script src="js/organize.js"></script>
  85. <script>
  86. $(function(){
  87. $(".head-ul li a").click(function(){
  88. $(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
  89. $(this).parents('li').find("ul").show();
  90. $(this).parents("li").sibling().find("ul").hide();
  91. })
  92. $('#table').bootstrapTable({
  93. method: "get",
  94. striped: true,
  95. singleSelect: false,
  96. url: "json/user.json",
  97. dataType: "json",
  98. pagination: true, //分页
  99. pageSize: 10,
  100. pageNumber: 1,
  101. search: false, //显示搜索框
  102. contentType: "application/x-www-form-urlencoded",
  103. queryParams: null,
  104. columns: [
  105. {
  106. checkbox: "true",
  107. field: 'check',
  108. align: 'center',
  109. valign: 'middle'
  110. }
  111. ,
  112. {
  113. title: "用户名",
  114. field: 'id',
  115. align: 'center',
  116. valign: 'middle'
  117. },
  118. {
  119. title: '性别',
  120. field: 'sex',
  121. align: 'center',
  122. valign: 'middle'
  123. },
  124. {
  125. title: '年龄',
  126. field: 'date',
  127. align: 'center',
  128. valign: 'middle'
  129. },
  130. {
  131. title: '部门',
  132. field: 'person',
  133. align: 'center'
  134. },
  135. {
  136. title: '职位',
  137. field: 'oper',
  138. align: 'center',
  139. valign: 'middle'
  140. },
  141. {
  142. title: '角色',
  143. field: 'title',
  144. align: 'center',
  145. valign: 'middle'
  146. },
  147. {
  148. title: '备注',
  149. field: 'person',
  150. align: 'center'
  151. }
  152. ]
  153. });
  154. getTime();
  155. })
  156. // 格式化时间
  157. function getTime(){
  158. var day=new Date();
  159. var year=day.getFullYear();
  160. var moutth=day.getMonth()+1;
  161. var date=day.getDate();
  162. var hour=day.getHours();
  163. var min=day.getMinutes();
  164. var sec=day.getSeconds();
  165. var str=year+'-'+moutth+'-'+date+' '+hour+":"+min+':'+sec;
  166. $("#time").text(str);
  167. }
  168. </script>
  169. </body>
  170. </html>