前端可以编辑的html表格

1 篇文章 0 订阅

 直接上代码:

/**
 *
 * @param container
 * @param config
 * config
 * {
 *    cols:[{name: '列名', code: '属性名字', isother: false, weight: xxx, number: true/false}], 必须
 *    rows:[{prop: valule, others:[{name: xxx, value: xxx}]},{prop: value, others:[{name: xxx, value: xxx}]}]//每一项的属性值对应表头的code, 或者others的name值对应表头的code  必须
 *    beforeDeleteRow: fun //删除行前执行, 如果返回值为false, 则不执行删除操作
 *    afterDeleteRow: fun //删除行后执行
 *    beforeMerge: fun  //合并单元格前执行
 *    afterMerge: fun  //合并单元格后执行
 *    onResume: fun //撤销合并的时候执行
 * }
 */

function excelTab(container, config){
    this.$container = $("#"+ container);
    this.initConfig(config);
    this.initTab();
}
excelTab.prototype = {
    initConfig: function(config){
        this.config = {
            style: {
                head: {
                    checkbox: false //设置页面编辑表格的时候才设置此属性为true
                }
            },
            readonly: false, //表格需要编辑的时候设置为true
            merge: {
                crossCol: true //合并单元格的时候可以跨行合并的时候为 true
            }
        };
        $.extend(this.config, config);
    },
    repaint: function(config){
        if(config){
            this.initConfig(config);
        }
        this.$container.children().remove();
        this.initTab();
    },
    initTab: function(){
        this.$tab = $("<table><thead/><tbody/></table>");
        var that = this;
        this.appendth();
        $.each(this.config.rows, function(){
            that.appendRow(this);
        });
        this.$container.addClass("excelTab").append(this.$tab);
        this.$tab.children().eq(1).attr("onselectstart", "return false");
        this.$tab.find(".chk").each(function(){
            var thH = $(this).parent().height();
            $(this).next().css("margin-top", (thH - $(this).height()) / 2);
            $(this).css("margin-top", (thH - 22) / 2).css("margin-right", "2px").css("margin-left", "2px");
        });
        if(!this.config.readonly){
            this.createEditors();
        }
    },
    appendth: function(){
        var that = this;
        var $thead = this.$tab.children().eq(0);
        var $tr = $("<tr/>");
        var editCol = that.config.style.head.checkbox;
        $.each(this.config.cols, function(dex, th){
            var $th = $("<th/>");
            $tr.append($th);
            if(editCol){
                var $div = $("<div/>");
                var $chk = $("<span class='chk'/>").css("float", "left");
                $chk.addClass(th.checked? "commonSelected" : "commonSelect");
                $chk.click(function(){
                    var cdex = $(this).closest("th").index();
                    var c = that.config.cols[cdex];
                    if($(this).hasClass("commonSelect")){
                        $(this).addClass("commonSelected").removeClass("commonSelect");
                    }else{
                        $(this).addClass("commonSelect").removeClass("commonSelected");
                    }
                    c.checked = $(this).hasClass("commonSelected");
                });
                var $txt= $("<span/>");
                $txt.text(th.name).addClass("col_name").attr("contenteditable", true).on("keyup", function(){
                    var cdex = $(this).closest("th").index();
                    var c = that.config.cols[cdex];
                    var text = $(this).text();
                    if(c.name !== text){
                        c.name = text;
                    }
                });
                $div.append($chk).append($txt);
                $th.append($div);
            }else{
                $th.text(th.name);
            }
        });
        if(!editCol){
            this.$tab.children().eq(0).attr("onselectstart", "return false");
        }
        $thead.append($tr);
    },
    appendRow: function(row){
        var that = this;
        var $tbody = this.$tab.children().eq(1);
        var $tr = $("<tr/>");
        $.each(this.config.cols, function(dex, th){
            var $td = $("<td/>");
            if(!th.isother){
                $td.text(row[th.code]);
            }else {
                var fieldVal = that.getOtherVal(row, th.code);
                if(fieldVal){
                    $td.text(fieldVal);
                }
            }
            $td.attr("col", dex);
            $tr.append($td);
            if(!that.config.readonly){
                that.bindTDEvent($td);
            }
        });
        $tbody.append($tr);
    },
    createEditors: function(){
        this.mouse ={down: false};
        this.multiEdit = false;
        this.$cell_editor_corner = $("<div/>");
        this.$popMenu = $("<ul><li/><li>插入行</li><li>删除行</li><li>清除内容</li></ul>");
        this.$cell_editor_corner.addClass("zcell_corner");
        this.$cell_editor = $("<div/>");
        this.$cell_editor.addClass("text_editor").attr("id", "text_editor").attr("contenteditable", true);
        this.$popMenu.addClass("contextmenu");
        this.$container.append(this.$cell_editor_corner).append(this.$cell_editor).append(this.$popMenu);
        this.bindCommonEvent();
        this.bindMenuAction();
    },
    bindTDEvent: function($td){
        if(this.config.readonly) return;
        var that = this;
        $td.mousedown(function(event){
            if(event.which === 1){
                var $edit_cell = $(".edit_focus");
                if($edit_cell.length > 0){
                    that.setCellValue($edit_cell, that.$cell_editor.html());
                    $edit_cell.removeClass("edit_focus");
                }
                that.$cell_editor.html("").hide();
                that.setfocus($td);
                that.editing = $td;
                that.multiEdit = false;
                that.mouse.down = true;
            }else if(event.which === 3){
                if(!that.multiEdit || !$td.hasClass("cell-selected-bgcolor")){
                    that.setfocus($td);
                    that.editing = $td;
                    that.showMenu(event, false)
                }else{
                    that.showMenu(event, true);
                }
            }
        }).mouseup(function(){
            that.mouse.down = false;
        }).mouseover(function(){
            if(that.mouse.down){
                if(!that.config.merge.crossCol && that.editing.attr("col") !== $td.attr("col")){
                    console.log("不能合并不在同一列的单元格");
                    that.clearfoucs();
                    that.mouse.down = false;
                    return;
                }
                that.addfoucs($(this));
            }
        }).dblclick(function(){
            that.setEditFocus($td);
        });
    },
    bindMenuAction: function(){
        var that = this;
        this.$popMenu.children().each(function(dex, li){
            var $li = $(li);
            $li.click(function(){
                switch (dex){
                    case 0:
                        break;
                    case 1:
                        that.insertRow(that.editing);
                        break;
                    case 2:
                        that.deleteRow(that.editing);
                        break;
                    case 3:
                        that.clearBlockValue();
                        break;
                }
            });
        });
    },
    setEditFocus: function($td){
        this.$cell_editor.css("top", $td.position().top).css("left", $td.position().left).width($td.width() + 6).css("min-height",$td.height() + 6);
        this.$cell_editor.html($td.html()).show().focus();
        setCusor(this.$cell_editor.get(0));
        $td.addClass("edit_focus");
    },
    addfoucs: function($cell){
        var that = this;
        this.clearfoucs();
        var $tbody = this.$tab.children().eq(1);
        var $thead = this.$tab.children().eq(0);
        var tr_routes = {};
        var th_routes = {};
        var tr_start = this.editing.parent().index();
        var th_start = parseInt(this.editing.attr("col"));
        var tr_end = $cell.parent().index();
        var th_end = parseInt($cell.attr("col"));
        var tr_start_span = {rowspan: parseInt(this.editing.attr("rowspan")), colspan: parseInt(this.editing.attr("colspan"))};
        var tr_end_span = {rowspan: parseInt($cell.attr("rowspan")), colspan: parseInt($cell.attr("colspan"))};
        if(isNaN(tr_start_span.rowspan)){
            tr_start_span.rowspan = 1;
        }
        if(isNaN(tr_start_span.colspan)){
            tr_start_span.colspan = 1;
        }
        if(isNaN(tr_end_span.rowspan)){
            tr_end_span.rowspan = 1;
        }
        if(isNaN(tr_end_span.colspan)){
            tr_end_span.colspan = 1;
        }
        tr_routes.start = tr_start <= tr_end? tr_start : tr_end;
        tr_routes.end = tr_start + tr_start_span.rowspan <= tr_end + tr_end_span.rowspan? tr_end + tr_end_span.rowspan - 1 : tr_start + tr_start_span.rowspan - 1;
        th_routes.start = th_start <= th_end? th_start : th_end;
        th_routes.end = th_start + tr_start_span.colspan <= th_end + tr_end_span.colspan? th_end + tr_end_span.colspan - 1 : th_start + tr_start_span.colspan - 1;
        if(tr_routes.start === tr_routes.end && th_routes.start === th_routes.end) return;//在一个单元格上移动。
        this.extendArea(tr_routes, th_routes);
        for(var i = tr_routes.start; i <= tr_routes.end; i++){
            var $row = $tbody.children().eq(i);
            for(var c = th_routes.start; c <= th_routes.end; c++){
                var $cell = $row.find("td[col='"+ c +"']");
                if($cell.length === 0) continue;
                var c_rowspan = parseInt($cell.attr("rowspan"));
                var c_colspan = parseInt($cell.attr("colspan"));
                c_rowspan = isNaN(c_rowspan)? 0 : c_rowspan - 1;
                c_colspan = isNaN(c_colspan)? 0 : c_colspan - 1;
                if(i === tr_routes.start && c === th_routes.start){
                    this.multi_start = $cell;
                }
                if(i + c_rowspan === tr_routes.end && c + c_colspan === th_routes.end){
                    this.multi_end = $cell;
                }
                $cell.addClass("cell-selected-bgcolor");
                if(i === tr_routes.start){
                    $cell.addClass("cell-selected-top");
                }
                if(c === th_routes.start){
                    $cell.addClass("cell-selected-left");
                }
                if(c + c_colspan === th_routes.end){
                    $cell.addClass("cell-selected-right");
                }
                if(i + c_rowspan === tr_routes.end){
                    $cell.addClass("cell-selected-bottom");
                }
                if(i + c_rowspan === tr_routes.end && c + c_colspan === th_routes.end){//最后一个单元格需要加点号
                    var pos = $cell.position();
                    this.$cell_editor_corner.css("top", pos.top + $cell.height() + 6).css("left", pos.left + $cell.width() + 6);
                }
            }
        }
        if(tr_routes.start !== tr_routes.end || th_routes.start !== th_routes.end){
            this.multiEdit = true;
        }
    },
    extendArea: function(tr_routes, th_routes){
        var that = this;
        var $tbody = this.$tab.children().eq(1);
        var flag = false;
        $tbody.find("td[merged=true]").each(function(dex, cell){
            var $cell = $(cell);
            var rowspan = that.getspan($cell, "rowspan");
            var colspan = that.getspan($cell, "colspan");
            var rowdex = $cell.parent().index();
            var coldex = parseInt($cell.attr("col"));
            var cellArea = {tr_start: rowdex, tr_end: rowdex + rowspan - 1, th_start: coldex, th_end: coldex + colspan - 1};
            if(((tr_routes.start >= cellArea.tr_start && tr_routes.start <= cellArea.tr_end) || (tr_routes.start <= cellArea.tr_start && tr_routes.end >= cellArea.tr_start)) &&
                ((th_routes.start >= cellArea.th_start && th_routes.start <= cellArea.th_end) || (th_routes.start <= cellArea.th_start && th_routes.end >= cellArea.th_start))){
                if(tr_routes.start > cellArea.tr_start){
                    tr_routes.start = cellArea.tr_start;
                    flag = true;
                }
                if(tr_routes.end < cellArea.tr_end){
                    tr_routes.end = cellArea.tr_end;
                    flag = true;
                }
                if(th_routes.start > cellArea.th_start){
                    th_routes.start = cellArea.th_start;
                    flag = true;
                }
                if(th_routes.end < cellArea.th_end){
                    th_routes.end = cellArea.th_end;
                    flag = true;
                }
            }
        });
        if(flag){
            this.extendArea(tr_routes, th_routes);
        }
        return flag;
    },
    getspan: function($cell, type){
        var span = parseInt($cell.attr(type));
        return isNaN(span)? 0 : span;
    },
    clearfoucs: function(){
        if(this.config.readonly) return;
        $(".cell-selected-border, .cell-selected-bgcolor, .cell-selected-top, .cell-selected-bottom, .cell-selected-left, .cell-selected-right").removeClass()
        this.$cell_editor_corner.css("top", -200).css("left", -200);
    },
    setfocus: function ($cell){
        this.clearfoucs();
        $cell.addClass("cell-selected-border cell-selected-bgcolor cell-selected-top cell-selected-bottom cell-selected-left cell-selected-right");
        var pos = $cell.position();
        this.$cell_editor_corner.css("top", pos.top + $cell.height() + 6).css("left", pos.left + $cell.width() + 6);
        this.editing = $cell;
    },
    mergeCell: function($start, $end, fromCode){
        if(!fromCode && this.config.beforeMerge && !this.config.beforeMerge($start, $end)) return;
        var that = this;
        var $tbody = this.$tab.children().eq(1);
        var row_start = $start.parent().index();
        var row_end = $end.parent().index();
        var col_start = parseInt($start.attr("col"));
        var col_end = parseInt($end.attr("col"));
        var end_rowspan = this.getspan($end, "rowspan");
        if(end_rowspan > 1){
            row_end+= end_rowspan - 1;
        }
        if(row_end - row_start > 0){
            $start.attr("rowspan", row_end - row_start + 1).attr("merged", true);
        }else{
            $start.removeAttr("rowspan");
        }
        if(col_end - col_start > 0){
            $start.attr("colspan", col_end - col_start + 1).attr("merged", true);
        }else{
            $start.removeAttr("colspan");
        }
        //移除合并范围内的其他cell
        for(var r = row_start; r <= row_end; r++){
            var $tr = $tbody.children().eq(r);
            for(var c = col_start; c <= col_end; c++){
                if(r === row_start && c === col_start) continue;
                var $cell = $tr.find("td[col='"+ c +"']");
                if($cell.length > 0){
                    that.setCellValue($cell, $start.html());
                    $cell.remove();
                }else{
                    break;
                }
            }
        }
        this.clearfoucs();
        if(this.config.afterMerge){
            this.config.afterMerge($start, $end);
        }
    },
    resumeCell: function($cell, fromCode){
        if(!fromCode && this.config.onResume){
            this.config.onResume($cell);
        }
        var $tbody = this.$tab.children().eq(1);
        var row_dex = $cell.parent().index();
        var col_dex = $cell.index();
        var rowspan = parseInt($cell.attr("rowspan"));
        var colspan = parseInt($cell.attr("colspan"));
        rowspan = isNaN(rowspan)? 0 : rowspan;
        colspan = isNaN(colspan)? 0 : colspan;
        for(var i = 0; i < rowspan; i++){
            var $tr = $tbody.children().eq(row_dex + i);
            if(i !== 0){
                var $td =  $("<td/>");
                $td.attr("col", col_dex);
               $td.insertBefore($tr.children().eq(col_dex));
                this.bindTDEvent($td);
            }
            for(var j = 1; j < colspan; j++){
                var $td =  $("<td/>");
                $td.attr("col", col_dex + j);
                $td .insertBefore($tr.children().eq(col_dex + j));
                this.bindTDEvent($td);
                this.setCellValue($td, null);
            }
        }
        $cell.removeAttr("rowspan").removeAttr("colspan").removeAttr("merged");
        this.clearfoucs();
    },
    insertRow: function($cell, sum){
        var that = this;
        var $tbody = this.$tab.children().eq(1);
        var $curRow = $cell.parent();
        var rowspan = this.getspan($cell, "rowspan");
        rowspan = rowspan == 0? 1 : rowspan;
        if(rowspan > 1){
            $curRow = $curRow.prev();
            if($curRow.length === 0){
                var $tr = $("<tr/>");
                var d = {others: [], changed: true};
                for(var t = 0; t < this.config.cols.length; t++){
                    var col = this.config.cols[t];
                    var $td = $("<td/>");
                    $tr.append($td);
                    that.bindTDEvent($td);
                    if(col.isother){
                        d.others.push({name : col.code, value: null});
                    }else{
                        d[col.code] = null;
                    }
                }
                this.config.rows.unshift(d);
                $tbody.prepend($tr);
                return;
            }
        }
        $tbody.find("td[merged='true']").each(function(){
            if($(this).position().top <= $curRow.position().top && $(this).position().top + $(this).height() > $curRow.position().top){
                var merge_rowspan = that.getspan($(this), "rowspan");
                merge_rowspan = merge_rowspan === 0? 1 : merge_rowspan;
                $(this).attr("rowspan", merge_rowspan + rowspan);
            }
        });
        for(var i = 0; i < rowspan; i++){
            var $row = $("<tr/>");
            var d = {others:[], changed: true};
            $curRow.children().each(function(dex, col){
                if(that.getspan($(col), "rowspan") > 1) return;
                var $td = $("<td/>");
                var cdex = parseInt($(col).attr("col"));
                if(that.config.cols[cdex].isother){
                    d.others.push({name : that.config.cols[cdex].code, value: null});
                }else{
                    d[that.config.cols[cdex].code] = null;
                }
                $td.attr("col", cdex);
                that.bindTDEvent($td);
                $row.append($td);
            });
            $row.insertAfter($curRow);
            if(sum){
                d.sum = true;
            }
            if(i + 1 === rowspan){
                this.config.rows.push(d);
            }else{
                this.config.rows.splice(i + 1, 0, d);
            }
        }
    },
    deleteRow: function($cell){
        if(!isEmpty(this.config.beforeDeleteRow) && !this.config.beforeDeleteRow()) return;
        var that = this;
        var $tbody = this.$tab.children().eq(1);
        var $curRow = $cell.parent();
        var curdex = $curRow.index();
        var rowspan = this.getspan($cell, "rowspan");
        rowspan = rowspan == 0? 1 : rowspan;
        $tbody.find("td[merged='true']").each(function(){
            if($(this).position().top <= $curRow.position().top && $(this).position().top + $(this).height() > $curRow.position().top){
                var merge_rowspan = that.getspan($(this), "rowspan");
                merge_rowspan = merge_rowspan === 0? 1 : merge_rowspan;
                if(merge_rowspan - rowspan > 0){
                    $(this).attr("rowspan", merge_rowspan - rowspan).addClass("edit_rowspan");
                }
            }
        });
        for(var i = curdex; i < curdex + rowspan; i++){
            var $del = $tbody.children().eq(curdex);
            var $next = $del.next();
            if($next.length > 0){
                $del.children().each(function(){
                    var $cell = $(this);
                    var crow_span = that.getspan($cell, "rowspan");
                    if($cell.hasClass("edit_rowspan")){
                        var flag = false;
                        $next.children().each(function(){
                            if(flag) return;
                            if(parseInt($(this).attr("col")) > parseInt($cell.attr("col"))){
                                $cell.insertBefore($(this));
                                that.setCellValue($cell, $cell.html());
                                flag = true;
                            }else if($(this).position().left + $(this).width() + 10 === $cell.position().left){
                                $cell.insertAfter($(this));
                                that.setCellValue($cell, $cell.html());
                                flag = true;
                            }
                        });
                    }
                });
            }
            this.config.rows.splice(curdex, 1);
            $del.remove();
        }
        $(".edit_rowspan").removeClass("edit_rowspan");
        that.clearfoucs();
        if(!isEmpty(this.config.afterDeleteRow)){
            this.config.afterDeleteRow();
        }
    },
    clearBlockValue: function(){
        var that = this;
        $(".cell-selected-bgcolor").each(function(){
            that.setCellValue($(this), null);
        });
    },
    bindCommonEvent: function(){
        var that = this;
        this.keys = {alt: false, enter: false};
        $(document).on("keyup", function(event){
            if(event.keyCode === 18){
                that.keys.alt = false;
            }
            if(isEmpty(that.editing)) return;
            var $row = that.editing.parent();
            var $next = null;
            if(event.keyCode === 13){
                event.preventDefault();
                var $edit_cell = $(".edit_focus");
                if($edit_cell.length > 0){
                    if(that.keys.alt){
                        that.$cell_editor.html(that.$cell_editor.html() + "<br/><br/>");
                        setCusor(that.$cell_editor.get(0));
                    }else{
                        $row = $row.next();
                        while($row.length > 0 && $next === null){
                            $row.children().each(function(dex, cell){
                                if($next) return;
                                var $cell = $(cell);
                                //小单元格到大单元格, 或者大单元格到小单元格
                                if(that.editing.position().left >= $cell.position().left && $cell.position().left + $cell.width() > that.editing.position().left){
                                    $next = $cell;
                                }
                            });
                            if($next === null){
                                $row = $row.next();
                            }
                        }
                        that.setCellValue($edit_cell, that.$cell_editor.html());
                        //$edit_cell.html(that.$cell_editor.html());
                        that.$cell_editor.html("").hide();
                        if($next != null && $next.length > 0){
                            that.setfocus($next);
                        }
                        $(".edit_focus").removeClass("edit_focus");
                    }
                }
                that.keys.enter = false;
            }
            if(event.which > 36 && event.which < 41 && $(".edit_focus").length === 0){
                if(!that.editing) return;
                switch (event.which){
                    case 37://向左
                        while($row.length > 0 && $next === null){
                            $row.children().each(function(dex, cell){
                                if($next) return;
                                var $cell = $(cell);
                                if($cell.position().left + $cell.width() + 10 === that.editing.position().left){
                                    $next = $cell;
                                }
                            });
                            if($next === null){
                                $row = $row.prev();
                            }
                        }
                        break;
                    case 38://向上
                        $row = $row.prev();
                        while($row.length > 0 && $next === null){
                            $row.children().each(function(dex, cell){
                                if($next) return;
                                var $cell = $(cell);
                                //小单元格到大单元格, 或者大单元格到小单元格
                                if(that.editing.position().left >= $cell.position().left && $cell.position().left + $cell.width() >= that.editing.position().left){
                                    $next = $cell;
                                }
                            });
                            if($next === null){
                                $row = $row.prev();
                            }
                        }
                        break;
                    case 39://向右
                        while($row.length > 0 && $next === null){
                            $row.children().each(function(dex, cell){
                                if($next) return;
                                var $cell = $(cell);
                                if(that.editing.position().left + that.editing.width() + 12 === $cell.position().left){
                                    $next = $cell;
                                }
                            });
                            if($next === null){
                                $row = $row.prev();
                            }
                        }
                        break;
                    case 40://向下
                        $row = $row.next();
                        while($row.length > 0 && $next === null){
                            $row.children().each(function(dex, cell){
                                if($next) return;
                                var $cell = $(cell);
                                //小单元格到大单元格, 或者大单元格到小单元格
                                if(that.editing.position().left >= $cell.position().left && $cell.position().left + $cell.width() > that.editing.position().left){
                                    $next = $cell;
                                }
                            });
                            if($next === null){
                                $row = $row.next();
                            }
                        }
                        break;
                }
                if($next != null && $next.length > 0){
                    that.setfocus($next);
                }
            }
        }).contextmenu(function(event){
            return false;
        }).click(function(){
            that.$popMenu.hide();
        }).on("keydown", function(event){
            var code = event.keyCode;
            if((code >= 33 && code <= 36) || (code >= 112 && code <= 123) || code === 20 || code === 9 || code === 93 || (code >= 37 && code <= 40)
            || code === 27 || code === 145 || code === 19 || code === 45 || code === 46 || code === 103 || code === 91 || code === 17)
                return;
            switch (event.keyCode){
                case 13: //按下回车键
                    that.keys.enter = true;
                    event.preventDefault();
                    break;
                case 18: //按下alt 建
                    that.keys.alt = true;
                    break;
                    //20 9 27 112 - 123  145 19 45 36 33 46 35 34 103 91 17 93
                default:
                    if($(".edit_focus").length === 0 && !isEmpty(that.editing)){
                        that.setEditFocus(that.editing);
                    }
                    break;
            }
        });
    },
    showMenu: function(event, merge){
        var that = this;
        var $li = this.$popMenu.children().eq(0);
        if(!merge){
            var colspan = that.getspan(that.editing, "colspan");
            var rowspan = that.getspan(that.editing, "rowspan");
            if(rowspan > 1 || colspan > 1){
                $li.show();
            }else{
                $li.hide();
                that.multiEdit = false;
            }
            this.$popMenu.children().eq(1).show();
            this.$popMenu.children().eq(2).show();
        }else{
            $li.show();
            this.$popMenu.children().eq(1).hide();
            this.$popMenu.children().eq(2).hide();
        }
        $li.text(merge? "合并" : "撤销合并").unbind().click(function(){
            if(merge){
                that.mergeCell(that.multi_start, that.multi_end);
            }else{

                that.resumeCell(that.editing);
            }
        });
        this.$popMenu.css("left", event.pageX).css("top", event.pageY - $(window).scrollTop()).show();
    },
    setCellValue: function($cell, value){
        var d = this.config.rows[$cell.parent().index()];
        var cd = this.config.cols[parseInt($cell.attr("col"))];
        if(cd.isother){
            if(this.setOtherVal(d, cd.code, value)){
                d.changed = true;
            }
        }else{
            if(d[cd.code] !== value){
                d[cd.code] = value;
                d.changed = true;
            }
        }
        $cell.html(isEmpty(value)? "" : value);
    },
    getCell: function(row, col){
        var $tbody = this.$tab.children().eq(1);
        var $tr = $tbody.children().eq(row);
        var top = $tr.position().top;
        var left = this.$tab.children().eq(0).find("th").eq(col).position().left;
        var $cell = null;
        while($cell == null && $tr.length > 0){
            var flag = false;
            $tr.children().each(function(dex, cell){
                if(flag) return;
                var $c = $(cell);
                var pos = $c.position();
                if(pos.top <= top && pos.top + $c.height() > top && pos.left <= left && pos.left + $c.width() > left){
                    $cell = $c;
                }
            });
        }
        return $cell;
    },
    getOtherVal: function(o, field){
        var val = null;
        if(!isEmpty(o.others)){
            for(var i = 0; i < o.others.length; i++){
                if(o.others[i].name === field){
                    val = o.others[i].value;
                    break;
                }
            }
        }
        return val;
    },
    setOtherVal: function(o, field, value){
        if(!isEmpty(o.others)){
            for(var i = 0; i < o.others.length; i++){
                if(o.others[i].name === field){
                    if(o.others[i].value !== value){
                        o.others[i].value = value;
                        return true;
                    }
                }
            }
        }
        return false;
    }
};
function isEmpty(value){
	return (value == undefined || (typeof value == "string" && value == "") || value == null);
}
function setCusor(ele){
    if (window.getSelection) {
        ele.focus();
        var range = window.getSelection();
        range.selectAllChildren(ele);
        range.collapseToEnd();
    }
    else if (document.selection) {
        var range = document.selection.createRange();
        range.moveToElementText(ele);
        range.collapse(false);
        range.select();
    }
}

 

例子:

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./excelTab.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="./excelTab.js"></script>
    <script type="text/javascript">
        $(function(){
            var row = {others:[{name: "name1", value: "其他属性的值是这个"}],name:"abcde2",name1:"临时的改变",name2:"abc33de",name3:"ab33cde",name4:"a33bcde",name5:"a33bcde",name6:"a33bcde",name7:"a33bcde"};
            var rows = [];
            for(var i = 0; i <= 10; i++){
                var r = {};
                $.extend(r, row);
                rows.push(r);
            }
            var config = {
                rows: rows,
                cols: [{name: "其他属性列", code:"name1", isother: true },{name: "列通话柔荑花柔荑花人额热风让他名", code:"name2", isother: false },{name: "列名个热歌热歌", code:"name3", isother: false },{name: "列GRE名", code:"name4", isother: false },{name: "列名个人更个", code:"name5", isother: false },{name: "列分安慰法呢名", code:"name6", isother: false },{name: "列efew名", code:"name7", isother: false },{name: "列名wed", code:"name8", isother: false },{name: "列名de", code:"name9", isother: false }]
            };
            var tab = new excelTab("tab", config);
            //tab.mergeCell(tab.getCell(4, 1), tab.getCell(7, 2));
        });
    </script>
</head>
<body style="background-color: #fff !important; margin: 50px">
  <div id="tab" style="width: 1200px;position: relative;"></div>
</body>
</html>

效果图:

 

 

源代码下载地址:https://download.csdn.net/download/u010239515/12028995

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值