工作中遇到问题记录

最新推荐文章于 2021-03-22 10:03:06 发布

mjf853912229

最新推荐文章于 2021-03-22 10:03:06 发布

阅读量408

点赞数 1

文章标签：工作

本文链接：https://blog.csdn.net/mjf853912229/article/details/74528451

版权

（一）、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页面

div{ margin:0 auto;}

</style>

</head>

<body>

</div>

//显示弹出层

</iframe>

</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提交验证时：

$(function(){

checkObj= $("#add"（这里表示你的表单id名称）).Validform({

tiptype:999,

callback:false,

ignoreHidden:true //隐藏元素不验证

});

（3）通过from表单action提交：只需要：

$(function(){

checkObj= $("#add"（这里表示你的表单id名称）).Validform

});

（4）在表单中input属性要设置：

（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一种

虽然起到一定的效果，但不能完全解决错位问题。

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, '><');

mjf853912229

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
工作中遇到问题记录

（一）、Layer插件（1）需要引入js文件：1、resources/js/layer/layer.min.js"> 2、resources/js/layer/skin/layer.css"> （2）刷新父窗口数据，关闭弹出层
复制链接

扫一扫