; RoadUI.Grid = function (options) { var defaults = { table: $(), //源表格 tableID: '', //源表格ID pager: $(),//分页html showpager: true, //是否显示分页 width: '', //列表宽度 height: '', //列表高度 sort: true, //是否可以排序 sorttype: 'desc',//初始排序方式 oddcolor: true, //是否隔行换色 clickColor: false, //是否点击换色 resizeCol: true, //是否可以调整列宽 instanceName: '' //实例名称 }; this.opts = $.extend(defaults, options); if (!this.opts.table || this.opts.table.size() == 0) { var tableID = this.opts.tableID; if (tableID && $.trim(tableID).length > 0) { this.opts.table = $("#" + $.trim(tableID)); } } if (!this.opts.table || this.opts.table.size() == 0) { throw "要初始化的表格为空"; return false; } if (RoadUI.Core.isIE6()) { this.opts.resizeCol = false; } var instance = this; this.init = function () { var $div = $('
'); var $divhead = $('
'); var $divbody = $('
'); var $divpager = $('
'); var $divlist = $('
'); instance.opts.container = $div; var tableHtml = instance.opts.table.get(0).outerHTML; $divhead.append(tableHtml); $('tbody', $divhead).remove(); $divbody.append(tableHtml); $('thead', $divbody).remove(); $divlist.append($divhead, $divbody); $div.append($divlist); var $headTable = $('table', $divhead); $headTable.attr('border', '0'); $headTable.attr('cellpadding', '0'); $headTable.attr('cellspacing', '0'); $headTable.css('width', '100%'); $headTable.removeAttr('id'); var $bodyTable = $('table', $divbody); $bodyTable.attr('border', '0'); $bodyTable.attr('cellpadding', '0'); $bodyTable.attr('cellspacing', '0'); $bodyTable.css('width', '100%'); $bodyTable.removeAttr('id'); if (instance.opts.showpager) { $div.append($divpager); var $pager = instance.opts.pager; var pagerhtml = ""; if ($pager && $pager > 0) { pagerhtml = $pager.html(); } else { $pager = instance.opts.table.next(); pagerhtml = $pager.html(); } if ($.trim(pagerhtml).length > 0) { $divpager.html(pagerhtml); } $pager.remove(); } $divhead.wrap('
'); instance.opts.table.before($div); if (!instance.opts.height) { //instance.opts.height = $(window).height() - $div.get(0).offsetTop; } //alert($div.get(0).offsetTop); instance.opts.table.remove(); if (instance.opts.height) { $div.height(instance.opts.height); $divbody.height(instance.opts.height - 28); } if (instance.opts.width) { $divhead.width(instance.opts.width); $divbody.width(instance.opts.width); } else { $divhead.css("width", '100%'); $divbody.css("width", '100%'); } $(window.document.body).css("overflow-x", "hidden"); $divbody.bind("scroll", function () { var left = $divbody.get(0).scrollLeft; $divhead.css('left', left - left * 2); }); if ($divbody.children('table').height() > $divbody.height()) { $divhead.width($divhead.width() - 17); $('table', $divbody).css('width', '100%'); } var $tds = $("tbody tr:first td", $divbody); var $ths = $("thead tr th", $divhead); if ($tds.size() == $ths.size()) { for (var i = 0; i < $ths.size() ; i++) { var txt = $ths.eq(i).html(); var sort = $ths.eq(i).attr("sort") || "1"; var title = '
' + txt + '
'; title += '
'; if (instance.opts.sort && "1" == sort) { title += '
'; } if (instance.opts.resizeCol) { title += '
 
'; } title += '
'; $ths.eq(i).html(title); $('.gridheadresize', $ths.eq(i)).bind('mousedown', function (e) { var $divlist = $('.gridlist', instance.opts.container); var $divline = $('
'); var $maskdiv = $('
'); $divline.css('left', (event || e).clientX); $divlist.append($divline); $divlist.append($maskdiv); $divline.bind('mouseup', function (e) { var $ths = $('table thead tr th', $divhead); var idx = parseInt($(this).attr('colindex')); var $headTable = $("table", $divhead); var $bodyTable = $("table", $divbody); var thsWidth = $ths.eq(idx).width() + $ths.eq(idx).get(0).offsetLeft; var addWidth = (event || e).clientX - thsWidth; var tableWidth = $headTable.width() + addWidth; $divhead.width(tableWidth); $('table', $divhead).width(tableWidth); $('table', $divbody).width(tableWidth); $ths.eq(idx).width($ths.eq(idx).width() + addWidth); $('.gridmask', $div).remove(); $(this).remove(); instance.resetWidth(false); }); $maskdiv.bind('mousemove', function (e) { $(this).css('cursor', 'e-resize'); $('.gridheadresizeline', instance.opts.container).css({ "left": (event || e).clientX }); }); }); if (instance.opts.sort && "1" == sort) { $(".gridheadtitle", $ths.eq(i)).bind('click', function () { var $sortdiv = $(".gridheadsort div[class^='gridheadsort']", $(this).parent()); var className = $sortdiv.attr('class'); $sortdiv.removeClass().addClass(className == "gridheadsortdesc" || className == "gridheadsortdesc1" || className == "gridheadsortempty" ? "gridheadsortasc1" : "gridheadsortdesc1"); var $tds2 = $('.gridhead table thead tr th', instance.opts.container) var index = 0; for (var i = 0; i < $tds2.size() ; i++) { if ($tds2.eq(i).get(0) === $(this).parent().get(0)) { index = i; } else { $(".gridheadsort div[class^='gridheadsort']", $tds2.eq(i)).removeClass().addClass("gridheadsortempty"); } } instance.sort($('.gridbody table', instance.opts.container), index); instance.oddColor(); instance.resetWidth(true); }).css("cursor", "pointer"); } } } instance.resetWidth(false); instance.oddColor(); }; this.sort = function ($table, Idx) { var table = $table.get(0); var tbody = $('tbody', $table).get(0); var tr = tbody.rows; var trValue = new Array(); for (var i = 0; i < tr.length; i++) { trValue[i] = tr[i]; } if (tbody.sortCol == Idx) { trValue.reverse(); } else { trValue.sort(function (tr1, tr2) { var param1 = tr1.cells[Idx].innerHTML.removeHtml(); var param2 = tr2.cells[Idx].innerHTML.removeHtml(); if (!isNaN(param1) && isNaN(param2))//如果参数1为数字,参数2为字符串 { return -1; } else if (isNaN(param1) && !isNaN(param2))//如果参数1为字符串,参数2为数字 { return 1; } else if (!isNaN(param1) && !isNaN(param2))//如果两个参数均为数字 { if (parseFloat(param1) > parseFloat(param2)) return 1; if (parseFloat(param1) == parseFloat(param2)) return 0; if (parseFloat(param1) < parseFloat(param2)) return -1; } else if ((param1.isDate() || param1.isDateTime()) && (param2.isDate() || param2.isDateTime()))//如果两个参数均为日期时间 { var date1 = Date.parse(param1.replaceAll('/', '-')); var date2 = Date.parse(param2.replaceAll('/', '-')); if (date1 > date2) return 1; if (date1 == date2) return 0; if (date1 < date2) return -1; } else//如果两个参数均为字符串类型 { return param1.localeCompare(param2); } }); } var fragment = document.createDocumentFragment(); for (var i = 0; i < trValue.length; i++) { fragment.appendChild(trValue[i]); } tbody.appendChild(fragment); tbody.sortCol = Idx; }; this.resetWidth = function (isSort) { var $headtable = $('.gridhead table', instance.opts.container); var $bodytable = $('.gridbody table', instance.opts.container) var $ths = $('thead tr th', $headtable); var $tds = $('tbody tr:first td', $bodytable); for (var i = 0; i < $ths.size() ; i++) { if (!isSort) { //$ths.eq(i).width($ths.eq(i).width()); } $tds.eq(i).width($ths.eq(i).width()); } }; this.oddColor = function () { var $table = $('.gridbody table', instance.opts.container); $("tbody tr:odd td", $table).removeClass().addClass("gridbodytrodd"); $("tbody tr:even td", $table).removeClass().addClass("gridbodytreven"); }; this.init(); }