本文展示了一个监管机构的产品批次管理界面，包括产品批次、名称、企业信息等字段的查询功能，以及对批次的冻结、锁定、通过和召回状态的操作。提供了详细的前端代码实现，涉及JSP、JQuery、Bootstrap和ZTree等技术。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<frameset cols="15%,*" >
<frame src="<%=basePath%>pages/pcjg/tree.jsp" name="lefturl" id="lefturl">
<frame src="<%=basePath%>pages/pcjg/findAllPc.jsp?disabledstr=${disabledstr}" name="righturl" id="righturl">
</frameset>
这是主页面
然后是tree.jsp和findallpc.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>左侧菜单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath%>static/js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/plugin/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="<%=basePath%>static/plugin/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=basePath%>static/plugin/ztree/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/plugin/ztree/jquery.ztree.exedit-3.5.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>static/plugin/bootstrap/css/bootstrap.css" />
<script type='text/javascript' src="<%=basePath%>static/plugin/bootstrap/js/bootstrap.js"></script>
</head>
<script type="text/javascript">
var setting = {
view: {
//dblClickExpand: false,
expandSpeed: 100, //设置树展开的动画速度
selectedMulti: false , //禁止多点选中
open:true
},
//获取json数据
async : {
enable : true,
url : "<%=basePath%>jginfo/listById",
autoParam : [ "id", "name"] //ajax提交的时候，传的是id值
},
data:{ // 必须使用data
simpleData : {
enable : true,
idKey : "id", // id编号命名
pIdKey : "pId", // 父id编号命名
rootPId : 0
}
},
// 回调函数
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
//
$("#parentid",parent.frames["righturl"].document).val(treeNode.id);
$("#searchbt",parent.frames["righturl"].document).click();
}
}
};
$(function(){
$.fn.zTree.init($("#agency_tree"), setting );
});
function refreshMyself(){
//window.parent.frames["lefturl"].location.reload();
parent.window.location.reload();
}
</script>
<body >
<input type="hidden" id="parentid_add">
<div class="btn-group">
<button id="reset" type="button" class="btn btn-default" onclick="refreshMyself()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新
</button>
</div>
<div align="center" style="width: 90%">
<ul id="agency_tree" class="ztree"></ul>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>监管机构列表</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- 页面特有的css -->
<link rel="stylesheet" href="<%=basePath%>static/plugin/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="<%=basePath%>static/plugin/bootstrap-table/bootstrap-table.css" />
<style>
.table th, .table td {
vertical-align: middle!important;
}
</style>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
<div class="row" style="padding-bottom:10px;">
<div class="col-md-4" >
<div class="input-group">
<span class="input-group-addon">批次号</span>
<input type="text" class="form-control" placeholder=" 请输入批次号" id="lotnum" name="lotnum" >
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" >产品名称</span>
<input type="text" class="form-control" placeholder=" 请输入产品名称" id="productname" name="productname" >
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" >企业名称</span>
<input type="text" class="form-control" placeholder=" 请输入企业名称" id="companyname" name="companyname" >
</div>
</div>
</div>
<div class="row" style="padding-bottom:10px;">
<div class="col-md-3" >
<div class="input-group">
<span class="input-group-addon">冻结状态</span>
<select class="form-control" id="frozenstatus" name="frozenstatus">
<option value="-1">请选择</option>
<option value="0">未冻结</option>
<option value="1">已冻结</option>
</select>
</div>
</div>
<div class="col-md-3" >
<div class="input-group">
<span class="input-group-addon">锁定状态</span>
<select class="form-control" id="lockstatus" name="lockstatus">
<option value="-1">请选择</option>
<option value="0">未锁定</option>
<option value="1">已锁定</option>
</select>
</div>
</div>
<div class="col-md-3" >
<div class="input-group">
<span class="input-group-addon">通过状态</span>
<select class="form-control" id="passstatus" name="passstatus">
<option value="-1">请选择</option>
<option value="0">未通过</option>
<option value="1">已通过</option>
</select>
</div>
</div>
<div class="col-md-3" >
<div class="input-group">
<span class="input-group-addon">召回状态</span>
<select class="form-control" id="backstatus" name="backstatus">
<option value="-1">请选择</option>
<option value="0">未召回</option>
<option value="1">已召回</option>
</select>
</div>
</div>
</div>
<!-- 工具栏 -->
<div id="toolbar" class="btn-group">
<button type="button" class="btn btn-primary btn-large btnmargin" onclick="refreshPage()" id="searchbt">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
</button>
<button type="button" class="btn btn-warning btn-large btnmargin" onclick="pagerefresh()" id="searchbt2">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>重置
</button>
</div>
<input type="hidden" value="1" id="treeflag">
<input type="hidden" id="parentid">
<table id="tb_departments" style="table-layout: fixed;word-break:break-all; word-wrap:break-all;"></table>
</div>
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='<%=basePath%>static/js/jquery-2.1.4.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='<%=basePath%>static/js/jquery-1.11.3.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
</script>
<!--[if lt IE 9]>
<script src="static/assets/js/html5shiv.js"></script>
<script src="static/assets/js/respond.min.js"></script>
<![endif]-->
<script type='text/javascript' src="<%=basePath%>static/js/AjaxBeforSend.js"></script>
<script type='text/javascript' src="<%=basePath%>static/plugin/bootstrap/js/bootstrap.js"></script>
<script type='text/javascript' src="<%=basePath%>static/plugin/bootstrap-table/bootstrap-table.js"></script>
<script type='text/javascript' src="<%=basePath%>static/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type='text/javascript' src="<%=basePath%>static/plugin/bootstrap/js/bootstrap-table-export.min.js"></script>
<script type='text/javascript' src="<%=basePath%>static/plugin/bootstrap/js/bootstrap3-typeahead.js"></script>
<script type='text/javascript' src="<%=basePath%>static/plugin/layer/v2.3/layer.js"></script>
<script src="<%=basePath%>static/plugin/My97DatePicker/WdatePicker.js"></script>
<script src="<%=basePath%>static/plugin/My97DatePicker/config.js"></script>
<link type="text/css" rel="stylesheet" href="<%=basePath%>static/plugin/My97DatePicker/skin/WdatePicker.css">
<link type="text/css" rel="stylesheet" href="<%=basePath%>static/plugin/My97DatePicker/skin/whyGreen/datepicker.css">
<script type="text/javascript">
var event;
var user_id;
var user_name;
$(function(){
//layer.tips('双击表格内的任意行，可进行编辑:)', '#tb_departments', {
//tips: [3, '#5CACEE'] //还可配置颜色
//});
//$("body").bind("selectstart", function () { return false; });//取消浏览器 选择变蓝 默认行为
$("body").click(function(e){
event=e;
$("#contextMenu").hide();
$("#tb_departments").find("tr").removeClass("trchoose");
});
/*$("table").mousedown(function(e){ //右击事件
if(3==e.which){
$("#contextMenu").hide();
}
e.preventDefault(); //取消浏览器自带的右击菜单项
});
*/
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
$("#btn_query").on("click",function(){
var allTableData = $tableLeft.bootstrapTable('getData');//获取表格的所有内容行
for(var i=0;i<allTableData.length;i++){
}
$('#tb_departments').bootstrapTable('refresh');
});
$('#tb_departments').bootstrapTable('hideColumn', 'id');
})
//弹出页面
function openDialog(url,width,height){
width='800px';
height='600px';
titles="";
if(url=="btn_add"){
url="<%=basePath%>pages/jg/addJgUser.jsp?regionid="+'${param.id}';
titles="新增";
}else{
titles="修改";
}
layer.open({
type: 2,
title: titles,
shadeClose: false,
shade: 0.8,
maxmin: false, //开启最大化最小化按钮
area: [width,height],
content: url
});
}
//刷新页面
function refreshPage(){
//$('#tb_departments').bootstrapTable('selectPage',1);//返回第一页，添加第一条记录后需要手动刷新才能显示数据
//$('#tb_departments').bootstrapTable('refresh');//此为当前页面刷新
$('#tb_departments').bootstrapTable("refreshOptions",{pageNumber:1});
}
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: "<%=basePath%>pcjg/pcjgList", //请求后台的URL（*）
contentType: "application/x-www-form-urlencoded",
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
// striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
// sortable: true, //是否启用排序
// sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10,20,50,100,'All'], //可供选择的每页的行数（*）
// search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
showAdd:true,
minimumCountColumns: 2, //最少允许的列数
// clickToSelect: true, //是否启用点击选中行
// height: 450, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: false, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
exportTypes:['csv','excel'],
responseHandler: function(res) {
console.log(res);
return {
"total": res.data.total,//总页数
"rows": res.data.rows //数据
};
},
columns: [
{
field: 'Number',
title: '序号',
align: 'center',
formatter: function (value, row, index) {
return index+1;
}},
{
field: 'lotnum',
title: '批次',
align: 'center'
},
{
field: 'prodname',
title: '产品名称',
align: 'center'
},
{
field: 'compname',
title: '企业名称',
align: 'center'
},
{
field: 'frozenstatus',
title: '冻结状态',
align: 'center',
formatter: operateFormatter1
},
{
field: 'lockstatus',
title: '锁定状态',
align: 'center',
formatter: operateFormatter2
},
{
field: 'passstatus',
title: '通过状态',
align: 'center',
formatter: operateFormatter3
},
{
field: 'backstatus',
title: '召回状态',
align: 'center',
formatter: operateFormatter4
},
{
field: 'gyxq',
title: '质询',
align: 'center',
formatter:function(value, row, index){
if(row.frozenstatus==1 || row.backstatus==1){
return null;
}
var stas="<button ${param.disabledstr} style='margin-left:10px' class='btn btn-info btn-primary btn-xs' value='"+row["lotid"]+"' onclick='togylist(this.value)'>质询</button>";
return stas;
}
}
]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
lotnum: $("#lotnum").val().trim(),
productname:$("#productname").val().trim(),
companyname:$("#companyname").val().trim(),
frozenstatus:$("#frozenstatus").val().trim(),
lockstatus:$("#lockstatus").val().trim(),
passstatus:$("#passstatus").val().trim(),
backstatus:$("#backstatus").val().trim(),
parentid:$("#parentid").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//初始化页面上面的按钮事件
};
return oInit;
};
function operateFormatter1(value, row, index){
var btn1="";
if(value==0){
btn1='冻结';
}else{
btn1='取消冻结';
}
var stas="";
stas+="<button ${param.disabledstr} style='margin-left:10px' class='btn btn-info btn-primary btn-xs' value='"+row["lotid"]+"' onclick='froze(this.value,"+row["frozenstatus"]+")'>"+btn1+"</button>";
return stas;
}
function froze(id,status){
var tishi = '您确定要取消冻结吗？';
if(0==status){
tishi = '您确定要冻结吗？';
}
layer.confirm(tishi, {
btnAlign: 'c',
btn: ['确定','取消'] //按钮
}, function(){
$.post('<%=basePath%>pcjg/froze',
{'id':id,status:status},
function(data){
if(data.code==1){
layer.msg(data.msg);
$('#tb_departments').bootstrapTable('refresh');
//$('#tb_departments').bootstrapTable('refresh');
//window.parent.frames["lefturl"].location.reload();
}else{
layer.msg(data.msg);
}
},"json")
});
}
function operateFormatter2(value, row, index){
var btn2="";
if(value==0){
btn2='锁定';
}else{
btn2='取消锁定';
}
var stas="";
stas+="<button ${param.disabledstr} style='margin-left:10px' class='btn btn-info btn-primary btn-xs' value='"+row["lotid"]+"' onclick='lock(this.value,"+row["lockstatus"]+")'>"+btn2+'${a}'+"</button>";
return stas;
}
function lock(id,status){
var tishi = '您确定要取消锁定吗？';
if(0==status){
tishi = '您确定要锁定吗？';
}
layer.confirm(tishi, {
btnAlign: 'c',
btn: ['确定','取消'] //按钮
}, function(){
$.post('<%=basePath%>pcjg/lock',
{'id':id,status:status},
function(data){
if(data.code==1){
layer.msg(data.msg);
$('#tb_departments').bootstrapTable('refresh');
// window.parent.frames["lefturl"].location.reload();
}else{
layer.msg(data.msg);
}
},"json")
});
}
function operateFormatter3(value, row, index){
var btn3="";
if(value==0){
btn3='通过';
}else{
btn3='取消通过';
}
var stas="";
stas+="<button ${param.disabledstr} style='margin-left:10px' class='btn btn-info btn-primary btn-xs' value='"+row["lotid"]+"' onclick='pass(this.value,"+row["passstatus"]+")'>"+btn3+"</button>";
return stas;
}
function pass(id,status){
var tishi = '您确定要取消通过吗？';
if(0==status){
tishi = '您确定要通过吗？';
}
layer.confirm(tishi, {
btnAlign: 'c',
btn: ['确定','取消'] //按钮
}, function(){
$.post('<%=basePath%>pcjg/pass',
{'id':id,status:status},
function(data){
if(data.code==1){
layer.msg(data.msg);
$('#tb_departments').bootstrapTable('refresh');
//window.parent.frames["lefturl"].location.reload();
}else{
layer.msg(data.msg);
}
},"json")
});
}
function operateFormatter4(value, row, index){
var stas="";
if(value==0){
stas+="<button ${param.disabledstr} class='btn btn-info btn-primary btn-xs' onclick=\"openDialog('"+"<%=basePath %>dataQuery/showlot?lotid="+row.lotid+"')\">召回 </button> ";
}else{
stas+="<button class='btn btn-info btn-primary btn-xs' onclick=\"openDialog2('"+"<%=basePath %>dataQuery/showback?lotid="+row.lotid+"')\">查看 </button> ";
}
return stas;
}
//弹出页面
function openDialog(url,width,height){
var titles="";
width='500px';
height='230px';
titles="召回";
layer.open({
type: 2,
title: titles,
shadeClose: false,
shade: 0.8,
maxmin: false, //开启最大化最小化按钮
area: [width,height],
content: url
});
}
//弹出页面
function openDialog2(url,width,height){
var titles="";
width='500px';
height='300px';
titles="召回查看";
layer.open({
type: 2,
title: titles,
shadeClose: false,
shade: 0.8,
maxmin: false, //开启最大化最小化按钮
area: [width,height],
content: url
});
}
function pagerefresh(){
$("#lotnum").val(""),
$("#productname").val(""),
$("#companyname").val("");
$("#frozenstatus").val("-1"),
$("#lockstatus").val("-1"),
$("#passstatus").val("-1"),
$("#backstatus").val("-1"),
refreshPage();
}
function paramsMatter(value,row,index) {
if(value!=undefined){
var span=document.createElement('span');
span.setAttribute('title',value);
span.innerHTML = value;
return span.outerHTML;
}
}
function formatTableUnit(value, row, index) {
return {
css: {
"white-space": 'nowrap',
"text-overflow": 'ellipsis',
"overflow": 'hidden'
}
}
}
//时间格式转换
function changeDateFormat(cellval) {
var oDate = new Date(cellval);
oYear = oDate.getFullYear();
oMonth = oDate.getMonth()+1;
oDay = oDate.getDate();
oHour = oDate.getHours();
oMin = oDate.getMinutes();
oSen = oDate.getSeconds();
//oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay);//最后拼接时间
return oTime;
}
function getzf(num){
if(parseInt(num) < 10){
num = '0'+num;
}
return num;
}
function toAddJg(){
window.location.href="<%=basePath%>pages/jg/addJgUser.jsp";
}
function showJg(id){
window.location.href="<%=basePath%>jginfo/showjg?id="+id;
}
function togylist(lotid){
window.location.href="<%=basePath %>complot/toprocesslist?lotid="+lotid;
}
</script>
</body>
</html>
扫一扫
4538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
