整合bootstrap和日期控件和jquery的ztree控件到springmvc工程中

来源：互联网发布：网络硬盘录相机价格编辑：程序博客网时间：2024/06/05 23:49

今天接到了一个需求，要画一个页面，这个页面有监控开始时间、监控结束时间和用一个树形来展示规则信息，老大要求用bootstrap的日期控件和jquery的ztree，网上找了一些

资料，终于做出来了

jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">

<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">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>企业综合信息</title>


<link rel="stylesheet" href="css/ui/bootstrap.css">
<link rel="stylesheet" href="css/ui/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="js/ui/jquery.min.js" ></script>
<script type="text/javascript" src="js/ui/bootstrap.js" ></script>
<script type="text/javascript" src="js/ui/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="js/ui/bootstrap-datetimepicker.zh-CN.js"></script>


<link rel="stylesheet" href="css/ui/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/ui/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ztree.excheck.js"></script>

<script type="text/javascript" src="<%=path%>/js/seajs/sea-debug.js" data-config="config/config" data-main="cims/query/cust_multinfo" ></script>
</head>

<body>


<button name="openMonitorModel" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myMonitor" style="display:none"> 打开遮罩层 </button>
<div class="modal fade" id="myMonitor" tabindex="-1" role="dialog" aria-labelledby="myMonitorLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myMonitorLabel">监控企业</h4>
</div>
<div class="modal-body">
<table cellspacing="10">
<tr>
<td style="font-size: 13px;padding-bottom: 13px">监控开始日期：</td>
<td colspan="3">
<div class="form-group">
<div class="input-group date begin_date col-md-5" data-date-format="yyyymmdd" data-link-field="dtp_input1">
<input class="form-control" style="width: 150px;height: 30px" type="text" id="begin_date_value" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
</td>
</tr>
<tr>
<td style="font-size: 13px; padding-bottom: 12px">监控结束日期：</td>
<td colspan="3">
<div class="form-group">
<div class="input-group date end_date col-md-5" data-date-format="yyyymmdd" data-link-field="dtp_input1">
<input class="form-control" style="width: 150px;;height: 32px" id="end_date_value" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
</td>
</tr>
<tr>
<td class="rule_tree" colspan="4">
<ul id="treeDemo" class="ztree"></ul>
</td>
</tr>
</table>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-primary" id="submitButton">确认</button>
<button type="button" class="btn btn-default" id="closeButton" data-dismiss="modal">关闭</button>
</div>
</div>

</div>

</div>

</div>
</section>
</body>
</html>

js:

var zTreeObj;

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
async : {
enable: true,
url: path+'/emphasisCompanyController/getModelTree',
autoParam : ['id']
},
data:{
key: {
name: "name" //设置树节点的name，节点参数name必须和它匹配
},
simpleData: {
enable: true, //开启树的层级结构
idKey: "id", //设置树节点id，节点参数id必须与之匹配
pIdKey: "parentId" //设置pid，节电参数pid必须与之匹配
}
},
check : {
enable : true,
chkboxType: { "Y": "ps", "N": "ps" },
chkStyle: "checkbox"
}
};

// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
});

//监控开始时间日期控件
$(".begin_date").datetimepicker({
format: "yyyymmdd",
forceParse: false,
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN',//中文，需要引用zh-CN.js包
startView: 2,//月视图
startDate:new Date(),
minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
});

//监控结束时间日期控件
$(".end_date").datetimepicker({
format: "yyyymmdd",
forceParse: false,
autoclose: true,
todayBtn: true,
todayHighlight: true,
showMeridian: true,
pickerPosition: "bottom-left",
language: 'zh-CN',//中文，需要引用zh-CN.js包
startView: 2,//月视图
minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
});

最后的效果：

阅读全文

0 0