jQuery行上的不同行为取消选择,我不明白为什么

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery行上的不同行为取消选择,我不明白为什么相关的知识,希望对你有一定的参考价值。

我有两种代码变体,每种变体都有一个理想的行为,一种不受欢迎的行为...但我不明白为什么会发生这种情况,或者如何将它们结合起来以获得所需的行为。 (我尝试了if / else语句的不同变体试图在一个代码中获得所需的两种行为,但到目前为止我还是不成功。

变化1:http://jsfiddle.net/crashvector/q81m7sab/15/

正确行为:您可以选择一行,更改显示的下拉列表(下拉值写入表格),然后您可以取消选择该行。 (check-uncheck列从1更新为0.)

不期望的行为:您可以选择一行,然后立即取消选择它。 check-uncheck列从1更新为0,但下拉列表不会将当前值写入表中并消失。

}).on('deselect', function (e, dt, type) {
    var dt_indexes = dt[0]
    if (type === 'row') { 
      $.each( dt_indexes, function ( index ) {
        var row = dataTable.row( dt_indexes[index] );

        if(!Category && !Category.length) {
        writeCell($(row.node()).find('select'));
        };

        toggleDataAndDraw(row, type, 0); 
     } );     
    }
    dataTable.draw();
  });
var writeCell = dropdown => {
        var currentRow = dataTable.row(dropdown.closest('tr'));
        var rowData = currentRow.data();
        rowData.Category = dropdown.val();
        $(currentRow.node()).find('td:eq(6)').html( 
          currentRow.data().Category
        );
        currentRow.draw();
      };

变化2:http://jsfiddle.net/crashvector/q81m7sab/16/

正确的行为:您可以选择一行,然后立即取消选择它。 check-uncheck列从1更新为0,下拉值写入表并消失。

不期望的行为:您可以选择一行,更改显示的下拉列表(下拉值写入表格),然后您可以取消选择该行。但是,check-uncheck列不会从1更新为0。

}).on('deselect', function (e, dt, type) {
    var dt_indexes = dt[0]
    if (type === 'row') { 
      $.each( dt_indexes, function ( index ) {
        var row = dataTable.row( dt_indexes[index] );

        //if(!Category && !Category.length) {
        writeCell($(row.node()).find('select'));
        //};

        toggleDataAndDraw(row, type, 0); 
     } );     
    }
    dataTable.draw();
  });

var writeCell = dropdown => {
    var currentRow = dataTable.row(dropdown.closest('tr'));
    var rowData = currentRow.data();
    rowData.Category = dropdown.val();
    $(currentRow.node()).find('td:eq(6)').html( 
      currentRow.data().Category
    );
    currentRow.draw();
  };

结束目标一个既具有正确行为又不具有不良行为的功能。

答案

从您的jsFiddle“Variation 1”...只需更改条件(在#222行):

if(!Category && !Category.length) {

至:

if($(row.node()).find('select').length){

因此,当用户取消选中行时,如果writeCell()仍然存在,它将执行<select>

以上是关于jQuery行上的不同行为取消选择,我不明白为什么的主要内容,如果未能解决你的问题,请参考以下文章

jQuery单击gridview行上的选择按钮

Jquery淡入淡出背景/表格行上的动画背景颜色

JTree 通过单击行上的任意位置选择节点

选择并取消链接 3 个表上的文件

这里变量的行为是啥,即闭包。输出未定义,我不明白

为啥 jQuery.val() 的行为与 jQuery 的其余部分不同