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

`Grid 中的复选框有点棘手，因为如果不进入编辑模式就无法更新它们(单击复选框)。

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

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

步骤:

将您的模板定义更改为:

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

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

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

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);
});

其中 grid 定义为:

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

看到它在这里运行:http://jsfiddle.net/OnaBai/QubWN/