dianwangAdm/src/main/webapp/js/min-datatable.js

//	datatable
//		描述：根据配置信息，生成数据表，加上表头排序，表脚分页等信息，可以通过$("表单对象").datatable()进行刷新
//		参数：
//			options[map]:
//				url[string]：请求url
//				data[map]：请求数据
//					page[string]：默认分页页码，会上送到服务器，若该值为null，表示不显示分页信息
//					limit[string]：默认每页显示条数，会上送到服务器
//				header[array]：表头信息
//					code[string]：列编码，会将所在列的每一个th或td的code属性设置为该编码，可以用于数据定位
//					name[string]：列名称，会显示在表头
//					width[string]：列宽
//				title[string]：标题
//				complete[function]：表格生成后，调用的方法，用于处理一些表格生成后的工作，比方说为列表添加操作信息和点击事件等
//					data[array]：列表数据
//					result[map]：服务器返回的数据
//				error[function]：操作失败后调用的方法
//					result[map]：服务器返回的数据
//				sequence[string]：显示序号
//				select[string]：显示复选框
//		返回：无
//		示例：
//			代码：
//				$("#datatable").datatable({
//				url : "UserManageAction.userQuery.do",
//				data : {
//					page : 1,
//					limit : 10
//				}, 
//				select : "select",
//				sequence : "sequence",
//				header : [ {
//				code : "logonname",
//				name : "登录名"
//				}, {
//				code : "name",
//				name : "姓名"
//				}, {
//				code : "rolename",
//				name : "角色"
//				}, {
//				code : "branchname",
//				name : "所属机构"
//				}, {
//				code : "createdate",
//				name : "创建日期"
//				}, {
//				code : "lastlogon",
//				name : "最后登录日期"
//				}, {
//				code : "sttdesc",
//				name : "状态"
//				}, {
//				code : "execute",
//				name : "操作",
//				width : 350
//				} ],
//				complete : function(data) {
//					$("#datatable").find("td[code='execute']").append("<a execute='view' href='#'>查看</a> ");
//					$("#datatable").find("td[code='execute']").find("a[execute='view']").click(function() {
//						alert($(this).parents("tr").val());
//					});
//				}
//				});
//				...
//				<div id="datatable">
//					<table>
//					</table>
//				</div>
//			结果：发送数据到UserManageAction.userQuery.do，根据返回数据生成一个表格，并加上查看操作，以及序号和多选列
$.widget("ui.datatable", {
input : [],
data : {
page : null,
limit : 10 // 注意,若action不接受limit参数,则双方应当约定每页记录数或者起始页数必须为1,否则无法正确计算offset
},
result : {},
options : {
url : null,
data : {},
header : null,
maxRows : null,
sort : null,
order : 1,
pageField : "page",
limitField : "limit",
dataField : "MINQueryResult",
pagingField : "MINPaging",
title : null,
complete : null,
error : null,
sequence : null,
select : null,
sort : null,
style : function() {

},
paging : function(handler, foot, cur, start, limit, max, first, last, prev, next) {
	// foot.append("<div page='true' align='right' >起始记录:" + start + " 每页记录数:" +
	// limit + " 记录总数:" + max + " 首页:" + first + " 上一页:" + prev + " 当前页:" + cur
	// + " 下一页:" + next + " 尾页:" + last + " <a href='#' page='" + first + "'
	// >首页</a> <a href='#' page='" + prev + "'>上一页</a> <a href='#' page='" +
	// next + "'>下一页</a> <a href='#' page='" + last + "'>尾页</a> <select
	// page></select> 每页显示<select limit></select></div>");
	if (max <= limit) {
		return;
	}
	var p="";
	var shu=(last-last%10)/10;
	if(shu>3){
		shu=3;
	}
	var flag=7+shu;
	if(last>=flag){
		if(cur<5+shu){
			for ( var i = first; i <flag; i++) {
				if(i==cur){
					p=p+"&nbsp;&nbsp;"+i+"&nbsp;";
				}else{
					p=p+"&nbsp;<a page='" + i + "' class='pageCount'>"+i+"</a>";
				}
			}
			p=p+"&nbsp;<a page='" + last + "'>..."+last+"</a>";
		}else if(cur>=(5+shu) && cur<(last-3)){
			p=p+"&nbsp;<a page='" + first + "' class='pageCount'>"+first+"...</a>";
			if(cur+2+shu<last-1){
				for ( var i = cur-2-(shu); i <=cur+2+shu; i++) {
					if(i==cur){
						p=p+"&nbsp;&nbsp;"+i+"&nbsp;";
					}else{
						p=p+"&nbsp;<a page='" + i + "' class='pageCount'>"+i+"</a>";
					}
				}
				p=p+"&nbsp;<a page='" + last + "' class='pageCount'>..."+last+"</a>";
			}else{
				for ( var i = cur-2-(shu); i <=last; i++) {
					if(i==cur){
						p=p+"&nbsp;&nbsp;"+i+"&nbsp;";
					}else{
						p=p+"&nbsp;<a page='" + i + "' class='pageCount'>"+i+"</a>";
					}
				}
			}
		}else if(cur<=last && cur>=(last-3)){
			p=p+"&nbsp;<a page='" + first + "'>"+first+"...</a>";
			for ( var i = last-5; i <=last; i++) {
				if(i==cur){
					p=p+"&nbsp;&nbsp;"+i+"&nbsp;";
				}else{
					p=p+"&nbsp;<a page='" + i + "' class='pageCount'>"+i+"</a>";
				}
			}
		}
	}else{
		for ( var i = first; i <= last; i++) {
			if(i==cur){
				p=p+"&nbsp;&nbsp;"+i+"&nbsp;";
			}else{
				p=p+"&nbsp;<a page='" + i + "' class='pageCount'>"+i+"</a>";
			}
		}
	}
	var head="&nbsp;&nbsp;<a page='" + prev + "' class='pageCount'>  上一页  </a>&nbsp;&nbsp;";
	var end="&nbsp;&nbsp;<a page='" + next + "' class='pageCount'>  下一页  </a>&nbsp;&nbsp;";
	var zong=head+p+end;
	if(cur=="1"){
		zong=p+end;
	}
	if(cur==last){
		zong=head+p;
	}
	var maxRow=start+limit-1;
	if(maxRow>max){
		maxRow=max;
	}
	foot.append("<div page='true' align='right' class='pageDiv'>本页记录第:<font color='red'>" + start + "</font>-<font color='red'>" + maxRow + "</font> 每页记录数:<font color='red'>" + limit + "</font> 记录总数:<font color='red'>" + max + "</font> "+zong+"&nbsp;<input type='text' id='go_int' size='2'/><a href='#' id='go_a'><img alt='GO' src='images/go.png' width='30px' height='26px'/></a>&nbsp;</div>");
	foot.find("div[page='true']").find("a[page]").click(function() {
		handler.options.data.limit = limit;
		handler.options.data.page = $(this).attr("page");
		if (Math.floor(max / handler.options.data.limit) + 1 < handler.options.data.page)
			handler.options.data.page = 1;
		handler._init();
	});
	//选页
	foot.find("#go_a").click(function() {
		var page=foot.find("#go_int").val();
		if(page!=""){
			var reg = /^[0-9]+$/;
			if(!reg.exec(page)){
				foot.find("#go_int").val("");
				$.hints({
					strong : "错误",
					error : [ "请输入有效数字" ]
				});
				return false ;
			}
			if(page<1){
				page =1;
			}
			if(page>last){
				page =last;
			}
			handler.options.data.limit = limit;
			handler.options.data.page = page;
			if (Math.floor(max / handler.options.data.limit) + 1 < handler.options.data.page)
				handler.options.data.page = 1;
			handler._init();
		}
	});
	/*var limitArr = [ 10, 50, 100 ];
	for ( var i = 0; i < limitArr.length; i++) {
		foot.find("select[limit]").append("<option value='" + limitArr[i] + "' " + (limitArr[i] == limit ? "selected" : "") + ">" + limitArr[i] + "条</option>");
	}*/
}
},
initialized : false,
// 设置表头,以及表头排序功能,排序时不重新获取数据,只根据数据缓存重新排序
_create : function() {
	var div = $(this.element);
	div.addClass("yab");
	var table = div.find("table");
	div.css("width", "100%");
	div.addClass("ui-widget");
	table.css("width", "100%");
	table.attr("data", "true");
	table.addClass("table table-bordered");
	var header = this.options.header;
	if (this.options.select != null) {
		header = $.merge([ {
		code : this.options.select,
		name : "<input type='checkbox' batch />"
		} ], header);
	}
	if (this.options.sequence != null) {
		header = $.merge([ {
		code : this.options.sequence,
		name : "序号"
		} ], header);
	}

	var s = '<thead><tr class="ui-widget-header table-header">';
	for ( var i = 0; i < header.length; i++)
		s += "<th code='" + header[i].code + "' style='text-align:center;'><span>" + header[i].name + "</span></th>";
	s += '</tr></thead><tbody></tbody>';
	table.append(s);
	if (this.options.select != null){
		table.find("thead").find("th[code=" + this.options.select + "]").find("input[batch]").click(function(handler) {
			return function() {
				var checked = this.checked;
				table.find("tbody").find("input[name=" + handler.options.select + "]:visible").each(function() {
					if($(this).attr("disabled")!="disabled"){
						this.checked = checked;
					}
				});
			};
		}(this));
	}

	if (this.options.data.page != null)
		table.append('<tfoot><tr class="table-footer"><td colspan="' + header.length + '"></td></tr></tfoot>');
		
	var th = table.find("thead").find("tr").find("th");
	var i = 0;
	th.each(function() {
		var val = header[i++];
		if (val.width != undefined) {
			$(this).width(val.width);
		}
	});
	if (this.options.title != null)
		$(this.element).prepend("<h3 align=\"center\">" + this.options.title + "</h3>");
	
	if(this.options.sort){
		th.hover(function() {
			$(this).addClass("t3");
			$(this).css("cursor", "pointer");
		}, function() {
			$(this).removeClass("t3");
		});
		th.click(function(handler) {
			return function() {
				if (handler.options.select != null && handler.options.select == $(this).attr("code")) {
					return;
				}
				if (handler.options.sort != $(this).attr("code")) {
					handler.options.order = 0;
				}
				$(this).parent().find("th").find("span").removeClass(" ui-icon ui-icon-carat-1-n ui-icon-carat-1-s ");
				if (handler.options.order == 0) {
					$(this).find("span").addClass(" ui-icon ui-icon-carat-1-n ");
					handler.options.order = 1;
				} else if (handler.options.order == 1) {
					$(this).find("span").addClass(" ui-icon ui-icon-carat-1-s ");
					handler.options.order = -1;
				} else if (handler.options.order == -1) {
					handler.options.order = 0;
				}
				handler.options.sort = $(this).attr("code");
				handler.clear();
				handler.setupData();
				if (handler.options.data.page != null)
					handler.setupPage();
			};
		}(this));
	}
},
// 刷新数据
_init : function() {
	if (this.options.url != null) {
		var data = {};
		if (this.options.data != null && !$.isArray(this.options.data)) {
			data = this.options.data;
		} else if (this.options.data.page != null) {
			if (this.options.data.page != null) {
				data[this.options.pageField] = this.options.data.page;
			}
			if (this.options.data.limit != null) {
				data[this.options.limitField] = this.options.data.limit;
			}
		}
		//this.clear();
		$.request({
		action : this.options.url,
		data : data,
		success : function(handler) {
			return function(data) {
				handler.clear();//处理多次初始化的情况，每次先将数据清除
				handler.data = data[handler.options["dataField"]];
				handler.result = data;
				if (handler.options.data.page != null) {
					var page = data[handler.options["pagingField"]];
					if (page != undefined) {
						handler.options.maxRows = page.maxRows;
						handler.options.data.limit = page.limit;
						handler.options.data.page = page.page;
					}
				}
				handler.setupData();
				if (handler.options.data.page != null) {
					handler.setupPage();
				}
			}
		}(this),
		error : function(handler) {
			return function(data) {
				if (handler.options.error != null)
					handler.options.error(data);
			}
		}(this)
		});
	} else if (this.options.input != null) {
		if ($.isArray(this.options.input)) {
			this.options.maxRows = this.options.input.length;
			if (this.options.data.page != null) {
				var start = ((this.options.data.page - 1) * this.options.data.limit);
				if (start < 0)
					start = 0;
				this.data = this.options.input.slice(start, start + this.options.data.limit);
			} else {
				this.options.data.limit = this.options.maxRows;
				this.data = this.options.input;
			}
		} else {
			var obj = this.options.input();
			this.data = obj.data;
			if (obj.limit != null)
				this.options.data.limit = obj.limit;
			if (obj.maxRows != null)
				this.options.maxRows = obj.maxRows;
			if (obj.page != null)
				this.options.data.page = obj.page;
		}
		this.clear();
		this.setupData();
		if (this.options.data.page != null) {
			this.setupPage();
		}
	}
},
// 清理表体数据
clear : function() {
	$(this.element).find("table").find("tbody").empty();
	if (this.options.select != null) {
		var choiceAll = $(this.element).find("table").find("thead").find("th[code=" + this.options.select + "]").find("input[batch]");
		choiceAll.prop("checked",false);
	}
},
// 排序比较函数
sortData : function(sort, order) {
	return function(x, y) {
		var xs = x[sort] == undefined ? "" : x[sort];
		var ys = y[sort] == undefined ? "" : y[sort];
		return xs > ys ? order : xs < ys ? order * -1 : 0;
	};
},
// 设置表体数据
setupData : function() {
	var header = this.options.header;
	if (this.options.select != null) {
		header = $.merge([ {
			code : this.options.select
		} ], header);
	}
	if (this.options.sequence != null) {
		header = $.merge([ {
			code : this.options.sequence
		} ], header);
	}
	var data = this.data.slice(0);
	if (this.options.sort != null && this.options.order != 0) {
		data.sort(this.sortData(this.options.sort, this.options.order));
	}
	var s = '';
	for ( var i = 0; i < data.length; i++) {
		s += "<tr class=\"" + (i % 2 == 0 ? "t1" : "t2") + "\">";
		for ( var j = 0; j < header.length; j++) {
			var val = null;
			if (this.options.select == header[j].code) {
				val = "<input type='checkbox' name='" + header[j].code + "' />";
			} else if(header[j].type == "amount"){
				val = $.toCashWithCommaAndDot(data[i][header[j].code]+"");
			}else{
				val = data[i][header[j].code];
			}
			s += "<td " + ((header[j].title == null || (data[i][header[j].title] == undefined)) ? "" : "title='" + data[i][header[j].title] + "'") + " code='" + header[j].code + "' align='center'>";
			s += val == undefined ? "" : val;
			s += "</td>";
		}
		s += "</tr>";
	}

	$(this.element).find("table").append(s);
	var tr = $(this.element).find("table").find("tbody").find("tr");
	var i = 0;
	tr.each(function() {
		$(this).val(data[i++]);
	});
	tr.hover(function() {
		$(this).addClass("t3");
	}, function() {
		$(this).removeClass("t3");
	});
	if (this.options.complete != null) {
		this.options.complete(data, this.result);
	}
	if (this.options.sequence != null) {
		var i = 1, page = this.options.data.page, limit = this.options.data.limit;
		$(this.element).find("table").find("td[code='" + this.options.sequence + "']").each(function() {
			$(this).html(i++ - 0 + (page - 1) * limit);
		});
	}

	//全选时选中全选框
	$(this.element).find("table").find("input[type=checkbox][name=" + this.options.select + "]").click(function(handler){
			return function(){
				var checkboxNum = $(handler.element).find("table").find("input[type=checkbox][name=" + handler.options.select + "]:visible").length;
				var checkedNum = $(handler.element).find("table").find("input[type=checkbox][name=" + handler.options.select + "]:checked").length;
				if(checkboxNum == checkedNum){
					$(handler.element).find("table").find("input[batch]").prop("checked",true);
				}else{
					$(handler.element).find("table").find("input[batch]").prop("checked",false);
				}
			}
	}(this));
	
	//对全选框初始化
	var checkboxNum = $(this.element).find("table").find("input[type=checkbox][name=" + this.options.select + "]:visible").length;
	var checkedNum = $(this.element).find("table").find("input[type=checkbox][name=" + this.options.select + "]:checked").length;
	if(checkedNum>0 && checkboxNum == checkedNum){
		$(this.element).find("table").find("input[batch]").prop("checked",true);
	}else{
		$(this.element).find("table").find("input[batch]").prop("checked",false);
	}
	
},
// 设置分页数据
setupPage : function() {
	var tfoot=$(this.element).find("table").find("tfoot");
	var foot = $(this.element).find("table").find("tfoot").find("tr").find("td");
	if(this.options.maxRows>this.options.data.limit){
	tfoot.show();
	foot.html("");
	foot.children().remove();
	var cur = this.options.data.page;
	cur = cur < 0 ? 0 : cur > this.options.maxRows ? this.options.maxRows : cur;
	cur = cur - 0;
	var first = 1;
	var last = Math.floor(((this.options.maxRows - 1) / this.options.data.limit) + 1);
	var prev = cur > first ? cur - 1 : first;
	var next = cur < last ? cur + 1 : last;
	var start = ((this.options.data.page - 1) * this.options.data.limit);
	if (start < 0)
		start = 0;
	start = start + 1;
	this.options.paging(this, foot, cur, start, this.options.data.limit, this.options.maxRows, first, last, prev, next);
	}else{
		tfoot.hide();
		if(this.result.MINQueryResult.length==0){
			tfoot.show();
			foot.html("没有查询记录!");
		}
	}
},

destroy : function() {
	// 有需要再写
}
});