在剑道ui网格中上下滚动时取消复选框

Check box uncheck while scroll up and down in kendo ui grid

本文关键字：滚动 取消 复选框 上下 ui 网格      更新时间：2023-09-26

我有一个剑道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);
        });
    },
});

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/

相关文章：