javascript - 在 kendo ui 网格中上下滚动时取消选中复选框

Question

我有一个剑道 UI 网格，我从 Javascript 进行绑定(bind)，下面是相同的代码。

我的问题是，当我选中该复选框并向下滚动网格并向上滚动时，即使我转到下一页，该选中的复选框也会被取消选中，然后也会遇到相同的问题。

$(gridName).html("");
    var fieldSchema = [];
    var columnSchema = [];

columnSchema.push({
    field: "",
    width: "30px",
    template: "<input id='chkDelete' type='checkbox' />",
});


var counter = 0;
$.each(data, function (index) {
    counter = counter + 1;
    var xmldoc = $.parseXML(data[index].CustomFields);
    var $xml = $(xmldoc);
    var jsonStr = '{';
    $xml.find("Fields").find("Field").each(function () {
        jsonStr = jsonStr + '"' + $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + '":{';
        jsonStr = jsonStr + '"Title":"' + $(this).attr("Title") + '",';
        jsonStr = jsonStr + '"Value":"' + $(this).attr("Value") + '",';
        jsonStr = jsonStr + '"Id":"' + $(this).attr("Id") + '"},';

        if (counter == 1) {
            columnSchema.push({
                field: $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + ".Value",
                title: $(this).attr("Title"),
                width: "128px",
                template: "#=" + $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + ".Value#",
            });

        }
    });
    jsonStr = jsonStr + '"CustomFields":"' + data[index].CustomFields.replace(/\"/g, "\'") + '",';
    jsonStr = jsonStr + '"ValidationPlanId":"' + data[index].ValidationPlanId + '",';
    jsonStr = jsonStr + '"IsTrCreated":"' + data[index].IsTrCreated + '",';
    jsonStr = jsonStr + '"Note":"' + data[index].Note + '",';
    jsonStr = jsonStr + '"IsUpdate":"' + data[index].IsUpdate + '",';
    jsonStr = jsonStr + '"TestRequestId":"' + data[index].TestRequestId + '"';
    jsonStr = jsonStr + '}';

    fieldSchema.push($.parseJSON(jsonStr));
});

var dtVpAdd = new kendo.data.DataSource({
    data: fieldSchema,
    schema: {
        model: {
            id: "ValidationPlanId"
        },
        total: function (result) {
            var totalCount = result.length;
            return totalCount;
        }

    }

});
dtVpAdd.pageSize(10);


$(gridName).kendoGrid({
    dataSource: new kendo.data.DataSource({
        data: fieldSchema,
        schema: {
            model: {
                id: "ValidationPlanId"
            }
        },
        pageSize: 10
    }),
    columns: columnSchema,
    filterable: true,
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    scrollable: {
        virtual: true
    },
    resizable: true,
    reorderable: true,
    pageable: {
        input: true,
        numeric: false
    },

    dataBound: function () {
        $(gridName).on('click', '#chkDeleteAll', function () {
            var checked = $(this).is(':checked');
            $("input[id*='chkDelete']:checkbox").attr('checked', checked);
        });
    },

});

Answer 1

“网格”中的复选框有点棘手，因为您无法在不进入编辑模式的情况下更新它们(单击复选框)。

如果您不考虑这一点，您会看到标记的复选框，但模型实际上并未更新，因此当您加载新数据(页面、滚动、过滤器...)时，更改会丢失。

一种可能的解决方案是定义一个事件处理程序，当单击复选框时更新模型。

步骤:

将模板定义更改为:

template: "<input class='ob-checkbox' type='checkbox' #= Checkbox ? 'checked' : '' #/>",

我在其中指定如何呈现复选框以及当前值(在本例中为 Checkbox 字段的值)。

然后，为这些输入定义一个处理程序。为此，我更喜欢在使用实时事件处理程序初始化 Grid 后执行此操作，而不是在 dataBound 中执行此操作。像这样的东西:

grid.wrapper.on("click", ".ob-checkbox", function(e) {
    // Get the row containing the checkbox
    var row = $(e.currentTarget).closest("tr");
    // Get the item in the model corresponding to that row
    var item = grid.dataItem(row);
    // Get current value of the rendered checkbox (not the value in the model)
    var value = this.checked;
    // And update the model
    item.set("Checked", value);
});

其中网格定义为:

var grid = $(gridName).data("kendoGrid");

在这里查看它的运行情况:http://jsfiddle.net/OnaBai/QubWN/