树结构节点，浮动弹窗提示

app/public/js/shares/tender_select.js

@@ -125,7 +125,7 @@ const TenderSelect = function (setting) {
             SpreadJsObj.initSheet(this.tenderSheet, {
                 cols: [
                     {title: '选择', field: 'selected', hAlign: 1, width: 40, formatter: '@', cellType: 'checkbox'},
-                    {title: '名称', field: 'name', hAlign: 0, width: 180, formatter: '@', cellType: 'tree'},
+                    {title: '名称', field: 'name', hAlign: 0, width: 180, formatter: '@', cellType: 'tree', showTips: true},
                     {title: '期数', field: 'phase', hAlign: 1, width: 60, formatter: '@'},
                     {title: '审批状态', field: 'status', hAlign: 1, width: 60, formatter: '@'}
                 ],

app/public/js/spreadjs_rela/spreadjs_zh.js

@@ -1472,6 +1472,217 @@ const SpreadJsObj = {
 
     CellType: {
         /**
+         * 获取 带悬浮提示的CellType
+         * @returns {TipCellType}
+         */
+        getTipCellType: function (scrollHeightClass = false) {
+            const maxHintWidth = 200, indent = 15, borderIndent = 10;
+            const TipCellType = function () {};
+            // 继承 SpreadJs定义的 普通的TextCellType
+            TipCellType.prototype = new spreadNS.CellTypes.Text();
+            const proto = TipCellType.prototype;
+            proto.getTextDisplayWidth = function(hitinfo, str, font) {
+                const xs = hitinfo.sheet.getParent().xs;
+                const ctx = xs.childNodes[0].getContext("2d");
+                if (font && font !== '') {
+                    ctx.font = font;
+                } else {
+                    ctx.font = hitinfo.cellStyle.font;
+                }
+                return ctx.measureText(str).width;
+            };
+            proto.showTip = function (hitinfo, text) {
+                return text && text !== '';
+            };
+            /**
+             * 获取点击信息
+             * @param {Number} x
+             * @param {Number} y
+             * @param {Object} cellStyle
+             * @param {Object} cellRect
+             * @param {Object} context
+             * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
+             */
+            proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
+                return {
+                    x: x,
+                    y: y,
+                    row: context.row,
+                    col: context.col,
+                    cellStyle: cellStyle,
+                    cellRect: cellRect,
+                    sheet: context.sheet,
+                    sheetArea: context.sheetArea,
+                    ctx: context.sheet.getParent().xs,
+                };
+            };
+            /**
+             * 鼠标进入单元格事件 - 显示悬浮提示
+             * @param {Object} hitinfo - 见getHitInfo返回值
+             */
+            proto.processMouseEnter = function (hitinfo) {
+                let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
+                const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
+                if (col.getTip && Object.prototype.toString.apply(col.getTip) === "[object Function]") {
+                    const sortData = SpreadJsObj.getSortData(hitinfo.sheet);
+                    text = col.getTip(sortData[hitinfo.row]);
+                }
+                const pos = SpreadJsObj.getObjPos(hitinfo.sheet.getParent().qo);
+                if (pos && this.showTip(hitinfo, text)) {
+                    if (!this._toolTipElement) {
+                        let div = $('#autoTip')[0];
+                        if (!div) {
+                            div = document.createElement("div");
+                            $(div).css("position", "absolute")
+                                .css("border", "1px #C0C0C0 solid")
+                                .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
+                                .css("font", "9pt Arial")
+                                .css("background", "white")
+                                .css("padding", 5)
+                                .css("z-index", 9999)
+                                .css("max-width", maxHintWidth)
+                                .css("word-wrap", "break-word")
+                                .attr("id", 'autoTip');
+                            document.body.insertBefore(div, null);
+                        }
+                        const validWidth = $(window).width() - (pos.x + hitinfo.x + indent) - borderIndent;
+                        const textWidth = this.getTextDisplayWidth(hitinfo, text, "9pt Arial");
+                        const scrollTop = scrollHeightClass ? $(scrollHeightClass).scrollTop() : 0;
+                        if (validWidth >= maxHintWidth || textWidth <= validWidth) {
+                            $(div).html(text).css("top", pos.y + hitinfo.y - scrollTop + indent).css("left", pos.x + hitinfo.x + indent);
+                        } else if (textWidth > maxHintWidth) {
+                            $(div).html(text).css("top", pos.y + hitinfo.y - scrollTop + indent).css("left", pos.x + hitinfo.x - indent - maxHintWidth);
+                        } else {
+                            $(div).html(text).css("top", pos.y + hitinfo.y - scrollTop + indent).css("left", pos.x + hitinfo.x - indent - textWidth);
+                        }
+                        this._toolTipElement = div;
+                        $(div).show("fast");
+                    }
+                }
+            };
+            /**
+             * 鼠标移出单元格事件 - 隐藏悬浮提示
+             * @param {Object} hitinfo - 见getHitInfo返回值
+             */
+            proto.processMouseLeave = function (hitinfo) {
+                if (this._toolTipElement) {
+                    $(this._toolTipElement).hide();
+                    this._toolTipElement = null;
+                }
+            };
+
+            return new TipCellType();
+        },
+        getAutoTipCellType: function (scrollHeightClass) {
+            const AutoTipCellType = function () {};
+            // 继承 TipCellType
+            AutoTipCellType.prototype = SpreadJsObj.CellType.getTipCellType(scrollHeightClass);
+            const proto = AutoTipCellType.prototype;
+            proto.showTip = function (hitinfo, text) {
+                return text && text !== '' && this.getTextDisplayWidth(hitinfo, text) > hitinfo.cellRect.width;
+            };
+
+            return new AutoTipCellType();
+        },
+        getDelayTipCellType: function () {
+            const maxHintWidth = 200, indent = 15, borderIndent = 10;
+            const TipCellType = function () {};
+            // 继承 SpreadJs定义的 普通的TextCellType
+            TipCellType.prototype = new spreadNS.CellTypes.Text();
+            const proto = TipCellType.prototype;
+            proto.getTextDisplayWidth = function(hitinfo, str, font) {
+                const xs = hitinfo.sheet.getParent().xs;
+                const ctx = xs.childNodes[0].getContext("2d");
+                if (font && font !== '') {
+                    ctx.font = font;
+                } else {
+                    ctx.font = hitinfo.cellStyle.font;
+                }
+                return ctx.measureText(str).width;
+            };
+            proto.showTip = function (hitinfo, text) {
+                return text && text !== '';
+            };
+            /**
+             * 获取点击信息
+             * @param {Number} x
+             * @param {Number} y
+             * @param {Object} cellStyle
+             * @param {Object} cellRect
+             * @param {Object} context
+             * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
+             */
+            proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
+                return {
+                    x: x,
+                    y: y,
+                    row: context.row,
+                    col: context.col,
+                    cellStyle: cellStyle,
+                    cellRect: cellRect,
+                    sheet: context.sheet,
+                    sheetArea: context.sheetArea,
+                    ctx: context.sheet.getParent().xs,
+                };
+            };
+            /**
+             * 鼠标进入单元格事件 - 显示悬浮提示
+             * @param {Object} hitinfo - 见getHitInfo返回值
+             */
+            proto.processMouseEnter = function (hitinfo) {
+                let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
+                const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
+                if (col.getTip && Object.prototype.toString.apply(col.getTip) === "[object Function]") {
+                    const sortData = SpreadJsObj.getSortData(hitinfo.sheet);
+                    text = col.getTip(sortData[hitinfo.row]);
+                }
+                const pos = SpreadJsObj.getObjPos(hitinfo.sheet.getParent().qo);
+                if (pos && this.showTip(hitinfo, text)) {
+                    if (!this._toolTipElement) {
+                        let div = $('#autoTip')[0];
+                        if (!div) {
+                            div = document.createElement("div");
+                            $(div).css("position", "absolute")
+                                .css("border", "1px #C0C0C0 solid")
+                                .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
+                                .css("font", "9pt Arial")
+                                .css("background", "white")
+                                .css("padding", 5)
+                                .css("z-index", 999)
+                                .css("max-width", maxHintWidth)
+                                .css("word-wrap", "break-word")
+                                .attr("id", 'autoTip');
+                            document.body.insertBefore(div, null);
+                        }
+                        const validWidth = $(window).width() - (pos.x + hitinfo.x + indent) - borderIndent;
+                        const textWidth = this.getTextDisplayWidth(hitinfo, text, "9pt Arial");
+                        if (validWidth >= maxHintWidth || textWidth <= validWidth) {
+                            $(div).html(text).css("top", pos.y + hitinfo.y + indent).css("left", pos.x + hitinfo.x + indent);
+                        } else if (textWidth > maxHintWidth) {
+                            $(div).html(text).css("top", pos.y + hitinfo.y + indent).css("left", pos.x + hitinfo.x - indent - maxHintWidth);
+                        } else {
+                            $(div).html(text).css("top", pos.y + hitinfo.y + indent).css("left", pos.x + hitinfo.x - indent - textWidth);
+                        }
+                        this._toolTipElement = div;
+                        const self = this;
+                        setTimeout(()=>{ if (self._toolTipElement) $(self._toolTipElement).show("fast");}, 300);
+                    }
+                }
+            };
+            /**
+             * 鼠标移出单元格事件 - 隐藏悬浮提示
+             * @param {Object} hitinfo - 见getHitInfo返回值
+             */
+            proto.processMouseLeave = function (hitinfo) {
+                if (this._toolTipElement) {
+                    $(this._toolTipElement).hide();
+                    this._toolTipElement = null;
+                }
+            };
+
+            return new TipCellType();
+        },
+        /**
          * 获取树结构CellType
          * 通过SpreadJsObj.loadSheetData(sheet, 'tree', tree)加载树结构数据
          * 要求tree类型为PathTree, 节点必须含有{id, pid, level, order, is_leaf}数据
@@ -1486,6 +1697,7 @@ const SpreadJsObj = {
             const lineColor = '#515151';//'#b8b8b8';
             const expandBoxColor = '#434343';//'#808080';
             const dotLine = true;
+            const hintMaxHintWidth = 200, hintIndent = 15, hintBorderIndent = 10;
 
             /**
              * 画一条点线段
@@ -1817,7 +2029,8 @@ const SpreadJsObj = {
                     cellStyle: cellStyle,
                     cellRect: cellRect,
                     sheet: context.sheet,
-                    sheetArea: context.sheetArea
+                    sheetArea: context.sheetArea,
+                    ctx: context.sheet.getParent().xs,
                 };
             };
             /**
@@ -1867,18 +2080,6 @@ const SpreadJsObj = {
                 }
             };
 
-            return new TreeNodeCellType();
-        },
-        /**
-         * 获取 带悬浮提示的CellType
-         * @returns {TipCellType}
-         */
-        getTipCellType: function (scrollHeightClass = false) {
-            const maxHintWidth = 200, indent = 15, borderIndent = 10;
-            const TipCellType = function () {};
-            // 继承 SpreadJs定义的 普通的TextCellType
-            TipCellType.prototype = new spreadNS.CellTypes.Text();
-            const proto = TipCellType.prototype;
             proto.getTextDisplayWidth = function(hitinfo, str, font) {
                 const xs = hitinfo.sheet.getParent().xs;
                 const ctx = xs.childNodes[0].getContext("2d");
@@ -1890,138 +2091,18 @@ const SpreadJsObj = {
                 return ctx.measureText(str).width;
             };
             proto.showTip = function (hitinfo, text) {
-                return text && text !== '';
-            };
-            /**
-             * 获取点击信息
-             * @param {Number} x
-             * @param {Number} y
-             * @param {Object} cellStyle
-             * @param {Object} cellRect
-             * @param {Object} context
-             * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
-             */
-            proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
-                return {
-                    x: x,
-                    y: y,
-                    row: context.row,
-                    col: context.col,
-                    cellStyle: cellStyle,
-                    cellRect: cellRect,
-                    sheet: context.sheet,
-                    sheetArea: context.sheetArea,
-                    ctx: context.sheet.getParent().xs,
-                };
-            };
-            /**
-             * 鼠标进入单元格事件 - 显示悬浮提示
-             * @param {Object} hitinfo - 见getHitInfo返回值
-             */
-            proto.processMouseEnter = function (hitinfo) {
-                let text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
+                if (!text) return false;
+
                 const col = hitinfo.sheet.zh_setting.cols[hitinfo.col];
-                if (col.getTip && Object.prototype.toString.apply(col.getTip) === "[object Function]") {
-                    const sortData = SpreadJsObj.getSortData(hitinfo.sheet);
-                    text = col.getTip(sortData[hitinfo.row]);
-                }
-                const pos = SpreadJsObj.getObjPos(hitinfo.sheet.getParent().qo);
-                if (pos && this.showTip(hitinfo, text)) {
-                    if (!this._toolTipElement) {
-                        let div = $('#autoTip')[0];
-                        if (!div) {
-                            div = document.createElement("div");
-                            $(div).css("position", "absolute")
-                                .css("border", "1px #C0C0C0 solid")
-                                .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
-                                .css("font", "9pt Arial")
-                                .css("background", "white")
-                                .css("padding", 5)
-                                .css("z-index", 9999)
-                                .css("max-width", maxHintWidth)
-                                .css("word-wrap", "break-word")
-                                .attr("id", 'autoTip');
-                            document.body.insertBefore(div, null);
-                        }
-                        const validWidth = $(window).width() - (pos.x + hitinfo.x + indent) - borderIndent;
-                        const textWidth = this.getTextDisplayWidth(hitinfo, text, "9pt Arial");
-                        const scrollTop = scrollHeightClass ? $(scrollHeightClass).scrollTop() : 0;
-                        if (validWidth >= maxHintWidth || textWidth <= validWidth) {
-                            $(div).html(text).css("top", pos.y + hitinfo.y - scrollTop + indent).css("left", pos.x + hitinfo.x + indent);
-                        } else if (textWidth > maxHintWidth) {
-                            $(div).html(text).css("top", pos.y + hitinfo.y - scrollTop + indent).css("left", pos.x + hitinfo.x - indent - maxHintWidth);
-                        } else {
-                            $(div).html(text).css("top", pos.y + hitinfo.y - scrollTop + indent).css("left", pos.x + hitinfo.x - indent - textWidth);
-                        }
-                        this._toolTipElement = div;
-                        $(div).show("fast");
-                    }
-                }
-            };
-            /**
-             * 鼠标移出单元格事件 - 隐藏悬浮提示
-             * @param {Object} hitinfo - 见getHitInfo返回值
-             */
-            proto.processMouseLeave = function (hitinfo) {
-                if (this._toolTipElement) {
-                    $(this._toolTipElement).hide();
-                    this._toolTipElement = null;
-                }
-            };
+                if (!col.showTips) return false;
 
-            return new TipCellType();
-        },
-        getAutoTipCellType: function (scrollHeightClass) {
-            const AutoTipCellType = function () {};
-            // 继承 TipCellType
-            AutoTipCellType.prototype = SpreadJsObj.CellType.getTipCellType(scrollHeightClass);
-            const proto = AutoTipCellType.prototype;
-            proto.showTip = function (hitinfo, text) {
-                return text && text !== '' && this.getTextDisplayWidth(hitinfo, text) > hitinfo.cellRect.width;
-            };
+                const tree = hitinfo.sheet.zh_tree;
+                const node = hitinfo.row < tree.nodes.length ? tree.nodes[hitinfo.row] : null;
+                if (!node) return false;
 
-            return new AutoTipCellType();
-        },
-        getDelayTipCellType: function () {
-            const maxHintWidth = 200, indent = 15, borderIndent = 10;
-            const TipCellType = function () {};
-            // 继承 SpreadJs定义的 普通的TextCellType
-            TipCellType.prototype = new spreadNS.CellTypes.Text();
-            const proto = TipCellType.prototype;
-            proto.getTextDisplayWidth = function(hitinfo, str, font) {
-                const xs = hitinfo.sheet.getParent().xs;
-                const ctx = xs.childNodes[0].getContext("2d");
-                if (font && font !== '') {
-                    ctx.font = font;
-                } else {
-                    ctx.font = hitinfo.cellStyle.font;
-                }
-                return ctx.measureText(str).width;
-            };
-            proto.showTip = function (hitinfo, text) {
-                return text && text !== '';
-            };
-            /**
-             * 获取点击信息
-             * @param {Number} x
-             * @param {Number} y
-             * @param {Object} cellStyle
-             * @param {Object} cellRect
-             * @param {Object} context
-             * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
-             */
-            proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
-                return {
-                    x: x,
-                    y: y,
-                    row: context.row,
-                    col: context.col,
-                    cellStyle: cellStyle,
-                    cellRect: cellRect,
-                    sheet: context.sheet,
-                    sheetArea: context.sheetArea,
-                    ctx: context.sheet.getParent().xs,
-                };
+                const move = (node[tree.setting.level]) * indent + (node[tree.setting.level]) * levelIndent + xOffset;
+                const validWidth = hitinfo.cellRect.width - move;
+                return this.getTextDisplayWidth(hitinfo, text) > validWidth;
             };
             /**
              * 鼠标进入单元格事件 - 显示悬浮提示
@@ -2046,20 +2127,20 @@ const SpreadJsObj = {
                                 .css("font", "9pt Arial")
                                 .css("background", "white")
                                 .css("padding", 5)
-                                .css("z-index", 999)
-                                .css("max-width", maxHintWidth)
+                                .css("z-index", 1999)
+                                .css("max-width", hintMaxHintWidth)
                                 .css("word-wrap", "break-word")
                                 .attr("id", 'autoTip');
                             document.body.insertBefore(div, null);
                         }
-                        const validWidth = $(window).width() - (pos.x + hitinfo.x + indent) - borderIndent;
+                        const validWidth = $(window).width() - (pos.x + hitinfo.x + hintIndent) - hintBorderIndent;
                         const textWidth = this.getTextDisplayWidth(hitinfo, text, "9pt Arial");
-                        if (validWidth >= maxHintWidth || textWidth <= validWidth) {
-                            $(div).html(text).css("top", pos.y + hitinfo.y + indent).css("left", pos.x + hitinfo.x + indent);
-                        } else if (textWidth > maxHintWidth) {
-                            $(div).html(text).css("top", pos.y + hitinfo.y + indent).css("left", pos.x + hitinfo.x - indent - maxHintWidth);
+                        if (validWidth >= hintMaxHintWidth || textWidth <= validWidth) {
+                            $(div).html(text).css("top", pos.y + hitinfo.y + hintIndent).css("left", pos.x + hitinfo.x + hintIndent);
+                        } else if (textWidth > hintMaxHintWidth) {
+                            $(div).html(text).css("top", pos.y + hitinfo.y + hintIndent).css("left", pos.x + hitinfo.x - hintIndent - hintMaxHintWidth);
                         } else {
-                            $(div).html(text).css("top", pos.y + hitinfo.y + indent).css("left", pos.x + hitinfo.x - indent - textWidth);
+                            $(div).html(text).css("top", pos.y + hitinfo.y + hintIndent).css("left", pos.x + hitinfo.x - hintIndent - textWidth);
                         }
                         this._toolTipElement = div;
                         const self = this;
@@ -2078,7 +2159,7 @@ const SpreadJsObj = {
                 }
             };
 
-            return new TipCellType();
+            return new TreeNodeCellType();
         },
         /**
          * 获取 带图片的cellType(图片需在document中定义好img，并写入col的img属性)