Ajax从行中删除单元格,重新计算行,将单元格移动到下一行
Ajax delete cell from row, recalculate rows moving cell onto next row
使用带有动态单元格宽度的twitter引导行/表结构,我有一个ajax脚本,从数据库中删除记录并删除HTML。
但是我该如何在删除后重新计算行呢?这是我无法理解逻辑过程的部分。
E。g:如果我从中间行删除一个单元格,它将计算删除后是否有足够的可用空间,并将该单元格移动到下一行。然后循环到下一行/etc
理想情况下,如果它能与动态宽度一起工作,那么所有的跨度加起来就是12,那将是非常酷的。只有当确实有空间时,它才会把一个项目移到下一行。
如果我删除了一个大/宽跨度,并且有空间为下一行替换2个小跨度。等等,我想你已经明白了。
<div class="row">
<div class="span4">...<a href="">Delete</a></div>
<div class="span4">...<a href="">Delete</a></div>
<div class="span4">...<a href="">Delete</a></div>
</div>
<div class="row">
<div class="span6">...<a href="">Delete</a></div>
<div class="span2">...<a href="">Delete</a></div>
<div class="span4">...<a href="">Delete</a></div>
</div>
<div class="row">
<div class="span2">...<a href="">Delete</a></div>
<div class="span8">...<a href="">Delete</a></div>
<div class="span2">...<a href="">Delete</a></div>
</div>
$('a').click(function(e){
e.preventDefault();
var $self = $(this);
$.ajax({
type: 'POST',
url: ajaxAction,
data: obj,
dataType: 'json',
success: function(data, status, jqXHR){
if(data && data.ok){
$self.parent().slideUp("slow", function(){
if(delete_container.substring(0,5) == ".span"){
// get parent row
var row = $(this).parent();
if(row.hasClass("row") || row.hasClass("row-fluid")){
var count = 0;
row.children("[class*='span']").each(function(){
count = $(this).attr('class').match(/'d+/);
});
if(count < 12){
// check next line and move item up if it fits
// then loop over everything again on the next row
}
}
}
$(this).remove();
})
}
}
});
});
最简单的方法:更改表的结构,删除<div class="row">
,然后将float: left
添加到单元格中。浏览器会照顾一切。:)
但如果不能接受,让我们把函数命名为rearrangeTable( fromRow )
:
rearrangeTable( fromRow ) { //from row is a number of row, where you have deleted cell.
var $actualRow = $('div.row:eq('+fromRow+')');
var $nextRow = $actualRow.next(div.row);
//getting free space in actual row
var freeSpace = $actualRow.width(); //IMPORTANT: width() not outerWidth()
$actualRow.find('cell_selector :)').each( function(i) {
freeSpace -= $(this).outerWidth();
})
var $nextCell;
while( $nextCell = getFirstCell( $nextRow ) ) { //ill not show this function its trivial, just returns first cell or false if there are no more cells
var cellWidth = $nextCell.outerWidth();
if( freeSpace >= cellWidth ) {
letsMoveThisCell( $nextCell, $actualRow);
freeSpace -= cellWidth;
} else {
break; //no more space, we can end there
}
}
它只是元代码,没有经过测试,展示了如何存档它的想法。现在,您应该从已删除单元格的行到表的末尾调用rearrangeTable( fromRow )
,它应该可以工作。
相关文章:
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- JQuery insertAfter();移动下一个表格单元格
- 如何根据单元格中的值将一行从一个谷歌电子表格移动到另一个
- 如果鼠标悬停得很快,Jquery鼠标移动会错过一些单元格
- 如何在 Google 表格中移动单个单元格
- 在Angular JS中使用移动视图时,表单元格中不会出现文本对齐
- jquery移动动态列表视图单元格高度
- jQuery方法解析产品价格/成本文本从一个表格单元格,并移动到一个新的相邻单元格
- 当单元格移动时改变端口颜色
- 获取行单元格值从jquery移动tabhold
- 在Handsontable中移动列后编辑单元格时,数据不正确
- 使用cellindex()来定位可能移动的单元格
- Ajax从行中删除单元格,重新计算行,将单元格移动到下一行
- 拖放表-将单元格移动到不同的列
- 在 jquery 中在具有行跨度的表中向上/向下移动单元格
- 在回车键上移动到表中的下一个单元格
- 将一组单元格的内容移动到另一组单元格
- Bootstrap 3网格系统-“单元格”在高度上是可扩展的,但它会将下一行全部向下移动