Question

下面： https://jsfiddle.net/qky4zx2o/

我想要实现的是每个New Task按钮必须具有与其所在列对应的索引属性。

列1, 4.1, 4.2, 5是本案例要考虑的列。 columnHeaders中的所有列标题都不是固定的，这使得它更加棘手。

对于New Task中的row rl按钮＃1，如何为其分配column 1的ID？

对于New Task中的row rl按钮＃2，如何为其分配column 4.1的ID？等等等等。在columnHeaders中，level 1中有孩子的列被忽略，他们的孩子就是被考虑的。

我基本上构建了两个单独的表，只是将它们彼此对齐，因此.has_width <th>与rowspan > 0和level 2对齐。

Answer 1

据我了解，自然方法首先是创建一个数组（更可能是字典）来查找映射的data-column-index。通过使用该数组，您可以只查找td元素的相应索引并访问那里的计算信息。

第一阶段是初始化这样的数组，如下所示：

var indexInfo = [];
$("#columnHeaders > tbody > tr").first().find("th:gt(0)").each(function(i,e){
    //obtain colspan of the current th elementv
    var csa = $(this).attr("colspan");
    //obtain the rowspan of the current th element
    var rsa = $(this).attr("rowspan");
    var cs = csa == undefined ? 1 : parseInt(csa);
    var rs = rsa == undefined ? 1 : parseInt(rsa);
    //obtain the data-column-index of the current th element
    var cia = $(this).data("column-index");
    var ci = cia == undefined ? -1 : parseInt(cia);
    var startIndex = indexInfo.length;  
    var endIndex = startIndex + cs;
    //initializing the indexInfo array
    for(var k = startIndex; k < endIndex; k++){
      indexInfo[k] = { rowSpan : rs, colIndex : ci};
    }
});

下一阶段是更新阵列，使其仅包含所需信息。我们需要遍历所有剩余的标题行来更新这个数组，如下所示：

$("#columnHeaders > tbody > tr:gt(0)").each(function(i,e){
    var rowIndex = i + 1;//we skip the first row - which is used to initialize the array indexInfo
    var startColumnIndex = -1;
    $(this).find("th").each(function(j){
            startColumnIndex++;
            //if the current row is still in 'rowspan' range of the previous
            //row, we need to increase the column index
            while(indexInfo[startColumnIndex].rowSpan > rowIndex)
               startColumnIndex++;
            var rsa = $(this).attr("rowspan");
            var rs = rsa == undefined ? 1 : parseInt(rsa);
            var cia = $(this).data("column-index");
            var ci = cia == undefined ? -1 : parseInt(cia);
            //update the info
            indexInfo[startColumnIndex].rowSpan = rowIndex + rs;
            indexInfo[startColumnIndex].colIndex = ci;
    });
});

在准备好的数组中获得正确的信息。您只需要遍历第二个表中每个button中的所有td来相应地设置data-column-index，如下所示：

$("#kanban_rows > tbody > tr").each(function(i){
  $(this).find("td > button").each(function(j){
         $(this).attr("data-column-index", indexInfo[j].colIndex);
      });
});

这是更新的演示（根据您自己的演示进行调整）：

Demo

您可以检查页面以查看是否正确添加了data-column-index（根据您的要求）。

以特定顺序遍历表头？

1 个答案: