文档章节

js jquery 插件

穿林度水
 穿林度水
发布于 2016/11/07 14:28
字数 651
阅读 4
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

$(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;
	}
}

  

© 著作权归作者所有

穿林度水
粉丝 0
博文 250
码字总数 167120
作品 0
海淀
程序员
私信 提问
Jquery不同版本共用的解决方案(插件编写)

最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写。 但是在编写的过程中遇到一个头疼的问题,就是正在编写的...

Eric_HSBC
2013/05/15
3.7K
2
你不需要 jQuery,但你需要一个 DOM 库

写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经逐渐退出历史舞台,但是它的 API 将会以另外一种形式...

叙帝利
03/27
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
分享16个javascript&jQuery的MVC教程

日期:2011/12/19 来源:GBin1.com 2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢! jQuery MVC 1. AJAX - Spring MVC 3和jQuery的整合 ...

gbin1
2011/12/21
5.7K
5
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键...

给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 博客分类: Javascript CSS jQuery插件系列 重置Alert模拟AlertJquery Alert插件开发Jquery插件开发 我们在...

wolf_su
2013/07/03
127
0

没有更多内容

加载失败,请刷新页面

加载更多

互联网公司为啥不使用mysql分区表?(一分钟系列)

缘起:有个朋友问我分区表在58的应用,我回答不出来,在我印象中,百度、58都没有听说有分区表相关的应用,业内进行一些技术交流的时候也更多的是自己分库分表,而不是使用分区表。于是去网上...

小海bug
30分钟前
8
0
Dev GridView显示筛选框

列表上方的筛选框,可根据任意列进行数据筛选 设置:GridView属性showAutoFilterRow为true

_Somuns
34分钟前
6
0
DevExpress WPF v19.2图表图形控件功能增强?速速种草

通过DevExpress WPF Controls,你能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件的衍伸产品,还是...

FILA6666
37分钟前
5
0
鹿班|一人设计10亿图片,这个“设计师”如何演进?

本文内容提炼: 1、如何建立图片数据与用户注意力之间的连接? 2、如何进行结构化规模化的图片生产? 2019 年双十一期间,鹿班面向集团电商场景输送了 10亿 规模的图片。从提升公域流量效率,...

阿里云官方博客
39分钟前
7
0
argo注册教程和攻略,argo共识币介绍注册帮助

ARGO移动云矿一家专注于加密的公司。Argo本周在伦敦证券交易所上市,融资2500万英镑(约3200万美元),总估值约6100万美元。 从历史上来看,整个行业的超级神话。 目前Argo公司已经在加拿大第...

区块链知识分享
40分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部