Question

我有一个带复选框列的slickgrid。我想在选中或取消选中所选行中的复选框时捕获行ID。在我看来附加的是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

您必须在行上绑定click事件....并获取其复选框已选中/未选中的行的ID

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

一次改变Slickgrid的事件

1 个答案: