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