Question

超级简单的概念！...

在某些时候，我的可编辑网格（和细节网格）必须设置为只读...所以我想做类似的事情：

var grid = $("#grid").data("kendoGrid");
grid.options.editable = false;

当然这不起作用，因为它太简单了......

感谢您的帮助！

Answer 1

我建议你有两个网格：一个只读，一个读写，但只有一个是可见的。两者都共享DataSource定义，因此它们始终保持同步。当您想要从一个更改为另一个时，隐藏可见并显示另一个。

示例：我创建两个网格，完全相同的定义，只是区别在于一个是隐藏的，一个是可见的，一个是可编辑的，一个是不可编辑的。由于两者共享相同的DataSource，它实际上是完美的，因为在另一个中更改页面在另一个中更改，编辑一个，更新另一个。

类似的东西：

1-用于切换可见性的CSS定义：

.ob-hide {
    display : none;
}

2-数据源定义：

var ds = new kendo.data.DataSource({
    transport : {
        read : {
            url: ...
        },
        update : {
            url: ...
        },
        create : {
            url: ...
        },
        destroy : {
            url: ...
        }
    },
    pageSize: 10,
    schema  : {
        model: {
            id : ...,
            fields: {
                id       : { type: '...' },
                ...
            }
        }
    }
});

接下来是两个网格：

$("#grid-editable").kendoGrid({
    editable: "inline",
    dataSource : ds,
    ...
}

$("#grid-not-editable").kendoGrid({
    editable: false,
    dataSource: ds,
    ...
});

$("#grid-editable").addClass("ob-hide");

最后是切换模式的功能：

function gridEditable() {
    $("#grid-editable").removeClass("ob-hide");
    $("#grid-not-editable").addClass("ob-hide");
});

function gridNotEditable() {
    $("#grid-editable").addClass("ob-hide");
    $("#grid-not-editable").removeClass("ob-hide");
});

看到它在这里运行：http://jsfiddle.net/OnaBai/bCEJR/2/

Answer 2

我通过在所需元素上添加disabled="disabled"来改善风格。使用 angular JS 和 kendo ，就像一个魅力一样，通过将网格设置为禁用，不允许用户编辑它。尝试一下，也可以在没有角度的情况下工作！

必须以编程方式将网格设置为editable = false

2 个答案: