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