LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

Jquery-拖拉合并单元格

liguoquan
2023年10月25日 17:16 本文热度 476
:Jquery-拖拉合并单元格

1.在文件底部加上以下代码即可

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script>

    //需要的样式

    document.write('<style>.cannotselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;}td.selected{background:#0094ff;color:#fff}</style>');

    //jQuery表格单元格合并插件,功能和excel单元格合并功能一样,并且可以保留合并后的所有单元格内容到第一个单元格中

    $.fn.tableMergeCells = function () {

        //***请保留原作者相关信息

        //***power by showbo,http://www.w3dev.cn

        return this.each(function () {

            var tb = $(this), startTD, endTD, MMRC = { startRowIndex: -1, endRowIndex: -1, startCellIndex: -1, endCellIndex: -1 };

            //初始化所有单元格的行列下标内容并存储到dom对象中

            tb.find('tr').each(function (r) { 

$('td', this).each(function (c) { 

$(this).data('rc', { r: r, c: c }); 

});

});

            //添加表格禁止选择样式和事件

            tb.addClass('cannotselect').bind('selectstart', function () { return false });

            //选中单元格处理函数

            function addselectedClass() {

                var selected = false,  rc,t;

                tb.find('td').each(function () {

                    rc = $(this).data('rc');

                    //判断单元格左上坐标是否在鼠标按下和移动到的单元格行列区间内

                    selected = rc.r >= MMRC.startRowIndex && rc.r <= MMRC.endRowIndex && rc.c >= MMRC.startCellIndex && rc.c <= MMRC.endCellIndex;

                    if (!selected && rc.maxc) {//合并过的单元格,判断另外3(左下,右上,右下)个角的行列是否在区域内             

                        selected =

                            (rc.maxr >= MMRC.startRowIndex && rc.maxr <= MMRC.endRowIndex && rc.c >= MMRC.startCellIndex && rc.c <= MMRC.endCellIndex) ||//左下

                            (rc.r >= MMRC.startRowIndex && rc.r <= MMRC.endRowIndex && rc.maxc >= MMRC.startCellIndex && rc.maxc <= MMRC.endCellIndex) ||//右上

                            (rc.maxr >= MMRC.startRowIndex && rc.maxr <= MMRC.endRowIndex && rc.maxc >= MMRC.startCellIndex && rc.maxc <= MMRC.endCellIndex);//右下

 

                    }

                    if (selected)  this.className = 'selected';

                });

                var rangeChange = false;

                tb.find('td.selected').each(function () { //从已选中单元格中更新行列的开始结束下标

                    rc = $(this).data('rc');

                    t = MMRC.startRowIndex;

                    MMRC.startRowIndex = Math.min(MMRC.startRowIndex, rc.r);

                    rangeChange = rangeChange || MMRC.startRowIndex != t;

 

                    t = MMRC.endRowIndex;

                    MMRC.endRowIndex = Math.max(MMRC.endRowIndex, rc.maxr || rc.r);

                    rangeChange = rangeChange || MMRC.endRowIndex != t;

 

                    t = MMRC.startCellIndex;

                    MMRC.startCellIndex = Math.min(MMRC.startCellIndex, rc.c);

                    rangeChange = rangeChange || MMRC.startCellIndex != t;

 

                    t = MMRC.endCellIndex;

                    MMRC.endCellIndex = Math.max(MMRC.endCellIndex, rc.maxc || rc.c);

                    rangeChange = rangeChange || MMRC.endCellIndex != t;

                });

                //注意这里如果用代码选中过合并的单元格需要重新执行选中操作

                if (rangeChange) addselectedClass();

            }

            function onMousemove(e) {//鼠标在表格单元格内移动事件

                e = e || window.event;

                var o = e.srcElement || e.target;

                if (o.tagName == 'TD') {

                    endTD = o;

                    var sRC = $(startTD).data('rc'), eRC = $(endTD).data('rc'), rc;

                    MMRC.startRowIndex = Math.min(sRC.r, eRC.r);

                    MMRC.startCellIndex = Math.min(sRC.c, eRC.c);

                    MMRC.endRowIndex = Math.max(sRC.r, eRC.r);

                    MMRC.endCellIndex = Math.max(sRC.c, eRC.c);

                    tb.find('td').removeClass('selected');

                    addselectedClass();

                }

            }

            function onMouseup(e) {//鼠标弹起事件

                tb.unbind({ mouseup: onMouseup, mousemove: onMousemove });

                if (startTD && endTD && startTD != endTD && confirm('确认合并?!')) {//开始结束td不相同确认合并

                    var tds = tb.find('td.selected'), firstTD = tds.eq(0), index = -1, t, addBR

                        , html = tds.filter(':gt(0)').map(function () {

                            t = this.parentNode.rowIndex;

                            addBR = index != -1 && index != t;

                            index = t;

                            return (addBR ? '<br>' : '') + this.innerHTML

                        }).get().join(',');

                    tds.filter(':gt(0)').remove(); firstTD.append(',' + html.replace(/,(<br>)/g, '$1'));

 

                    //更新合并的第一个单元格的缓存rc数据为所跨列和行

                    var rc = firstTD.attr({ colspan: MMRC.endCellIndex - MMRC.startCellIndex + 1, rowspan: MMRC.endRowIndex - MMRC.startRowIndex + 1 }).data('rc');

                    rc.maxc = rc.c + MMRC.endCellIndex - MMRC.startCellIndex; rc.maxr = rc.r + MMRC.endRowIndex - MMRC.startRowIndex;

console.info(rc.maxc);

console.info(rc.maxr);

                    firstTD.data('rc', rc);

 

                }

                tb.find('td').removeClass('selected');

                startTD = endTD = null;

            }

            function onMousedown(e) {

                var o = e.target;

                if (o.tagName == 'TD') {

                    startTD = o;

                    tb.bind({ mouseup: onMouseup, mousemove: onMousemove });

                }

            }

            tb.mousedown(onMousedown);

        });

    };

 

    $('table').tableMergeCells();

</script>


该文章在 2023/10/25 17:16:46 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved