OncellChange Событие Slickgrid

Question

У меня есть slickgrid с столбцом флажка. Я хочу захватить идентификатор строки, когда флажок в выбранной строке отмечен или снят. Прилагаемый скрипт для slickgrid в моем представлении Я хочу, когда пользователь проверяет флажок, активный столбец в базе данных должен быть установлен в true, а когда он не установлен, значение Active column должно быть равно false.

<script type="text/javascript"> 

     //$('input[type="button"]').enabled(false); 
     var grid; 
     var columnFilters = {}; 
     var jsonmodel = @Html.Raw(Json.Encode(Model)); 
     //function LoadNewMessagesData(messages) { 
     var dataView; 
     var data = []; 
     ////console.log('lena:' + subdata.length); 
     $.each(jsonmodel, function (idx, spotlight) { 
      var pd = moment(spotlight.PostedDate); 

      data.push({ id: spotlight.ID, Department: spotlight.SubSection,Title: spotlight.Title, PostedDate: pd.format('YYYY-MM-DD'), Active: spotlight.Active }) 
     }); 

     var columns = [ 
      { id: '0', name: "Department", field: "Department", sortable: true}, 
      { id: '1', name: "Title", field: "Title", sortable: true}, 
      { id: '2', name: "PostedDate", field: "PostedDate", sortable: true } 
     ]; 
     var checkboxSelector = new Slick.CheckboxSelectColumn({ 
      cssClass: "slick-cell-checkboxsel" 
     }) 

     columns.push(checkboxSelector.getColumnDefinition()); 
     var options = { 
      enableCellNavigation: true, 
      explicitInitialization: true, 
      enableColumnReorder: false, 
      multiColumnSort: true, 
      autoHeight: true, 
      forceFitColumns: true 
     }; 


     dataView = new Slick.Data.DataView(); 
     grid = new Slick.Grid("#myGrid", dataView, columns, options); 
     grid.setSelectionModel(new Slick.RowSelectionModel()); 
     var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); 
     grid.registerPlugin(checkboxSelector); 

     dataView.onRowCountChanged.subscribe(function (e, args) { 
      grid.updateRowCount(); 
      grid.render(); 
     }); 

     dataView.onRowsChanged.subscribe(function (e, args) { 
      grid.invalidateRows(args.rows); 
      console.log('testing'); 
      grid.render(); 
     }); 

     dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { 
      var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1; 
      var enableAddRow = isLastPage || pagingInfo.pageSize == 0; 
      var options = grid.getOptions(); 

      if (options.enableAddRow != enableAddRow) { 
       grid.setOptions({ enableAddRow: enableAddRow }); 
      } 
     }); 


     var rowIndex; 

     grid.onCellChange.subscribe(function (e, args) { 
      console.log('onCellChange'); 
      rowIndex = args.row; 
     }); 

     if (grid.getActiveCell()) { 

     } 
     //onSelectedRowsChanged event, if row number was changed call some function. 

     grid.onSelectedRowsChanged.subscribe(function (e, args) { 
      if (grid.getSelectedRows([0])[0] !== rowIndex) { 
       console.log('onSelectedRowsChanged'); 
      } 
     }); 

     grid.onSort.subscribe(function (e, args) { 
      var cols = args.sortCols; 
      var comparer = function (dataRow1, dataRow2) { 
       for (var i = 0, l = cols.length; i < l; i++) { 
        var field = cols[i].sortCol.field; 
        var sign = cols[i].sortAsc ? 1 : -1; 
        var value1 = dataRow1[field], value2 = dataRow2[field]; 
        var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign; 
        if (result != 0) { 
         return result; 
        } 
       } 
       return 0; 
      } 
    dataView.sort(comparer, args.sortAsc); 
     }); 
     grid.init(); 

     dataView.beginUpdate(); 
     dataView.setItems(data); 
     // dataView.setFilter(filter); 
     dataView.endUpdate(); 
     //} 

     function RefreshMessagesGrid() { 
      //console.log('RefreshMessagesGrid'); 
      //grid.invalidate(); 
      grid.invalidateRows(); 

      // Call render to render them again 
      grid.render(); 
      grid.resizeCanvas(); 
     } 
    </script>`enter code here` 

Thanks in Advance !!! 

Answer 1

Вы должны связать нажмите на событие строк .... и получить идентификатор строки, чей флажок/непроверенной

function bindClickOnRow() { 
    if($(this).find('.checkboxClass').attr('checked') == 'checked'){ 
        checked = true; 
    } else { 
     checked = false; 
    } 
      rowId = $(this).attr('id'); 
}