zoukankan      html  css  js  c++  java
  • js jquery 插件

    $(function(){
    	(function($, document, undefiend){
    		$.fn.pagination = function(options){
    			var $this = $(this);
    			var defaults = {
    					pageNo : 1,
    					pageSize : 50,
    					totalPages : 1,
    					totalRecords : 1,
    					goToPage : $.noop
    			}
    			
    			var _opt = $.extend({}, defaults, options);
    			var totalRecordHtml = ' <span class="num">共'+_opt.totalRecords+'条记录</span>';
    			
    			var btnDivHtml = '<div class="pageBtn">' 
    				            	+'<span class="pageNum pageNo">第<input type="text" value="'+_opt.pageNo+'" class="input_page"/>页</span>'
    				            	+'<span class="allpage">共'+_opt.totalPages+'页</span><span>每页'+_opt.pageSize+'条</span><span class="goBtn">go</span>'
    	            			+'</div>';
    			
    			$this.empty()
    				.append(totalRecordHtml).append(btnDivHtml);
    			
    			var goBtn = $this.find('.goBtn');
    			
    			$this.on('keyup','.pageNo',function(e){
    				if(e.keyCode == 13){//回车
    					goBtn.click();
    				}
    			})
    			
    			goBtn.on('click',function(){
    				var pageNoInput = $this.find('.pageNo').find('input');
    				var _pageNo = pageNoInput.val();
    				if(!isNaN(_pageNo)){
    					var pageNo = parseInt(_pageNo);
    					if(0<pageNo && pageNo<=_opt.totalPages){
    						_opt.goToPage(pageNo);
    						return;
    					}
    				}
    				pageNoInput.val(_opt.pageNo);
    			});
    			
    		}
    	})($, document);
    
    })
    
    
    
    
    
    
    $(function(){
    	new PriceMonitor();
    
    })
    function PriceMonitor(){
    	this.initialize();
    	this.loadData(this.province_id,this.month,1);
    	this.getUrlArgument(name);
    	this.serchBox();
    }
    
    PriceMonitor.prototype={
    	initialize:function(){
    		this.checkBox = $(".selectBox");
    		this.select_cor = $(this.checkBox).find("#select_area");
    		this.month_input = $(this.checkBox).find("#cycleMonth");
    		this.select_input =$(this.select_cor).find("#provinceId");
    		this.select_hide_box =$(this.select_cor).find(".hide_select_box2");
    		this.select_li =$(this.select_cor).find(".select_demo").children("li");
    		this.serachBtn = $(this.checkBox).find(".refreshBtn");
    		this.download_btn = $(".download_pc");
    		//创建表格
    		this.table = $(".priceMonitor");
    		this.headName = $('<table class="tableHead"><tr></tr></table>');
    		this.dataWrap = $('<div class="tableList"></div>');
    		this.tableList =$('<table></table>');	
    		//获取url参数
    		this.province_id =this.getUrlArgument("groupprovince");
    		this.month = '';
    		this.pageSize = 20;
    		
    	},
    	serchBox:function(){
    		var own = this;
    				//点击省下拉效果
    		$(own.select_input).click(function(){
    			if($(own.select_hide_box).is(":hidden")){
    				$(own.select_hide_box).slideDown();	
    			}else{
    				$(own.select_hide_box).slideUp();
    			}			
    		});
    		//选择省份
    		
    		$(own.select_li).hover(function(){
    			$(this).addClass("on").siblings().removeClass("on");
    		}).click(function(){
    			var text = $(this).text();
    			var val = $(this).data("tree-id");
    			$(own.select_input).val(text);
    			$(own.select_input).attr("data-id",val);
    			$(this).addClass("on").siblings().removeClass("on");
    			$(own.select_hide_box).slideUp();
    		});
    		//搜索按钮
    		 $(own.serachBtn).click(function(e,data){
    			 var pageNo = 1;
    				if(data && data.pageNo){
    					pageNo = data.pageNo;
    				}
    			 var time_val = $("#cycleMonth").val();
    			 var pro_id ="";
    			 if($(own.select_cor).is(":hidden")){
    				 pro_id = own.province_id;
    			 }else{
    				 pro_id = $(own.select_input).attr("data-id");
    			 }
    			 if(time_val==""||time_val==undefined){
    				 alert("请选择时间!")
    			 }else{
    				own.loadData(pro_id,time_val,pageNo);
    			 }
    		 });
    		 //下载按钮
    		 $(own.download_btn).click(function(){
    			 var month = $(own.month_input).val();
    			 var pro_id ="";
    			 if($(own.select_cor).is(":hidden")){
    				 pro_id = own.province_id;
    			 }else{
    				 pro_id = $(own.select_input).attr("data-id");
    			 }
    			 $(this).attr('href',contextPath+'/downPriceMonitor?province='+pro_id+'&month='+month)
     
    		 });
    		
    	},
    	
    	loadData:function(pro,month,pageNo){
    		var own = this;
    		var the_url = contextPath+'/getPriceMonitor?province='+pro+'&month='+month+'&pageSize='+own.pageSize+'&pageNo='+pageNo;
    		if(own.province_id==10){
    			$(own.select_cor).show();
    		}else{
    			$(own.select_cor).hide();
    		}
    		$.ajax({
    			url:the_url,
    			type:'GET',
    			dataType:'json',
    			beforeSend:function(){
    				$(own.table).empty()
    				.append('<div class="loading"><img src="/resources/images/loading.gif" /></div>');
    			},
    			success:function(data){	
    				$(own.table).empty();
    				var json = $.parseJSON(data);
    				if(json.code==0){
    					own.initInfo(json.data);
    					own.page(json.data.page);
    				}else{
    					$(".priceMonitor").empty().append('<div class="fail">数据加载失败,请稍后再试!</div>');
    				}
    				
    			},
    			error:function(){
    				$(".priceMonitor").empty().append('<div class="fail">服务器繁忙,请稍后再试!</div>');
    				
    			}
    		})
    	},
    	
    	initInfo:function(jsonData){
    		var own = this;
    		$(own.month_input).val(jsonData.month);
    		$(own.table).empty();
    		$(own.table).append($(this.headName),$(own.dataWrap).append(own.tableList));
    		var head = jsonData.headers;
    		/*表头*/
    		 $(own.headName).find('tr').empty();
    		var i = 0;
    		for(var vv in head){
    			var width;
    			var val = head[vv];
    			if(i==0){
    				width = 120
    			}else if(i==1){
    				width = 280
    			}else{
    				width = 90;
    			}
    			 $(this.headName).find('tr').append('<th width="'+width+'">'+val+'</th>');
    			 i++;
    		}
    		/*表格数据列表*/
    		var listData = jsonData.page.list;
    		$(own.tableList).empty();
    		for(var k=0; k<listData.length;k++){
    			if(k%2==0){
    				var $tr = $('<tr class="odd"></tr>');
    			}else{
    				var $tr = $("<tr></tr>");
    			}
    			$(own.tableList).append($tr);
    			var row_val = listData[k];
    			var j=0;
    			for(var v in row_val){
    				var td_width = $(own.headName).find('th:eq('+j+')').width();
    				span_val = row_val[v];
    				$tr.append('<td width="'+td_width+'">'+span_val+'</td>');
    				j++;
    			}	
    		}
    		
    		
    	},
    	page:function(option){
    		var own = this;
    
    		$('.paginator').pagination({
    			pageNo : option.pageNo,
    			pageSize :  own.pageSize,
    			totalPages : option.totalPages,
    			totalRecords : option.totalRecords,
    			
    			goToPage : function(pageNo){
    				$(own.serachBtn).trigger('click',{pageNo:pageNo});
    			}
    		})
    	},
    	getUrlArgument :  function(name){
    	    var search = document.location.search;
    	    var pattern = new RegExp("[?&]"+name+"=([^&]+)");
    	    var matcher = pattern.exec(search);    
    	    var items = null;
    	    if(null != matcher){
    	        try{
    	            items = decodeURIComponent(decodeURIComponent(matcher[1]));         }catch(e){
    	            try{
    	                    items = decodeURIComponent(matcher[1]);
    	            }catch(e){
    	                    items = matcher[1];
    	            }
    	        }
    	    }
    	    return items;
    	}
    }
    

      

  • 相关阅读:
    artDialog组件应用学习(二)
    artDialog组件应用学习(一)
    MVC Request.UrlReferrer为null
    jquery的toggle()方法
    Windows 和 Linux 下生成以当前时间命名的文件
    再提供一种解决Nginx文件类型错误解析漏洞的方法
    Nginx 1.5.2 + PHP 5.5.1 + MySQL 5.6.10 在 CentOS 下的编译安装
    架构师对话
    Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器
    Nginx 0.7.x + PHP 5.2.6(FastCGI)+ MySQL 5.1 在128M小内存VPS服务器上的配置优化
  • 原文地址:https://www.cnblogs.com/clds/p/4936813.html
Copyright © 2011-2022 走看看