Question

编辑：最初发布了错误的代码

我正在使用DataTables来让用户选择行。其中一个字段会填充一个下拉菜单，供他们选择不同的值。

问题在于，如果用户取消选择没有更改行，则div div 不会消失。

我需要一种将默认下拉列表值写入取消选择的表中的方法。

提琴：http://jsfiddle.net/crashvector/q81m7sab/15/

//Write dropdown value into table
  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( //change to td:eq(4) in final version
      currentRow.data().Category
    );
    currentRow.draw();
  };


  //triggers on select/deselect to move selected rows to top of table and
  //add dropdown menu for Category column

  dataTable.on('select', function (e, dt, type) {
      console.log('select', dt[0].length)
      var dt_indexes = dt[0]  //Need to access dt[0] to get row indexes
      if (type === 'row') {
      // Loop through each selectes row
      $.each( dt_indexes, function ( index ) {

      var row = dataTable.row( dt_indexes[index] );
      // Guard clause to check the row length, return if falsey
      if (!row.length) {
        return;
      }
      $(row.node()).find('td:eq(6)').html(  //change to td:eq(4) in final version
        '<select >' + Category.reduce((options, item) =>
          options += `<option value="${item}" ${
            item == row.data().Category ? 'selected' : ''}>${
            item}</option>`, '') + '</select>'
      ).on('change', function () {
        var optionSelected = $('option:selected', this);
        // changed this.value to optionSelected()
        var valueSelected = $(optionSelected).val();
        var row = $(this).closest('tr');
        var cell = dataTable.cell(row, 6);
        cell.data(valueSelected);
      });
        console.log('toggle')
      toggleDataAndDraw(row, type, 1);
    });
      }
    dataTable.draw();


  //Deselect doesn't hide the Category dropdown. Needs to write current value to table.
  }).on('deselect', function (e, dt, type) {
     console.log('deselect', dt[0].length)
    var dt_indexes = dt[0]  //Need to access dt[0] to get row indexes
    if (type === 'row') {
      //for (i=0; i < dt_indexes.length; i++) {
      //var row = dataTable.row(dt_indexes[i]); 
      $.each( dt_indexes, function ( index ) {
        var row = dataTable.row( dt_indexes[index] );
  //
  //
  //

        //use the guard statement again to fix error when deselecting cells 
        //that have the category value set?

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



        //if Category isn't defined, set Category to current row/column 6 value and writeCell
        //else if Category is defined, writeCell


 //
 //
 //




        toggleDataAndDraw(row, type, 0); 



     } );     
    }
    dataTable.draw();
  });

  //This function is called to write the check-uncheck value and redraw the table
  var toggleDataAndDraw = (row, type, dataVal) => {
    if (type === 'row') {
      console.log('toggle');
      dataTable.cell({
        row: row.index(),
        column: 0,
        visible: false
      }).data(dataVal);
      //dataTable.draw();
    }
  };

Answer 1

对于您的问题，您可以将--extras '{ "virtualGuests": [{"hostname": "server1", "domain": "test.dom"}],"sshKeys":[{"sshKeyIds": [123456]}]}'事件更改为以下内容：

.deselect

你很高兴。在这里看看。 http://jsfiddle.net/8bkypv6r/43/

取消选择行时将下拉值写入表行

1 个答案: