jq在项目中的小用

最新推荐文章于 2021-08-08 15:37:08 发布

Luck Ye

最新推荐文章于 2021-08-08 15:37:08 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/tanliu1596/article/details/88904541

关于jq的使用：
通过ajax的传参请求：

$.post(
			"${ctx}departmentExaminationController/examine",
			{"tjh000":tjh000,"bmbh00":bmbh00,"ksxj00":ksxj00},
			function(data){
				 if(data==null||data.isSuccess==false){
		             alert(data.msg);
		         }else{
		        	 alert(data.msg);
		        		$("#control").val("1");
		         }
				
			}
	);

通过jq的each函数进行数据的循环获取，但是要注意回传的数据的格式一定要清楚。


页面的表格数据需要标记指定的数据格式     <tbody data-json="jyTable"></tbody>
------------------------------------------------------------------
 $.post("${ctx}departmentExaminationController/getSuggestion",
			 {"tjh000":tjh000,"pysm00":pysm00},
			     function(data){
			   	  $("#jltable tbody").html("");
			    	 console.log(data);
			    	 if(data.data==null)
			    		 {
			    			 return;
			    		 }
			    	 var demo="";
			    	 var i=0;
			    	 $.each(data.data, function (index, value) {
			    		 
			    		 if(value.SFXMMC==null){
			    			 value.SFXMMC='';
			    		 }
			    		 if(value.DJ0000==null){
			    			 value.DJ0000='';
			    		 }
			    		 if(value.BMMC00==null){
			    			 value.BMMC00='';
			    		 }
			    		 if(value.YGXM00==null){
			    			 value.YGXM00='';
			    		 }
			    		 if(value.CZRQSJ==null){
			    			 value.CZRQSJ='';
			    		 }
			    		 if(value.BZ0000==null){
			    			 value.BZ0000='';
			    		 }
			    		demo=demo+"<tr c='"+value.SQXMID+"'><td><input type='checkbox'></td>";
			    		demo=demo+"<td>"+value.SFXMMC+"</td>"
					    demo=demo+"<td>"+value.DJ0000+"</td>"
					 	demo=demo+"<td>"+value.BMMC00+"</td>"
						demo=demo+"<td>"+value.YGXM00+"</td>"
						demo=demo+"<td>"+value.CZRQSJ+"</td>"
						demo=demo+"<td>"+value.BZ0000+"</td></tr>"
						
						i++;
});
			    	 $("[data-json='jyTable']").html(demo);//添加到模板的容器中
			         if(data==null||data.isSuccess==false){
			             alert(data.msg);
			         }
				  }
				);

给表个绑定一个点击事件

  $.post("${ctx}departmentExaminationController/getAP/"+tjh+"/"+bmbh,
				//{"id":tjh},
		
			     function(data){
			   	  $("#sqtable tbody").html("");
			    	 console.log(data)
			    	 if(data.data==null)
			    	 {
			    		 return;
			    		}
			    	 $.each(data.data, function (index, value) {
   					var row = $("#sqtr").clone();
   					 row.find("#sqxm").text(value.SQXMMC).click(function(){
   						getTz(value.JCXMID);
   					 });
    			 	  	 row.find("#jcxm").text(value.JCXMMC).click(function(){
   						getTz(value.JCXMID);
   					 });
    			 	  	 row.find("#jcjg").text(value.TZCMS0).click(function(){
   						getTz(value.JCXMID);
   					 });
    			 	  	 row.find("#dw").text(value.JCXMDW).click(function(){
   						getTz(value.JCXMID);
   					 });;
    			 	 	 row.find("#scz").html("<a onclick='deleteAp("+value.JCID00+")'>删除</a>");
   					 row.appendTo("#sqtable");//添加到模板的容器中
});
			        

			         if(data==null||data.isSuccess==false){
			             alert(data.msg);
			         }
				  }
				);

通过id绑定一个点击事件

$("#id").click(function(){
    
    //实现相应的逻辑
    
})

获取select的标签的值和文本值

1 2	var bmbh00=$("#dqks").find("option:selected").val(); var bmbhtext=$("#dqks").find("option:selected").text();

通过表格来页面传递值动态数据：

$("#标签的id").atrr("属性名"，属性值);
    通过下面的标签获取属性值
    这样就可以获取动态的数据了
var 属性值=$("#表签id").atrr("属性名");

表格的通过tr来获取下面的元素

   1.编辑按钮来让文本框进入编辑模式(控制这个标签的disabled来控制文本框可以用)
                     row+='<tr pjcxmid="'+value.JCXMID+'" pxmtzid="'+value.XMTZID+'">'+		
	    		 '<td><input type="text" disabled value="'+value.TZMC00+'"></td>'+
	    		 '<td><input type="text" disabled value="'+value.XMTZMS+'"></td>'+
	    		 '<td><a href="javascript:;" class="edit-Tz" >编辑</a></td></tr>'
	    		 '<td><a href="javascript:;" class="edit-Tz" >编辑</a></td></tr>'
	    	 return row;
2.通过table的tr来获取整个表格的对象，当前行的对象：
    通过当前对象的父级的找到根据父找到相面带文本框的并修改文本框的属性和样式
$('#ttable').on('click','.edit-Tz',function(){
   		//console.log($(this).parents('tr').attr("pjcxmid"));
   		$(this).parents('tr').find('input[type="text"]').prop('disabled',false).css({'border':'1px solid #ccc'})
   		$(this).parents('tr').addClass('on').siblings('tr').removeClass('on');
   		
   		
   	});
   	//通过table的失去焦点而触发的事件
	$('#ttable').on('blur','input[type="text"]',function(){
   	        //获取tr上的属性
   		var pjcxmid=$(this).parents('tr').attr('pjcxmid');
   		//获取父级标签中带有input的值如果是多个那么就eq来逐一获取
   		var ptzmc00=$(this).parents('tr').find('input[type="text"]').eq(0).val();		
   	    var pxmtzms=$(this).parents('tr').find('input[type="text"]').eq(1).val() ;	
   	    console.log(ptzmc00);
   	    console.log(pxmtzms);
   	    var pczy000=getEmployeeId();
   	    pczy=pczy000[0];
   	    var pbmbh00=$("#dqks").find("option:selected").val();
   	    var pxmtzid=$(this).parents('tr').attr('pxmtzid');
   		var popflag=2;
   		//发起ajax的请求
   		$.post("${ctx}departmentExaminationController/updataSiginValue",
   				{"popflag":popflag,"pjcxmid":pjcxmid,"ptzmc00":ptzmc00,"pxmtzms":pxmtzms,"pczy000":pczy,"pxmtzid":pxmtzid,"pbmbh00":pbmbh00},
   				function(data){
   					  if(data==null||data.isSuccess==false){
   				             alert(data.msg);
   				         }else{
   				        	 
   				        	 alert(data.msg);
   				         }
   					
   				}
   						
   		
   		);
   		$(this).prop('disabled',true).css({'border':'none'});
   		
   	})

对日期的格式化

Date.prototype.Format = function (fmt) { //author: meizz   
    var o = {  
        "M+": this.getMonth() + 1, //月份   
        "d+": this.getDate(), //日   
        "H+": this.getHours(), //小时   
        "m+": this.getMinutes(), //分   
        "s+": this.getSeconds(), //秒   
        "q+": Math.floor((this.getMonth() + 3) / 3), 
        "S": this.getMilliseconds() //毫秒   
    };  
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
    for (var k in o)  
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
    return fmt;  
}