easyUI 页面操作
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <title>重点跟踪</title> <%@ include file="../common/header.jsp"%> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/baowen.css" type="text/css"/> <link rel="stylesheet" href="../../css/jquery.fancybox.css" type="text/css"/> </head> <style type="text/css"> .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{ -o-text-overflow: ellipsis; text-overflow: ellipsis; } </style> <body> <div id="carList" class="btext_left" > <form id='fm_s' action=""> <div class="btext_title">重点跟踪</div> <div style="width:99%; height:45px; padding-top:15px; margin-left:1%; color: #0995b4; margin-bottom: 5px;"> SN: <input id="sn" name="sn" type="text" style="width: 170px;" class="easyui-textbox" /> 注册状态: <select id="registeredstate" name="registeredstate" style="width: 130px;" class="easyui-combobox" data-options="editable:false" > <option value="">请选择</option> <option value="1">已注册</option> <option value="0">未注册</option> </select> 开始时间:<input id="startDate" name="startDate" type="text" style="width: 170px;" class="easyui-datetimebox" /> 结束时间:<input id="endDate" name="endDate" type="text" style="width: 170px;" class="easyui-datetimebox" /> <input type="button" onclick="search();" value="查询" class="b_cx" /> <input type="button" onclick="addDevices();" value="新增" class="b_cx" /> <div style="margin-top: 10px;"> <input type="button" onclick="openImportExcel();" value="批量导入" class="b_cx" /> <input type="button" onclick="openExportExcel();" value="导出" class="b_cx" /> </div> </div> </form> <div style="margin-top: 40px;"> <table id="zdgz" style="width:100%;"></table> </div> </div> <div id="addDevice" class="easyui-dialog" title="添加" iconCls="icon-save" style="display: none;width:400px; height:250px;" buttons="#money-buttons2"> <form id="fm_p" method="post"> <div style="padding:40px 37px; text-align:right;"> SN:<input id='psn' name="psn" class="easyui-combox" style="width:84%" data-options="required:true,validateOnCreate:false,validateOnBlur:true, validType:['ZNumber']"> <span style="color: red;">*</span> </div> </form> <div id="dlg-buttons"> <div class="text_input_button_float button_margin_03" onclick="javascript:saveDevice();">保存</div> <div class="text_input_button_float button_margin_03" onclick="javascript:$('#addDevice').dialog('close')">取消</div> </div> </div> <div id="importWin" title="批量导入" iconCls="icon-save" class="easyui-dialog" style="width:700px;height:450px; display: none; left:15%;top:2%;" closed="true"> <form id="importForm" action="${pageContext.request.contextPath}/importExcel" method="post" enctype="multipart/form-data"> <table style="margin-left: 180px;"> <tr> <td> <div class="file-box"> <input type='text' name='textfield' id='textfield3' name="imgfile" data-options="required:true" class='txt' value="点击选择图片" /> <input type="file" name="excelFile" id="excelFile" class="file" data-options="required:true" onchange="document.getElementById('textfield3').value=this.value" /> <input type="button" onclick="importExcel()" value="导入" class="img_button1" /> </div> </td> </tr> <tr> <td> 1.请先下载导入模板 </td> </tr> <tr> <td> 2.按照模板格式填写SN后,再导入本系统 </td> </tr> <tr> <td> 3.您可以在这里 <a href="<%=request.getContextPath()%>/device/downExcel">模板下载</a> </td> </tr> </table> </form> <div id="divShibai"> <table id="shibai" style="width:100%;"></table> </div> </div> <script type="text/javascript"> $(function () { var snNum="<%=request.getParameter("snNum")%>"; if(snNum!="null"){ $("#sn").textbox('setValue',snNum); } var registeredstate1="<%=request.getParameter("registeredstate")%>" if(registeredstate1!="null"){ $("#registeredstate").combobox("setValue",registeredstate1); } var startDate1="<%=request.getParameter("startDate")%>" if(startDate1!="null"){ $("#startDate").datetimebox("setValue",startDate1); } var endDate1="<%=request.getParameter("endDate")%>" if(endDate1!="null"){ $("#endDate").datetimebox("setValue",endDate1); } var flag="<%=request.getParameter("flag")%>"; var page="<%=request.getParameter("page")%>"; $("#zdgz").height($(window).height() - 100 ); $('#addDevice').dialog('close'); $('#zdgz').datagrid({ url: '<%=request.getContextPath()%>/device/getDeviceAll', rownumbers: true, columns: [[ { field: 'sn', title: 'SN', width: '8%' },{ field: 'idc', title: 'idc', hidden: true }, { field: 'id', title: 'id', hidden: true },{ field: 'customername', formatter:nameshow, title: '姓名', width: '7%' },{ field: 'cityname', formatter:nameshow, title: '城市', width: '7%' }, { field: 'telephon', title: '电话', width: '8%' }, { field: 'vin', title: 'VIN', width: '9%' }, { field: 'carModel', title: '车型', formatter:nameshow, width: '8%' }, { field: 'carSerial', title: '车系', width: '8%' }, { field: 'pcreateTime', title: '注册时间', formatter:nameshow, width: '8%' },{ field: 'Platenumber', title: '车牌', formatter:nameshow, width: '8%' },{ field: 'Fname', title: '企业客户名称', formatter:nameshow, width: '9%' },{ field: 'Productname', title: '设备名称', formatter:nameshow, width: '8%' }, { field: 'gengduo', title: '操作', formatter:formatActions, width: '45%' } ]], pagination: true, pageSize: 10, pageList: [10, 50, 100], emptyMsg: "无数据", onBeforeLoad: function (param) { $($('#fm_s').serializeArray()).each(function () { param[this.name] = this.value; }); }, onBeforeSelect: function () { return false; }, onLoadSuccess: function (data) { if(flag==1){ flag=0; $('#zdgz').datagrid('getPager').pagination('select', page); } } }); var pager = $('#zdgz').datagrid('getPager'); // get the pager of datagrid pager.pagination({ pageSize: 10, pageList: [10, 50, 100], displayMsg: '总条数 {total}', links: 5, layout: ['first','prev', 'links', 'next','last','list'] }); $('.fancybox').fancybox({ closeClick : true }); }); function formatActions(val,row,rowIndex){ /* '<a style="color:#3aabc4" href="javascript:;" onclick="viewCancelzdgz(\''+rowIndex+'\');">更多操作</a>' */ return '<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.sn+',1)">状态查询</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.sn+',2)">位置查询</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.sn+',3)">体检查询</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.idc+',4)">错误日志</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.sn+',7)">失联设备</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.sn+',8)">停车报警</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.idc+',5)">控制历史</a>|'+' ' // +'<a style="color:#3aabc4" href="javascript:;" onclick="testtz('+row.sn+',6)">下发指令</a>|'+' ' +'<a style="color:#3aabc4" href="javascript:;" onclick="deletezdjk(\''+rowIndex+'\');">删除</a>' ; } function testtz(sn,url){ var page = $('#zdgz').datagrid('options').pageNumber;//pageNumber为datagrid的当前页码 var rows = $('#zdgz').datagrid('options').pageSize;//多少条数据 var registeredstate = $("#registeredstate").combobox("getValue"); var snNum = $("#sn").val(); var startDate = $('#startDate').datebox('getValue'); var endDate = $('#endDate').datebox('getValue'); if(url==1){ window.location.href='<%=request.getContextPath()%>/jsp/DataQuery/CarStatus.jsp?sn='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } if(url==2){ window.location.href='<%=request.getContextPath()%>/jsp/vehicle/vehiclePositionTrack.jsp?sn='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } if(url==3){ window.location.href='<%=request.getContextPath()%>/jsp/DataQuery/WiseLinkFaults.jsp?sn='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } if(url==4){ if(sn==undefined){ window.location.href='<%=request.getContextPath()%>/jsp/DataQuery/ErrorLog.jsp?idc='+""+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; }else{ window.location.href='<%=request.getContextPath()%>/jsp/DataQuery/ErrorLog.jsp?idc='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } } if(url==5){ window.location.href='<%=request.getContextPath()%>/jsp/RemoteControl/RemoteControlHistory.jsp?idc='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } if(url==6){ window.location.href='<%=request.getContextPath()%>/jsp/DataQuery/ReleaseInstruction.jsp?sn='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } if(url==7){ window.location.href='<%=request.getContextPath()%>/jsp/DataQuery/OutOfContactDevice.jsp?sn='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } if(url==8){ window.location.href='<%=request.getContextPath()%>/jsp/device/parkingAlarm.jsp?sn='+sn+"&page="+page+"&rows="+rows+"®isteredstate="+registeredstate+"&snNum="+snNum+"&startDate="+startDate+"&endDate="+endDate; } } function viewCancelzdgz(rowIndex){ $("#moneyffview").form('clear'); var row = $('#zdgz').datagrid('getData').rows[rowIndex]; $("#customerName").html(row.customerName); $("#phone").html(row.sn); $("#sn").html(row.sn); $("#vin").html(row.sn); $("#createDate").html(row.createtime); $("#cityName").html(row.cityName); $('#moneyWinview').dialog('open').dialog('center') .dialog('setTitle', '详情'); } function addDevices(){ $("#fm_p").form('clear'); $("#addDevice").dialog('setTitle','添加').dialog('open'); } function saveDevice(){ $('#fm_p').form('submit',{ url: '<%=request.getContextPath()%>/device/addDevices', onSubmit: function(param){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if (result.success){ $('#zdgz').datagrid('reload'); $('#addDevice').dialog('close') $.messager.alert('消息','添加成功!'); }else if(result.defeated){ $.messager.alert('消息','添加失败,sn不能重复!'); } else { $.messager.alert('消息','添加失败!'); $('#addDevice').dialog('close'); } } }); } function deletezdjk(rowIndex) { var row = $('#zdgz').datagrid('getData').rows[rowIndex]; $.messager.confirm('确认', '确定要删除吗?', function(r) { if(r) { var url = '${pageContext.request.contextPath}/device/deleteDevices' $.ajax({ type : "GET", url : url, data : { ids : row.id }, dataType : "json", success : function(data) { if (data.code == 10000) { $.messager.alert("操作提示", "删除成功!", "info"); $('#zdgz').datagrid('reload'); }else { $.messager.alert("操作提示", "删除失败!", "warning"); } }, error : function() { $.messager.alert("操作提示", "删除失败!", "warning"); } }); } }); } //查询方法 function search() { $('#zdgz').datagrid('load'); } function openImportExcel() { $('#importForm').form('clear'); $('#textfield3').val('点击选择excel文件'); $('#importWin').dialog('open').dialog('center').dialog('setTitle', '批量导入'); $('#importWin').window('open'); $("#divShibai").hide(); } function openExportExcel(){ var queryParam = getFormJson($("#fm_s")[0]); var url = '${pageContext.request.contextPath}/device/openExportExcel?'+$.param(queryParam); window.open(url); } // 如:{Name:'摘取天上星',position:'IT技术'} // ps:注意将同名的放在一个数组里 function getFormJson(form) { var o = {}; var a = $(form).serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; } function importExcel() { var f= $("#excelFile").val(); if(f.length == 0) { $.messager.alert("操作提示", "请选择要导入的excel文件", "error"); return false; } var imagePath = f.toLowerCase(); if (!/\.(xls)$/.test(imagePath)) { $.messager.alert("操作提示", "excel必须是2003格式", "error"); return false; } $("#importForm").form('submit', { url : '${pageContext.request.contextPath}/device/importExcel', onSubmit : function() { load(); }, success : function(result) { ajaxLoadEnd(); var result = eval('(' + result + ')'); if (result.code != '10000') { $.messager.alert("操作提示", result.message, "error"); } else { if(result.data==1){//有错误信息才加载 listErrorAjax(); } $.messager.alert("操作提示", result.message, "info"); $('#zdgz').datagrid('load'); } } }); } function ajaxLoadEnd(){ $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); } //关闭层事件 $("#importWin").dialog({ onClose: function () { $('#shibai').datagrid('getPager').pagination('select', 1); } }); function listErrorAjax(){ $("#shibai").height($(window).height() -200 ); $("#divShibai").show(); $('#shibai').datagrid({ url: '<%=request.getContextPath()%>/device/error', rownumbers: true, columns: [[ { field: 'messageInfo', title: '报错信息', align : 'center', width: '99%' }, ]], pagination: true, pageSize: 10, pageList: [10, 50, 100], emptyMsg: "无数据", onBeforeLoad: function (param) { $($('#fm_s').serializeArray()).each(function () { param[this.name] = this.value; }); }, onBeforeSelect: function () { return false; } }); var pager = $('#shibai').datagrid('getPager'); // get the pager of datagrid pager.pagination({ pageSize: 10, pageList: [10, 50, 100], displayMsg: '总条数 {total}', links: 5, layout: ['first','prev', 'links', 'next','last','list'] }); } //弹出加载层 function load() { $("<div class=\"datagrid-mask\" style='z-index:99998;'></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); $("<div class=\"datagrid-mask-msg\" style='z-index:99999;'></div>").html("正在加载,请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 }); } //取消加载层 function disLoad() { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); } </script> </body> </html>