(一)、Layer插件
(1) 需要引入js文件:
1、<script type="text/javascript"src="<%=basePath%>resources/js/layer/layer.min.js"> </script>
2、<linkrel=" stylesheet"href="<%=basePath%>resources/js/layer/skin/layer.css"></link>
(2) 刷新父窗口数据,关闭弹出层
parent.location.href="<%=basePath%>/manager/Manager_deplist.action";
layer.closeAll();
(二)、树形结构JSP
(1)需要引入js文件:
1、<link href="<%=basePath%>resources/css/css.css"rel="stylesheet" type="text/css">
</link>
2、<link rel="stylesheet"href="<%=basePath%>resources/js/zTree/css/zTreeStyle/zTreeStyle.css">
</link>
3<script type="text/javascript"src="<%=basePath%>resources/js/zTree/js/jquery.ztree.core.min.js">
</script>
(1)Jsp页面
<style type="text/css">
div{ margin:0 auto;}
</style>
</head>
<body>
<div style="background-color: white;height: 100%;text-align:center;">
<div class="treediv" style="background-color:white;height: 95%;width: 14%;float: left;border: 1px solid #8db2e3;margin-left:10px;margin-top: 5px;margin-bottom: 5px;">
<div id="treeDemo" class="ztree">
</div>
</div>
<div style="background-color: white;height: 95%;width:84%;float: left;border: 1px solid #8db2e3;margin-top: 5px;margin-bottom:5px;">
//显示弹出层
<iframe runt="server"src="http://localhost:6666/kh/depuser/Depuser_depuser.action(这里显示弹出层要显示的页面,通过请求action,添加name=“”来确认请求action显示这里) " width="100%" height="100%"frameborder="no" border="0" marginwidth="0"marginheight="0" scrolling="no" allowtransparency="yes">
</iframe>
</div>
</div>
</body>
<scripttype="text/javascript">
varurls = ["manager/Manager_deplist.action",
"zggl/Zggl_zggl.action",
"depuser/Depuser_depuser.action",
"khzb/Khzb_khzb.action",
"manager/Manager_qxgl.action",
"zggl/Zggl_xgmm.action",
"khcx/Khcx_khcx.action",
"khcx/Khcx_grkhwhdep.action?depid="
];
$(document).ready(function(){
//初始化菜单树 S
varsetting = {
view:{
showLine:true,
selectedMulti:false,
dblClickExpand:false
},
data:{
simpleData:{
enable:true
}
}
};
//初始化菜单树 S
//获取用户菜单配置 S
var zNodes = [];
//可通过遍历找出上下级自动生成树型结构
<c:forEach items="${uplist}"var="dep">
zNodes.push({id:"${dep.id}", //自己的id
pId:"${dep.uplader}", //父级id
name:"${dep.depName}", //名称
open:true, //是否打开
click:"window.open('"+basePath+"/khcx/Khcx_grkhwhdep.action?depid=${dep.id}&depName=${dep.depName}','in')"}); //点击跳转地址
</c:forEach>
//获取用户菜单配置 E
$.fn.zTree.init($("#treeDemo"),setting, zNodes);
//这种是写死了上下级,不会发生变化
varzNodes = [
{ id:1, pId:0, name:"支节点", open:true},
{id:11, pId:1, name:"分节点11",click : "window.open('"+basePath+urls[0]+"','info'(info与上面的ifram层的name属性对应));"},
{id:12, pId:1, name:"分节点12",click :"window.open('"+basePath+urls[1]+"','info');"},
{id:13, pId:1, name:"分节点13",click :"window.open('"+basePath+urls[2]+"','info');"},
{ id:2, pId:0, name:"支节点",open:true},
{id:21, pId:2, name:"分节点21",click :"window.open('"+basePath+urls[6]+"','info');"},
{id:22, pId:2, name:"分节点22",click :"window.open('"+basePath+urls[7]+"','info');"}
];
//获取用户菜单配置 E
$.fn.zTree.init($("#treeDemo"),setting, zNodes);
});
</script>
(三)、表单验证
1、 先引入js文件:
1 2 | <script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script> |
(1) 通过插件,在jsp文件中进行表单验证,需要引进插件layer
(2) 通过Ajax提交:中间的部分会阻止ajax提交验证时:
<script type=“text、javascript”>
$(function(){
checkObj= $("#add"(这里表示你的表单id名称)).Validform({
tiptype:999,
callback:false,
ignoreHidden:true //隐藏元素不验证
});
});
(3) 通过from表单action提交:只需要:
$(function(){
checkObj= $("#add"(这里表示你的表单id名称)).Validform
});
(4) 在表单中input属性要设置:
<input type="text" id="depid" name="sysdep.id" datatype="/^[a-zA-Z0-9]{2,16}$/"nullmsg="请输入编号!" errormsg="至少2位,最多16个字母或数字!" />
(5) 验证中文,字母,数字的正则表达式:
验证中文:/^[\u4e00-\u9fa5]{1,16}$/;{1,16}表示你限定输入的长度
验证字母:/^[a-zA-Z]$/
验证数字:/^[0-9]$/
三种都可以:/^[a-zA-Z0-9\u4e00-\u9fa5]{1,16}$/
只能输入整数或小数的正则表达式:/^[0-9]+([.]{1}[0-9]+){0,1}$/
(四)、树形结构会出现的问题
<c:forEachitems="${uplist}" var="dep">
zNodes.push({id:"${dep.id}",pId:"${dep.uplader}",name:"${dep.depName}",open:true,click:"window.open('"+basePath+"/khcx/Khcx_grkhwhdep.action?depid=${dep.id}&depName=${dep.depName}','in')"});
</c:forEach>
1. 在weidoe.open();中url传递参数为汉字时,会出现无法获取参数的方法,解决办法为:
<c:forEachitems="${uplist}" var="dep">
zNodes.push({id:"${dep.id}",pId:"${dep.uplader}",isParent:true,name:"${dep.depName}",open:true,click:"openURL('"+basePath+"manager/Manager_findBydepid.action?depId=${dep.id}&depName=${dep.depName}','in')"});
</c:forEach>
functionopenURL(url,name){
try{
var dom = document.getElementsByName(name);
$(dom,parent.document.body).attr("src",encodeURI(url));
}catch(e){
}
}
(五)、用a标签的超链接在IE下失效
改为<button οnclick=”localtion.href=’跳转的地址action’”>
(六)、设置隐藏标签
(1)<input type="hidden" /> (2)<input type="text" style="display:none" /> 以上两种方法可以实现不留痕迹的隐藏。 (3)<input type="text" style="visibility: hidden;" /> 第三种方法可以实现占位隐藏(会留下空白而不显示)
(七)、向页面传一个数组时的处理方式
String[]数组,遍历,先将它存入一个集合中,在页面通过${list}得到,同样的格式转发给Action,传过去是一个字符串,我们通过sunstring截取,通过.Split()方法获取String[];就可以得到想要传递的数组,注意取出来的中间有空格,可能需要转码两次
(八)、运用日历插件时,点击日期后就能得到查询结果
<input value="" class="Wdate"type="text" name="khTime" id="sel2"
onClick="WdatePicker({dateFmt:'yyyy年',
onpicked:function(){
varstrvalue=$('#sel2').val(); //获取点击后的值,然后跳转事件
location.href='<%=basePath%>khcx/Khcx_findById.action?userid=${userid}&khtime='+encodeURI(encodeURI(strvalue));}})"></input>
(九)、a标签传递参数时有汉字时不能直接传参数
<astyle="cursor: pointer;" id=""
οnclick="dao('<%=basePath%>khcx/Khcx_exportProblem.action?userid=${userid}&&khtime=${khTime}&&khzq=${khzq}')">导出EXCEL</a> 这里${khTime},${khzq}里面是汉字
写在点击事件里,通过参数传递
function dao(url){
location.href= encodeURI(url); //通过 encodeURI重新编码一次
};
(十)、table中行之间变色
1. <c:forEach items="${list}" var="stu" varStatus="stuState">
2. <!-- 设置偶数行背景色 -->
3. <c:if test="${stuState.index % 2 == 0 }">
4. <tr class="even_tr">
5. </c:if>
6. <!-- 设置奇数行背景色 -->
7. <c:if test="${stuState.index % 2 != 0 }">
8. <tr class="odd_tr">
9. </c:if>
10. <td>${stuState.stuNo}</td>
11. <td>${stuState.stuName}</td>
12. <td>${stuState.stuAge}</td>
13. <td>${stuState.stuSex}</td>
14. <td>${stuState.stuNationality}</td>
15. <td>${stuState.stuBlood}</td>
16. <td>${stuState.stuAddress}</td>
17. <td>${stuState.stuPhone}</td>
<td>${stuState.stuInterest}</td>
<td>${stuState.stuPost}</td>
18. </tr>
19. </c:forEach>
(十一)、刷新父窗口
Window.parent.herf=“刷新请求的地址”;
(十二)、ajax表单提交
Function ajax(){
$ajax({
url:’ 填写请求action的地址’,
type:’post 或者 get’,
data:$(‘#表单id’).serialize(),
datatype:’回传的参数类型(json,text)’
async:是否异步请求(false,true)
succss:function(result){
}
});
//如果带树形结构,刷新整个页面,包括树
Window.parent.href.location= Window.parent.href.location+”&t=”newDate()
}
(十二)、Echarts图形可视化统计
引入js文件 <script src="echarts.min.js"></script>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
Require.config({
Path:{
Echarts:echarts的路径
}
})
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
通过Ajax获取后台数据
$function({
$ajax({
url:
type:
async:
success:function(result){
for(var i=0;i<result.name.length;i++){
//获取横坐标
option.xAxis[0].data.push(result.name[i].XMMC);
//获取数值
option.series[0].data.push(result.name[i].名称);
option.series[1].data.push(result.name[i].名称);
option.series[2].data.push(result.name[i].名称);
};
Require([
‘echarts’,
‘echarts/theme/主题名’,
‘echarts/chart/bar’,
‘echarts/chart/line’,
],function(ec,theme){
Var myChart =ec.init(document.getElemenrByID(“main”,theme))
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
}
})
})
</script>
</body>
</html>
(十三)、<td>标签中图片错位
1、强制改变内核:IE7或IE8 在浏览器<head></head>之间添加meta一种
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible"content="IE=8" />
虽然起到一定的效果,但不能完全解决错位问题。
2、最后发现是IE9的一个bug </td>与<td>间有空行时会发生错位
解决方法1:将td标签不留空格,去掉所有空格,显示就正常了. ---我个人使用这种方法解决,不节外生枝了。
解决方法2:
js处理
vare xpr = new RegExp('>[\t\r\n\v\f]*<', 'g');
document.body.innerHTML =document.body.innerHTML.replace(expr, '><');