前端合并单元格算法 |
您所在的位置：网站首页 › 前端合并单元格怎么弄 › 前端合并单元格算法 |
前端合并单元格算法
|
0.要求 用户点击A单元格作为起始点,点击B单元格最为终止点,要根据A、B两个点算出四个边界值，用来组成出一个矩形。 上图红色为终止点，绿色为起始点。 1.算法 关键点1:合并单元格是通过rowspan,colspan来实现,意味一个单元格代替多个单元格,算法中计算出的单元格位置需要与在视图中看到的一致,所以和在左上角单元格(在边界值组成的矩形中)在同一行的单元格删除，不再同一行的隐藏。 我们用left、top、right、bottom四个属性来表示一个单元格的位置，上图中被蓝矩形标记的单元格位置为，left:1、top:1、right:3、bottom:2,上述做法主要为了确保left的获取。 第一步:分别计算A、B两个单元格的left、top、bottom、right，取得四个方向的最值来初步画出一个矩形。关键代码如下 getLeft($tr,$td){ let $tds = $tr.find("td"); let count = 0; for(let i=0;i=right){ break; } } else{ // 因为rowspan而隐藏的单元格 if(count >= left && count =right){ break; } } count += +$td.attr("colspan") || 1; } return false; } //没被隐藏的单元格如果在范围内有单元格拥有rowspan属性且值大于1，则下边界往下推，在范围内拥有hidden_rwospan的元素，则需要判定是否发生穿透 判定是否发生穿透: isCrossRow_collposed($td_compare,$tr_next,left_pos,right_pos,left,right){ //如果在左右边界内有单元格拥有hidden_rwospan类，且left属性和right属性和left_pos、right_pos相同,则bottom需要往下推 //left_pos 对比单元格左边的位置,right_pos 右边的位置,left 组成矩形的左边界,right 组成矩形右边界 let $tds = $tr_next.find("td"); let count = 0; for(let i=0;i= left && count left_pos){ break; } } } if(count>=right){ break; } count += +$td.attr("colspan") || 1; } return false; }核心代码(Esl class语法)： getArra_collposed($td_start,$td_end){ //画出最初矩形 let left = this.getFarLeft($td_start,$td_end);//得到最靠左单元格的left属性值 let top = this.getFarTop($td_start,$td_end); let right = this.getFarRight($td_start,$td_end); let bottom = this.getFarBottom($td_start,$td_end); let $trs = this.$ele_current.find("tr"), $tr_top = $trs.eq(top), $tr_bottom = $trs.eq(bottom-1); while(true){ let left_temp = left, top_temp = top, right_temp = right, bottom_temp = bottom; for(let i=top;i pos){ left_temp = pos; } } for(let i=top;i |
【本文地址】
今日新闻 |
推荐新闻 |