GridView控制客户端的扩展(二)

有时表格内容比较长，我们可以规定某列的列宽，内容显示不下自动隐藏，鼠标经过显示全部内容，同时也可以在制定列之间手工操作列宽

(function ($) {
$.fn.gridview = function (settings) {
var dfop =
{
SelectedRow: false,
onrowclick: false,
ondblclick: false,
onrightkeyclick: false,
onbuttonclick: false,
isdrag: false
}
$.extend(dfop, settings);
var me = $(this);
var headrow;
var objDragline;
var tableheight = $(me)[0].offsetHeight;
var DragChangeSign;
var DragHeader;
var ToolTipDiv;
var totalw;

me.bind("selectstart", function () { return false; });
InitEvent(me.attr("id"));
initToolTipDivElements();
function InitEvent(gridviewid) {
if (me.parent().length > 0) {
if (me.parent()[0].offsetHeight < tableheight) {
tableheight = me.parent()[0].offsetHeight;
}
}
$("#" + gridviewid + ">tbody>tr:gt(0)").each(function () {
if (dfop.onrightkeyclick) {
dfop.onrightkeyclick(this);
}
if (dfop.onbuttonclick) {
$(this).find('.btntext').click(buttonclick);
}
var dragwidth;
$(this).click(rowclick).dblclick(rowdblclick);
if (dfop.isdrag) {
$(this).find('td').each(function () {
if ($(this).hasClass("drag")) {
$(this).width("auto");
dragwidth = $(this).width();
$(this).find('div').each(function () {
if ($(this).hasClass("drag")) {
$(this).width(dragwidth);
}
});
}
});
headrow = $("#" + gridviewid + ">tbody>tr:eq(0)");
initHeadColumns();
window.document.attachEvent("onmouseup", elementOnMouseUp);
}
});

}

function buttonclick() {
dfop.onbuttonclick.call(this, $(this));
return false;
}
function rowclick(e) {
if (dfop.SelectedRow) {
if ($(dfop.SelectedRow).hasClass("gridviewSelectItem")) {
$(dfop.SelectedRow).removeClass('gridviewSelectItem');
if ($(dfop.SelectedRow).index() % 2 == 0) {
$(dfop.SelectedRow).addClass("gridviewItem");
} else {
$(dfop.SelectedRow).addClass("gridviewAlterItem");
}
}
}
dfop.SelectedRow = $(this)[0];
if ($(this).hasClass("gridviewItem")) {
$(this).removeClass('gridviewItem');
} else {
$(this).removeClass('gridviewAlterItem');
}
$(this).addClass("gridviewSelectItem");
if (dfop.onrowclick) {
dfop.onrowclick.call(this, dfop.SelectedRow);
}
}

function rowdblclick(e) {
if (dfop.ondblclick) {
dfop.ondblclick.call(this, dfop.SelectedRow);
}
}

function initHeadColumns() {
headrow.find("th").each(function () {
if ($(this).prev().length > 0 && $(this).prev().hasClass("drag")) {
initAdditionalElements($(this).prev()[0]);
initToolTipDivElementsOld();
$(this).mousedown(elementHeadOnMouseDownByPrev);
$(this).mousemove(HeadOnMouseMoveByPrev);
} else if ($(this).hasClass("drag")) {
initAdditionalElements(this)
initToolTipDivElementsOld();
$(this).mousedown(elementHeadOnMouseDownByCur);
$(this).mousemove(HeadOnMouseMoveByCur);
}
});
}

function initAdditionalElements(curheader) {
if ($(objDragline).length > 0)
return;
var headerwidth = curheader.offsetWidth;
var absoluteleft = getabsoluteleft(curheader);
var absolutetop = getabsolutetop(curheader);
objDragline = document.createElement("DIV"); //虚线
with (objDragline.style) {
position = "absolute";
backgroundColor = "#329632";
width = 1;
height = tableheight;
visibility = "hidden";
top = absolutetop;
zIndex = 10001;
}
window.document.body.insertAdjacentElement("afterBegin", objDragline);
}

function initToolTipDivElementsOld() {
if ($(ToolTipDiv).length == 0) {
if ($(".toltip").length > 0) {
ToolTipDiv = $(".toltip")[0];
} else {
ToolTipDiv = document.createElement("DIV");
$(ToolTipDiv).addClass("toltip");
window.document.body.insertAdjacentElement("afterBegin", ToolTipDiv);
}
}
me.find('.txt_box').each(function () {
$(this).mouseover(tooltipmouseover);
$(this).mousemove(tooltipmousemove);
$(this).mouseout(tooltipmouseout);
});
}

function initToolTipDivElements() {
if ($(ToolTipDiv).length == 0) {
if ($(".toltip").length > 0) {
ToolTipDiv = $(".toltip")[0];
} else {
ToolTipDiv = document.createElement("DIV");
$(ToolTipDiv).addClass("toltip");
window.document.body.insertAdjacentElement("afterBegin", ToolTipDiv);
}
}
me.find('.txt_prompt').each(function () {
$(this).mouseover(tooltipmouseover);
$(this).mousemove(tooltipmousemove);
$(this).mouseout(tooltipmouseout);
});
}

function tooltipmouseover() {
var msg = $(this)[0].innerText;
if (msg == '' || msg == ' ')
return;
$(ToolTipDiv).html(msg);
$(ToolTipDiv).show();
$(ToolTipDiv).css({ "top": event.clientY + 10 + "px", "left": event.clientX + 20 + "px" });
}

function tooltipmousemove() {
$(ToolTipDiv).css({ "top": event.clientY + 10 + "px", "left": event.clientX + 20 + "px" });
}

function tooltipmouseout() {
$(ToolTipDiv).hide();
}

var thHandler;
function elementOnMouseUp() {
if (DragChangeSign) {
changeColWidth();
DragChangeSign = false;
objDragline.style.visibility = "hidden";
// if (thHandler) {
// thHandler.detachEvent("onmousemove", elementOnMouseMove); //取消事件绑定
// }
}
}

function elementOnMouseMove() {
if (DragChangeSign) {
with (objDragline.style) {
left = event.clientX;
}
}
}

function elementHeadOnMouseDownByCur() {
var flag = false;
var el;
el = window.event.srcElement;
while (el.tagName != "TH")
el = el.parentElement;
if ((el.offsetWidth - event.offsetX) > 0 && (el.offsetWidth - event.offsetX) <= 15) {
DragHeader = $(this);
flag = true;
totalw = headrow.find('.free').eq(0).width() + DragHeader.width();
}
if (flag) {
DragChangeSign = true;
with (objDragline.style) {
left = event.clientX;
top = getTop(el);
visibility = "visible";
}
thHandler = el;
el.attachEvent("onmousemove", elementOnMouseMove); //为了能在整个文档中拖动
return false;
}

}

function elementHeadOnMouseDownByPrev() {
var flag = false;
var el;
el = window.event.srcElement;
while (el.tagName != "TH")
el = el.parentElement;
if (event.offsetX <= 4) {
DragHeader = $(this).prev();
flag = true;
totalw = headrow.find('.free').eq(0).width() + DragHeader.width();
}
if (flag) {
DragChangeSign = true;
with (objDragline.style) {
left = event.clientX;
top = getTop(el);
visibility = "visible";
}
thHandler = el;
el.attachEvent("onmousemove", elementOnMouseMove); //为了能在整个文档中拖动
return false;
}

}

function HeadOnMouseMoveByCur() {
var el = window.event.srcElement;
while (el.tagName != "TH") {
el = el.parentElement;
}
if ((el.offsetWidth - event.offsetX) > 0 && (el.offsetWidth - event.offsetX) <= 15) {
el.style.cursor = 'col-resize';
}
else {
el.style.cursor = 'default';
}
}
function HeadOnMouseMoveByPrev() {
var el = window.event.srcElement;
while (el.tagName != "TH") {
el = el.parentElement;
}
if (event.offsetX <= 4 && event.offsetX > 0) {
el.style.cursor = 'col-resize';
}
else {
el.style.cursor = 'default';
}
}

function getTop(e) {
var t = e.offsetTop;
while (e = e.offsetParent) {
t += e.offsetTop - e.scrollTop;
}
return t;
}

function changeColWidth() {
var draghead_left = getabsoluteleft(DragHeader[0]);
if (draghead_left >= event.x) {
with (objDragline.style) {
left = draghead_left + DragHeader[0].offsetWidth;
}
return;
}
var adjustwidth = event.x - draghead_left - DragHeader.index();
// var totalw = headrow.find('.free').eq(0).width() + DragHeader.width();
if (adjustwidth > totalw) {
with (objDragline.style) {
left = getabsoluteleft(DragHeader[0]) + DragHeader[0].offsetWidth;
}
return;
}
DragHeader.width(adjustwidth);
if (DragHeader.find('.txt_box').length > 0) {
me.find('tr').each(function () {
$(this).find('td').each(function () {
if ($(this).index() == DragHeader.index()) {
$(this).find('.txt_box').width(adjustwidth);
}
});
});
DragHeader.find('.txt_box').width(adjustwidth);
}
me.find('.free').width(totalw - adjustwidth);
}

function getabsoluteleft(element) {
return element.getBoundingClientRect().left;
}

function getabsolutetop(element) {
return element.getBoundingClientRect().top;
}

////////////////////////
me[0].t = {
getCurrentRow: function () {
return dfop.SelectedRow;
}
};
return me;
}

$.fn.getCurrentRow = function () {
if (this.length > 0 && this[0].t) {
return this[0].t.getCurrentRow();
}
return null;
}
})(jQuery);