网站搜索

javascript - Kendo Grid 的动态默认值


我想在我的 Kendo Grid 中有一个 自动递增 列。这个字段不是服务器端自动递增的,因为我希望用户能看到这个值并能够更改它。

我目前的解决方案是在 Create 按钮上添加一个 click 属性,并循环遍历行以查找最高值然后递增。

但是我如何将这个值插入到新创建的行中呢?点击事件发生在新行创建之前。

所以有两个可能的解决方案:

  1. 在我的 JS 代码中有一个变量作为默认值并更新它。
  2. 以某种方式访问新创建的行,然后更新其值。

这是我的 JS 代码:

function createClick(id) {
    var grid = $("#" + id).data('kendoGrid');
    var highestRadif = 0;
    grid.tbody.find('>tr').each(function () {
        var dataItem = grid.dataItem(this);
        var radif = dataItem.SRadifReqR;
        highestRadif = highestRadif < radif ? radif : highestRadif;
    })
    alert(++highestRadif);
}

答案#1

您可以使用 Grid 的 edit 事件将新的 generatedId 值添加到新的 Grid model。

这是他们文档中的一些说明:

编辑

当用户编辑或创建数据项时触发。

  • e.container jQuery,编辑容器元素的 jQuery 对象,它包含编辑界面。
  • e.model kendo.data.Model,即将被编辑的数据项。使用其 isNew 方法来检查数据项是新创建的(created)还是已编辑的(edited)。
  • e.sender kendo.ui.Grid,触发此事件的小部件实例。

我想你的点击有类似这样的东西

//generate id code
vm.newId = ++highestRadif; // we need to store generated Id
grid.addRow();

然后在编辑事件上

edit: function(e) {
    var model = e.model; // access edited/newly added model
    // model is observable object, use set method to trigger change event
    model.set("id", vm.newId);
}

注意:您的模式模型字段必须设置属性 editable: true,以便我们能够使用 set 方法更改模型字段值。如果您的字段模式有验证要求,也需要将其移除。

model: {
    id: "ProductID",
    fields: {
        ProductID: { editable: true, nullable: true },
    }
}

示例

答案#2

我能够在数据源架构中为此添加一个函数。

schema: {
    model: {
        id: "id",
        fields: {
            currencyType: { defaultValue: getDefaultCurrency },
            invoiceDate: { type: "date" }
        }
    }
}

    function getDefaultCurrency() {
        return _.find(vm.currencyTypes, { id: vm.currencyId });
    };