前端知识点笔记

前端：

1.文件上传

<!-- 修改文件生成规则在WebUploaderController方法内 -->
<t:webUploader
    bizType="上传路径标识" name="name" fileSingleSizeLimit="限制文件大" 
    pathValues="默认值"
    extensions="jpg,png,pdf,doc,docx,zip,xls,xlsx,pptx" auto="true"
    fileNumLimit="1">
</t:webUploader>

2.页面必填项

录入页面添加红色星号

<span style="color:red">*</span>

判断输入框必填项是否为空

<tr>
        <td align="right">
            <label class="Validform_label">
                <span style="color:red">*</span>摆动:
            </label>
        </td>
        <td class="value">
            <input id="scillation" name="scillation" type="text" style="width: 90%" class="inputxt"  datatype="*"  ignore="checked" />
            <span class="Validform_checktip"></span>
            <label class="Validform_label" style="display: none;">摆动</label>
        </td>
</tr>

3.操作里的查看按钮

funname="" 调用函数,url中的load=deail使弹出框不可变更

       function detail(id){
       var url = 'machineCalibrationInfoController.do?goUpdate&load=detail';
       url += '&id='+id;
       createdetailwindow("查看",url);
      }

4.点击指定列进行跳转

formatterjs="detailSeam" 自定义函数名称(调用页面自定义js方法 参数为(value,row,index)

//value:当前字段的值，row:当前整行字段的所有数据(Json数组类型)，index:当前字段的索引 
function detailSeam(value, row, index){
     var str = "<a href='javascript:void(0)' style='color:blue;' οnclick='detail(&apos;" + row['id']+"&apos;)'>"+row.要显示字段名+"</a>"; 
      return str; 
    }

function detail(row){
    var url = 'modiWeldingSeamController.do?goDetailSeam&load=detail';
    url += '&id='+row;
    createdetailwindow("查看",url,1300,600);//后面两个参数是框的大小
}

5.按钮弹窗事件

$.dialog.confirm("确定将此层道进行工序完工吗?", function(){
                $.ajax({
                    async : false,
                    cache : false,
                    type : 'POST',
                    data : {"id":id,"jobId":jobId,"seamId":seamId,"layerSeq":layerSeq},
                    url : "modiJobController.do?finish",
                    error : function() {
                    },
                    success : function(data) {
                        var d = $.parseJSON(data);
                        if(d.msg == "完工成功"){
                            tip(d.msg);
                            $("#modiJobDetailList").datagrid("load",{}); 
                        }else{
                            tip("失败");
                        }
                    }
                });
​
            });

6.编辑和录入使用同一页面相关操作

编辑和添加使用同一页 （ctrl+左键点击跳转）

7.获取当前选中行的信息

var check = $("#[填入t:datagrid的name]").datagrid("getSelections");

8.弹窗提醒右下角位置

tip("提示信息");

9.(ajax) JSON字符串转为与之对应的JavaScript对象。

$.parseJSON(返回值result)

10.跳转页面(内部嵌入页面)

addOneTab('title','<%=path %>/'+'jumpController.do?jimuViewDemo&reportId=积木报表值);尾部可跟参数&name=name
‘调用的接口返回值需要ModeAndView类型(详细可见笔记中后端函数:ModelAndView)’

11.实现已选数据提示多选页面

实现已选数据提示多选页面 （ctrl+左键点击跳转）

12.在JSP页面使用三元运算是否显示该按钮

使用双井号包住标签

<div class="weui-cell__bd" style="width:40px;flex: none;padding: 2px 0px;">
                    ##${pickingStatus}==2?'<input type="checkbox" name="materialChk" value="${itemIndex}" style="font-size: 30px;" >':''##
</div>

13.布局设置单元格占一整行

/*<td>内部设置colspan="3"*/
<tr>
    <td align="right">
        <label class="Validform_label">
            title:
        </label>
    </td>
    <td class="value" colspan="3">
        <input  />
        <span class="Validform_checktip"></span>
        <label class="Validform_label" style="display: none;">
            输入框:
        </label>
    </td>           
</tr>

14.java script控制标签的方法

$('.TEXT') //控制class的标签
$('#TEXT') //控制id的标签
//通过class去控制标签元素属性
$('.weui-gallery__img').css("backgroundImage","url(../"+url+")");
​
//通过class去控制标签元素属性
var otherComment = document.getElementsByClassName("btns");
otherComment[0].style.display = "none";

15.搜索框字段显示不全的解决方案

<!-- #from表单的id》span:first-child表示第一个span标签》span:nth-child(1)表示第1个标签 -->
$("#modiHistoryCertificateListForm>span:first-child>span:nth-child(1)>span:first-child").css('width','140px'); 

16.PDF、JPG等文件实现弹出窗显示

<!-- 创建一个div用于存放弹窗 -->
<div id="light" class="white_content">
            <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';">
                <button style="margin-left:475px">╳</button>
                <embed id = "bookUrl" style=" width: 500px; height: 500px; "/>
            </a>
</div> 

<!-- 设置弹窗的宽度 -->
<style> 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 50%;
            margin-left:-250px; 
            left: 50%; 
            margin-top:-280px;
            width: 500px; 
            height: 530px; 
            padding: 0px; 
            border: 0px solid orange; 
            background-color:#FFF; 
            z-index:10001; 
            overflow: auto; 
        } 
    </style> 

<!-- 用于点击显示 -->
document.getElementById('bookUrl').src=data;
document.getElementById('light').style.display='block';

17.list页面操作按钮不显示

//页面没有id主键
<t:dgCol title="id"  field="id"  hidden="true"  queryMode="group"  width="80"></t:dgCol>

18.Ajax格式

 $.ajax({
        url:url,
        async:true,
        cache:false,
        type:'POST',
        //dataType:'json',
        contentType: "application/json;charset=UTF-8",
        success:function(data){
​
        },
        error:function(event,xhr,options,exc){
​
        }
});

19.定时任务(js方法)

$(function(){
     totaladd(); //定时任务触发的函数
     setInterval(totaladd,3000);//设置定时1000=1秒
});
​
function totaladd(){
     alert('定时任务执行');
}