// 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("查看 "); // $("#datatable").find("td[code='execute']").find("a[execute='view']").click(function() { // alert($(this).parents("tr").val()); // }); // } // }); // ... //
// //
//
// 结果:发送数据到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("
起始记录:" + start + " 每页记录数:" + // limit + " 记录总数:" + max + " 首页:" + first + " 上一页:" + prev + " 当前页:" + cur // + " 下一页:" + next + " 尾页:" + last + " 首页 上一页 下一页 尾页 每页显示
"); 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 "+i+""; } } p=p+" ..."+last+""; }else if(cur>=(5+shu) && cur<(last-3)){ p=p+" "+first+"..."; if(cur+2+shu"+i+""; } } p=p+" ..."+last+""; }else{ for ( var i = cur-2-(shu); i <=last; i++) { if(i==cur){ p=p+"  "+i+" "; }else{ p=p+" "+i+""; } } } }else if(cur<=last && cur>=(last-3)){ p=p+" "+first+"..."; for ( var i = last-5; i <=last; i++) { if(i==cur){ p=p+"  "+i+" "; }else{ p=p+" "+i+""; } } } }else{ for ( var i = first; i <= last; i++) { if(i==cur){ p=p+"  "+i+" "; }else{ p=p+" "+i+""; } } } var head="   上一页   "; var end="   下一页   "; 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("
本页记录第:" + start + "-" + maxRow + " 每页记录数:" + limit + " 记录总数:" + max + " "+zong+" GO 
"); 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(""); }*/ } }, 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 : "" } ], header); } if (this.options.sequence != null) { header = $.merge([ { code : this.options.sequence, name : "序号" } ], header); } var s = ''; for ( var i = 0; i < header.length; i++) s += "" + header[i].name + ""; s += ''; 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(''); 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("

" + this.options.title + "

"); 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 += ""; for ( var j = 0; j < header.length; j++) { var val = null; if (this.options.select == header[j].code) { val = ""; } else if(header[j].type == "amount"){ val = $.toCashWithCommaAndDot(data[i][header[j].code]+""); }else{ val = data[i][header[j].code]; } s += ""; s += val == undefined ? "" : val; s += ""; } s += ""; } $(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() { // 有需要再写 } });