kendo ui grid 汉化

加入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>

效果图例如以下:

总结:

1.kendo.culture("zh-CN"); 是设置当前kendo 使用的语言

2.kendo grid中的title 汉化的地方是

editable: {

confirmation: true,

mode: "popup",

window: {

title: "新增"

}

}

3.通过上面的步骤一个汉化好的grid就完毕了。分页,编辑,button都汉化好了。

转载请标注出自:http://blog.csdn.net/zhangyuanwei88  谢谢

时间: 2024-08-26 14:27:37

kendo ui grid 汉化的相关文章

Kendo UI Grid 模型绑定

开篇 接触 Asp.net MVC 时间较长的童鞋可能都会了解过模型绑定(Model Binding),而且在一些做 Web 项目的公司或是Team面试中也经常会被问到.项目中有很多 Action 中都使用了自定义的模型绑定,但是业务逻辑太过复杂不适合做为例子与大家分享,而今天在做一个 Kendo UI 的功能时觉得可以用 Kendo UI 做为例子与大家分享与探讨一个典型的 Model Binding 的过程. 写的比较随性,欢迎大家讨论及拍砖! 背景介绍 Kendo UI: 它是一个非常出名

Kendo UI:Grid中单元格日期格式化

摘自: http://blog.csdn.net/sun_jy2011/article/details/41546337 Kendo UI:Grid中怎么格式化时间类型数据? 解决方案 (1)使用format格式化 { field: "updateTime", title: "更新时间", width: 200, format: "{0: yyyy-MM-dd HH:mm:ss}" } (2)使用template实现 { field: "

kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create)

今天测试之前使用kendo ui grid 做的数据表格的时候发现了一个bug,我使用的是kendo ui grid 系统自带的自动添加数据和编辑数据的功能,每次添加完一条数据的时候继续添加的时候会发现之前添加的数据会重复添加.查看官方文档,文档说是dataSource schema model id 必须是唯一键,而且添加数据完成之后需要返回一个数据包含id,结果研究了半天没有找到问题所在. var crudServiceBaseUrl = "/NFC"; var dataSourc

Kendo UI grid 表格数据更新

1.整行数据更新 ? 1 2 3 4 5 //获取grid表格<br>var table0 = $(updateTableID).data("kendoGrid");<br>//删除第一条 var lastTableData = table0.dataSource.at(0); table0.dataSource.remove(lastTableData); //添加一条至最后一条后 table0.dataSource.add(req[k]);<br>

jquery UI datepicker汉化

由于近期工作需要,jquery ui的datepicker需要汉化,特此把代码贴在这$(function() { $.datepicker.regional["zh-CN"] = { closeText: "关闭", prevText: "<上月", nextText: "下月>", currentText: "今天", monthNames: ["一月", "二月

封装扩展Kendo UI Grid

封装后的代码如下: $(function () { function KendoGrid() { this.gridOptions = { height: "100%", sortable: true, reorderable: true, scrollable: true, filterable: { mode: "menu", extra: false, operators: { string: { contains: "Contains",

AngularJS +Kendo UI Grid template

var dataSource = new kendo.data.DataSource({ transport: { dataType: "json", read: inputUri + $stateParams.subjectID, }, pageSize: 10, }); $scope.mainGridOptions = { dataSource: dataSource, //height: 420, scrollable: false, sortable: true, filter

Kendo UI:Grid中单元格样式控制

问题 Grid某个单元格的样式怎么设置? 解决方案 使用attributes属性设置,如果有css中class属性,需要加双引号"".如 { field: "name", title: "Name", attributes: { "class": "table-cell", style: "text-align: right; font-size: 14px" } }

Kendo UI:Grid中标题css样式设置

问题 Grid表格的标题样式怎么设置? 解决方案 使用headerAttributes属性设置,如果有css中class属性,需要加双引号"".如 { field: "name", headerAttributes: { "class": "table-header-cell", style: "text-align: right; font-size: 14px" } }