kendo ui grid 汉化

最新推荐文章于 2025-06-10 09:34:02 发布

zhangyuanwei88

最新推荐文章于 2025-06-10 09:34:02 发布

阅读量5.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： kendo ui 文章标签： kendo ui 汉化 grid汉化 datepicker汉化

本文链接：https://blog.youkuaiyun.com/zhangyuanwei88/article/details/38365967

kendo ui 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用Kendo UI构建一个具备分页、编辑功能且完全汉化的网格组件，包括语言设置、网格配置及日期选择器集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加js引用

<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
    <script src="kendo.culture.zh-CN.min.js"></script>
    <script src="kendo.messages.zh-CN.js"></script>

html标签：

<input id="datepicker" value="10/10/2011" style="width:150px;" />
    <div id="example">
        <div id="grid"></div>
    </div>

js代码如下：

 <script>
        var data = { data: [{ id: 1, name: "test1" }, { id: 2, name: "test2" }], total: 25 }
        $(function () {
            kendo.culture("zh-CN");
            $("#grid").kendoGrid({
                dataSource: {
                    data: data,
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            id: "id",
                            fields: {
                                id: "id",
                                name: "name"
                            }
                        }
                    },
                    pageSize: 20
                },
                editable: {
                    confirmation: true,
                    mode: "popup",
                    window: {
                        title: "新增"
                    }
                },
                scrollable: false,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "id", title: "id", format: "{0:c}", width: "130px" },
                    { field: "name", title: "名称", width: "130px" },
                { command: ["edit", "destroy"], title: " ", width: "200px" }
                ]
            });
            $("#datepicker").kendoDatePicker();
        });
    </script>

效果图如下：