[学习交流] 【济南校区】EasyUI 之 DataGrid分页组件中文显示的两种方法

本帖最后由大山哥哥于 2018-9-30 22:23 编辑

最近在研究前端相关的一些框架，使用到了EasyUi的DataGrid表格插件，发现它的分页展示默认是英文的，所以如何把英文转换为中文呢？在系统中经常会使用到EasyUI-DataGrid（数据表格），如下图所示：

[HTML] 纯文本查看 复制代码

<html
<body>
    <div>
        <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px" >
            <thead>
                <tr>11:28 2015/1/21
                    <th data-options="field:'id',width:148,sortable:true">ID</th>
                    <th data-options="field:'name',width:148,sortable:true">姓名</th>
                    <th data-options="field:'sex',width:148,sortable:true">性别</th>
                </tr>
            </thead>
        </table>
    </div>
    <!--datagrid基本设置-->
    <script type="text/javascript">
        $(function () {
            $('#dg').datagrid({
                title: '测试表格',
                pagination: true,//显示分页工具栏            
            });
        });
    </script>   
</body>
</html>

但是这样的表格，我们看着是不是有不习惯的地方呢？对，就是下面的分页控件是英文显示的，这让我们这些中国的用户去用一个这个系统，大家肯定不会喜欢，怎么办呢？
下面就给大家介绍两种方法
方法一：在给每一个表格都加上这样的Js代码：

[JavaScript] 纯文本查看 复制代码

<!--datagrid基本设置-->
    <script type="text/javascript">
        $(function () {
            $('#dg').datagrid({
                title: '测试表格',
                pagination: true,//显示分页工具栏            
            });
            var p = $('#dg').datagrid('getPager');
            $(p).pagination({
                pageSize: 10,//每页显示的记录条数，默认为10  
                pageList: [5, 10, 15],//可以设置每页记录条数的列表  
                beforePageText: '第',//页数文本框前显示的汉字  
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            });
        });
    </script>

得到如下结果：

方法二：引用“jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js”文件，首先，我们打开上面的js文件，我们可以看见这样的内容

[JavaScript] 纯文本查看 复制代码

if ($.fn.pagination){
        $.fn.pagination.defaults.beforePageText = '第';
        $.fn.pagination.defaults.afterPageText = '共{pages}页';
        $.fn.pagination.defaults.displayMsg = '显示{from}到{to},共{total}记录';
}
if ($.fn.datagrid){
        $.fn.datagrid.defaults.loadMsg = '正在处理，请稍待。。。';
}
if ($.fn.treegrid && $.fn.datagrid){
        $.fn.treegrid.defaults.loadMsg = $.fn.datagrid.defaults.loadMsg;
}
if ($.messager){
        $.messager.defaults.ok = '确定';
        $.messager.defaults.cancel = '取消';
}
if ($.fn.validatebox){
        $.fn.validatebox.defaults.missingMessage = '该输入项为必输项';
        $.fn.validatebox.defaults.rules.email.message = '请输入有效的电子邮件地址';
        $.fn.validatebox.defaults.rules.url.message = '请输入有效的URL地址';
        $.fn.validatebox.defaults.rules.length.message = '输入内容长度必须介于{0}和{1}之间';
        $.fn.validatebox.defaults.rules.remote.message = '请修正该字段';
}

然后我们只要在里面找到datagrid并加上下面这样的语句就OK了

[JavaScript] 纯文本查看 复制代码

if ($.fn.datagrid){
    $.fn.datagrid.defaults.loadMsg = '正在处理，请稍待。。。';
    $.fn.datagrid.defaults.beforePageText = '第';
    $.fn.datagrid.defaults.afterPageText = '页 共{pages}页';
    $.fn.datagrid.defaults.displayMsg = '显示{from}到{to},共{total}条记录';
}

然后现在再引用“easyui-lang-zh_CN.js”这个文件就能出来我们想要的效果了，如下图：

      总结：虽然上面的两种方法都能实现我们想要的功能，但是方法一需要在每一个表格的中添加这样的代码，相对于方法二，只需要添加一次，然后每一次用的时候再引用一下Js文件来说，麻烦了不少，所以还是推荐大家使用第二种方法来让自己的DataGrid分页组件英文变中文

（因不支持JS文件上传，故把easyui-lang-zh_CN.js分享百度云盘连接）
链接：https://pan.baidu.com/s/1j3M99DI1vte-EX6JjrRpMg    提取码：isjz

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【济南校区】EasyUI 之 DataGrid分页组件中文显示的两种方法

0 个回复