cable.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <script >
  3. $(document).ready(function () {
  4. $('#projectTable').bootstrapTable({
  5. //请求方法
  6. method: 'post',
  7. //类型json
  8. dataType: "json",
  9. contentType: "application/x-www-form-urlencoded",
  10. //显示检索按钮
  11. showSearch: true,
  12. //显示刷新按钮
  13. showRefresh: true,
  14. //显示切换手机试图按钮
  15. showToggle: true,
  16. //显示 内容列下拉框
  17. showColumns: true,
  18. //显示到处按钮
  19. showExport: true,
  20. //显示切换分页按钮
  21. showPaginationSwitch: true,
  22. //最低显示2行
  23. minimumCountColumns: 2,
  24. //是否显示行间隔色
  25. striped: true,
  26. //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  27. cache: false,
  28. //是否显示分页(*)
  29. pagination: true,
  30. //排序方式
  31. sortOrder: "asc",
  32. //初始化加载第一页,默认第一页
  33. pageNumber: 1,
  34. //每页的记录行数(*)
  35. pageSize: 5,
  36. //可供选择的每页的行数(*)
  37. pageList: [5, 10, 25, 50, 100],
  38. //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
  39. url: "${ctx}/cg/reservemanagementcenter/cable/list",
  40. //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
  41. //queryParamsType:'',
  42. ////查询参数,每次调用是会带上这个参数,可自定义
  43. queryParams: function (params) {
  44. var searchParam = $("#searchForm").serializeJSON();
  45. searchParam.pageNo = params.limit === undefined ? "1" : params.offset / params.limit + 1;
  46. searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
  47. searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
  48. return searchParam;
  49. },
  50. //分页方式:client客户端分页,server服务端分页(*)
  51. sidePagination: "server",
  52. contextMenuTrigger: "right",//pc端 按右键弹出菜单
  53. contextMenuTriggerMobile: "press",//手机端 弹出菜单,click:单击, press:长按。
  54. contextMenu: '#context-menu',
  55. onContextMenuItem: function (row, $el) {
  56. if ($el.data("item") == "edit") {
  57. edit(row.id);
  58. } else if ($el.data("item") == "view") {
  59. view(row.id);
  60. } else if ($el.data("item") == "delete") {
  61. jp.confirm('确认要删除该表单记录吗?', function () {
  62. jp.loading();
  63. jp.get("${ctx}/cg/reservemanagementcenter/project/delete?id=" + row.id, function (data) {
  64. if (data.success) {
  65. $('#projectTable').bootstrapTable('refresh');
  66. jp.success(data.msg);
  67. } else {
  68. jp.error(data.msg);
  69. }
  70. })
  71. });
  72. }
  73. },
  74. onClickRow: function (row, $el) {
  75. },
  76. onShowSearch: function () {
  77. $("#search-collapse").slideToggle();
  78. },
  79. columns:
  80. [
  81. [
  82. {checkbox:true,width: 36},
  83. {"title":"储备项目基本信息","colspan":12,"halign":"center","align": "center",width: "2400px"},
  84. ],
  85. [
  86. {checkbox:true,width: 36},
  87. { field: 'projectReserveId', title: "储备编号", valign:"middle", align:"center", colspan: 1 },
  88. { field: 'projectName', title: "项目名称", valign:"middle", align:"center", colspan: 1 ,formatter:paramsMatter},
  89. { field: 'specifications', title: "电缆规格型号", valign:"middle", align:"center", colspan: 1 },
  90. { field: 'civilEngineer', title: "是否含土建", valign:"middle", align:"center", colspan: 1 },
  91. { field: 'pipeLayeCable', title: "是否在现有管道施放电缆", valign:"middle", align:"center", colspan: 1 },
  92. { field: 'completePipe', title: "是否完成通管", valign:"middle", align:"center", colspan: 1 },
  93. { field: 'completeMeasurement', title: "是否完成实测", valign:"middle", align:"center", colspan: 1 },
  94. { field: 'measureLength', title: "实测长度", valign:"middle", align:"center", colspan: 1 },
  95. { field: 'designCableLength', title: "设计电缆段长", valign:"middle", align:"center", colspan: 1 },
  96. { field: 'segmentLengthClassinication', title: "段长分类", valign:"middle", align:"center", colspan: 1 },
  97. { field: 'projectManager', title: "项目经理", valign:"middle", align:"center", colspan: 1 },
  98. { field: 'remarks', title: "备注", valign:"middle", align:"center", colspan: 1 ,formatter:paramsMatter},
  99. ],
  100. ]
  101. });
  102. if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {//如果是移动端
  103. $('#projectTable').bootstrapTable("toggleView");
  104. }
  105. $('#projectTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
  106. 'check-all.bs.table uncheck-all.bs.table', function () {
  107. $('#remove').prop('disabled', !$('#projectTable').bootstrapTable('getSelections').length);
  108. $('#view,#edit,#jlEdit').prop('disabled', $('#projectTable').bootstrapTable('getSelections').length != 1);
  109. });
  110. $("#btnImport").click(function () {
  111. jp.open({
  112. type: 2,
  113. area: [500, 200],
  114. auto: true,
  115. title: "导入数据",
  116. content: "${ctx}/tag/importExcel",
  117. btn: ['确定', '关闭'],
  118. btn1: function (index, layero) {
  119. var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
  120. iframeWin.contentWindow.importExcel('${ctx}/cg/reservemanagementcenter/cable/import', function (data) {
  121. if (data.success) {
  122. jp.success(data.msg);
  123. refresh();
  124. } else {
  125. jp.error(data.msg);
  126. }
  127. jp.close(index);
  128. });//调用保存事件
  129. return false;
  130. },
  131. btn2: function (index) {
  132. // jp.close(index);
  133. }
  134. });
  135. });
  136. $("#jlImport").click(function () {
  137. jp.open({
  138. type: 2,
  139. area: [500, 200],
  140. auto: true,
  141. title: "导入数据",
  142. content: "${ctx}/tag/importExcel",
  143. btn: ['确定', '关闭'],
  144. btn1: function (index, layero) {
  145. var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
  146. iframeWin.contentWindow.importExcel('${ctx}/cg/reservemanagementcenter/reserveManage/jlImport', function (data) {
  147. if (data.success) {
  148. jp.success(data.msg);
  149. refresh();
  150. } else {
  151. jp.error(data.msg);
  152. }
  153. jp.close(index);
  154. });//调用保存事件
  155. return false;
  156. },
  157. btn2: function (index) {
  158. // jp.close(index);
  159. }
  160. });
  161. });
  162. $("#btnExport").click(function () {
  163. var projectReserveId = $("#projectReserveId").val();
  164. var projectName = $("#projectName").val();
  165. console.log(projectReserveId)
  166. jp.downloadFile('${ctx}/cg/reservemanagementcenter/cable/export?projectReserveId=' + projectReserveId + '&projectName=' + projectName);
  167. });
  168. $("#search").click("click", function () {// 绑定查询按扭
  169. $('#projectTable').bootstrapTable('refresh');
  170. });
  171. $("#reset").click("click", function () {// 绑定查询按扭
  172. $("#searchForm input").val("");
  173. $("#searchForm select").val("");
  174. $("#searchForm .select-item").html("");
  175. $('#projectTable').bootstrapTable('refresh');
  176. });
  177. $('#beginBeginDate').datetimepicker({
  178. format: "YYYY-MM-DD HH:mm:ss"
  179. });
  180. $('#endBeginDate').datetimepicker({
  181. format: "YYYY-MM-DD HH:mm:ss"
  182. });
  183. $('#endDate').datetimepicker({
  184. format: "YYYY-MM-DD HH:mm:ss"
  185. });
  186. });
  187. //表格超出宽度鼠标悬停显示td内容
  188. function paramsMatter(value,row,index,field) {
  189. var span = document.createElement('span');
  190. span.setAttribute('title',value);
  191. span.innerHTML = value;
  192. return span.outerHTML;
  193. }
  194. function getIdSelections() {
  195. return $.map($("#projectTable").bootstrapTable('getSelections'), function (row) {
  196. return row.id
  197. });
  198. }
  199. //刷新列表
  200. function refresh() {
  201. $('#projectTable').bootstrapTable('refresh');
  202. }
  203. function add() {
  204. jp.openSaveDialog('新增储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/form", '800px', '500px');
  205. }
  206. function edit(id) {//没有权限时,不显示确定按钮
  207. if (id == undefined) {
  208. id = getIdSelections();
  209. }
  210. jp.openSaveDialog('编辑储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/form?id=" + id, '800px', '500px');
  211. }
  212. function jlEdit(id) {//没有权限时,不显示确定按钮
  213. if (id == undefined) {
  214. id = getIdSelections();
  215. }
  216. jp.openSaveDialog('编辑储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/jlEdit?id=" + id, '800px', '500px');
  217. }
  218. function view(id) {//没有权限时,不显示确定按钮
  219. if (id == undefined) {
  220. id = getIdSelections();
  221. }
  222. jp.openViewDialog('查看储备项目基本信息', "${ctx}/cg/reservemanagementcenter/reserveManage/view?id=" + id, '800px', '500px');
  223. }
  224. function deleteAll(){
  225. jp.confirm('确认要删除该储备项目基本信息吗?', function(){
  226. jp.loading();
  227. jp.get("${ctx}/cg/reservemanagementcenter/cable/deleteAll?ids=" + getIdSelections(), function(data){
  228. if(data.success){
  229. $('#projectTable').bootstrapTable('refresh');
  230. jp.success(data.msg);
  231. }else{
  232. jp.error(data.msg);
  233. }
  234. })
  235. })
  236. }
  237. //转换日期格式(时间戳转换为datetime格式)
  238. function changeDateFormat(cellval) {
  239. var dateVal = cellval + "";
  240. if (cellval != null) {
  241. var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
  242. var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  243. var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  244. /*var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  245. var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  246. var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();*/
  247. return date.getFullYear() + "-" + month + "-" + currentDate /*+ " " + hours + ":" + minutes + ":" + seconds*/;
  248. }
  249. }
  250. </script>