代码之家 › 专栏 › 技术社区 › nineveh.Y

KendoUI add treelist工具栏模板导致“TypeError:(中间值)。toLowerCase不是函数”

kendo-treelist kendo-ui jquery javascript

-2

nineveh.Y · 技术社区 · 6 年前

我发现下面的代码会导致“TypeError:(intermediate value)。toLowerCase不是一个函数”,它似乎是由工具栏模板定义引起的,但相同的工具栏定义在kendo grid中工作良好

$(document).ready(function(){
    $("#treelist").kendoTreeList({
        columns: [
            { field: "Name" },
            { field: "Position" }
        ],
        dataSource: {
            data: [
                { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                { id: 2, parentId: 1,    Name: "Alex Sells", Position: "EVP Sales" },
                { id: 3, parentId: 1,    Name: "Bob Price",  Position: "EVP Marketing" }
            ],                
        },
        toolbar: [
            { template: '<a class="k-button" onclick="customSave(this)" href="\\#"><span class="k-icon k-i-tick"></span>custom save</a>' },
            { template: '<a class="k-button" onclick="customCancel(this)" href="\\#"><span class="k-icon k-i-cancel"></span>custom cancel</a>' }
        ]
    });
});

有什么解决办法吗?(必须保留按钮图标)

2 回复 | 直到 6 年前

Métoule 6 年前

使用单击处理程序创建工具栏的正确方法是:

toolbar: [
    {
        name: 'custom',
        text: 'custom save', 
        imageClass: 'k-i-tick', 
        click: customSave
    }, 
    {
        name: 'custom',
        text: 'custom cancel', 
        imageClass: 'k-i-cancel', 
        click: customCancel
    },
]

其工作原理如下:

name 必须是 custom ,因为它不是内置命令。如果省略此属性,则会出现错误。
text :要在按钮上显示的内容
imageClass :the class 要显示的图标的( k-icon 是隐含的)
click :事件处理程序

我创建了一个JSFIDLE来说明: https://jsfiddle.net/ueL8mrcr/

nineveh.Y 6 年前

在搜索文档后,我找到了解决方案,希望它能帮助遇到相同问题的人。

根据 this :

如果为工具栏配置选项指定了字符串值,则将被视为整个树列表的单个字符串模板 ,字符串值将作为参数传递给剑道。template()函数。如果分配了函数值(可能是剑道。template()函数调用或泛型函数引用),然后函数的返回值将用于呈现树列表工具栏内容。如果指定了一个数组值,它将被视为树列表工具栏中显示的命令列表。

所以我改变了这一点:

toolbar: [ createToolBar ]

添加功能:

function createToolbar() {
    return [
        '<a class="k-button" href="#" onclick="customSave(this)"><span class="k-icon k-i-tick"></span>custom save</a>',
        '<a class="k-button" href="#" onclick="customCancel(this)"><span class="k-icon k-i-cancel"></span>custom cancel</a>'
    ];
}

然后它就起作用了。

正如参考文献所说,如果我将返回字符串数组直接放在工具栏配置中,它会将数组呈现为两个剑道按钮,然后图标就会丢失。

在这种情况下,“href=\\\\”应该改为“href=\\\”,否则它将采取重定向操作,我不知道原因。