KendoUI 下拉框验证

最新推荐文章于 2023-01-17 10:49:08 发布

侠仪

最新推荐文章于 2023-01-17 10:49:08 发布

阅读量2.1k

点赞数

文章标签： javascript HTML

KenDoUI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转自：http://jsbin.com/elakul/2/edit

<!DOCTYPE html>

<html>
    <head>
        <title>KendoUI Test Page</title>

        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" />

        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="grid"></div>
        <script>
            $("#grid").kendoGrid({
                dataSource: {
                    data: [
                    {foo: 1, bar: 11},
                    {foo: 2, bar: 12},
                    {foo: 3, bar: 13},
                    {foo: 4, bar: 14},
                    {foo: 5, bar: 15},
                    {foo: 6, bar: 16},
                    {foo: 7, bar: 17}
                    ],
                    schema: {
                        model: {
                            id: "foo",
                            fields: {
                                foo: {type: "string", validation: { required: true } },
                                bar: {type: "number", validation: { required: true, min: 1 } }
                            }
                        }
                    }
                },
                columns: [
                {field: "foo", title: "Foo"},
                {field: "bar", title: "Bar", editor: barEditor},
                {command: ["edit", "destroy"]}
                ],
                editable: "inline",
                toolbar: ["create"]
            })

            function barEditor(container, options) {
                $('<input name="name" data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '" required="required" />')
                .appendTo(container)
                .kendoComboBox({
                    autoBind: false,
                    dataSource: {
                        data: [
                        {name: "Name1", id: 1},
                        {name: "Name2", id: 2}
                        ]
                    }
                });
                $('$<span class="k-invalid-msg" data-for="name"></span>').appendTo(container);
            }
        </script>
    </body>
</html>