Question

我有一个kendo UI网格，我从下面的Javascript绑定是相同的代码。

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

$(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字段的值）。

然后，为这些input定义处理程序。要这样做，而不是在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/

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

1 个答案: