In the past this period of time participated in the University Cloud Platform evaluation system, in the system front-end requirements with Mvc+easyui, from today on to tell you about Mvc+easyui front-end application.
Jqueryeasyui: A set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags.
The Easyui-datagrid (data table) is often used in the system, as shown in
<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" > name </th> <th data-options= "field: ' Sex ', width:148,sortable:true" > Gender </th> </tr> </thead> </table> </div> <!--DataGrid Basic Settings- <script type= "Text/javascript" > $ (function () { $ (' #dg '). DataGrid ({ title: ' Test table ', pagination:true,//display of paging toolbar }) ; </script>
But this kind of form, we look at is not accustomed to place? Yes, that is, the following pagination control is displayed in English, which let us these Chinese users to use a system, we certainly will not like, how to do? Here are two ways to introduce you
Method One:
Add this JS code to each of the tables:
<!--DataGrid Basic Settings- <script type= "Text/javascript" > $ (function () { $ (' #dg '). DataGrid ({ title: ' Test Form ', pagination:true,//display of pagination toolbar }); var p = $ (' #dg '). DataGrid (' Getpager '); $ (P). Pagination ({ pagesize:10,//shows the number of records per page, by default, pagelist: [5, 10, 15],//you can set a list of the number of records per page Beforepagetext : ' First ',///Page text box display of Chinese characters afterpagetext: ' pages total {pages} page ', displaymsg: ' Current display {from}-{to} ' record total} records ', }); }); </script>
Method Two:
Refer to "jquery-easyui-1.3.2/locale/easyui-lang-zh_cn.js" file, first, we open the above JS file, we can see
if ($.fn.pagination) {$.fn.pagination.defaults.beforepagetext = ' first '; $.fn.pagination.defaults.afterpagetext = ' Total { Pages} page '; $.fn.pagination.defaults.displaymsg = ' Show {from} to {to}, with {total} record ';} if ($.fn.datagrid) {$.fn.datagrid.defaults.loadmsg = ' is being processed, please wait a moment ... ';} if ($.fn.treegrid && $.fn.datagrid) {$.fn.treegrid.defaults.loadmsg = $.fn.datagrid.defaults.loadmsg;} if ($.messager) {$.messager.defaults.ok = ' OK '; $.messager.defaults.cancel = ' Cancel ';} if ($.fn.validatebox) {$.fn.validatebox.defaults.missingmessage = ' This entry is a must-lose '; $. Fn.validatebox.defaults.rules.email.message = ' Please enter a valid e-mail address '; $.fn.validatebox.defaults.rules.url.message = ' Please enter a valid URL address '; $.fn.validatebox.defaults.rules.length.message = ' The input length must be between {0} and {1} '; $. Fn.validatebox.defaults.rules.remote.message = ' Please fix this field ';}
And then we just have to find the DataGrid in it and add that statement.
if ($.fn.datagrid) { $.fn.datagrid.defaults.loadmsg = ' is being processed, please wait a moment ... '; $.fn.datagrid.defaults.beforepagetext = ' first '; $.fn.datagrid.defaults.afterpagetext = ' page Total {pages} '; $.fn.datagrid.defaults.displaymsg = ' Show {from} into {to}, with {total} records ';}
And now we're going to use the "easyui-lang-zh_cn.js" file to get the results we want.
Summary: Although the above two methods can achieve the function we want, but the method one needs to add such code in each table, relative to method two, only need to add once, and then each time with a reference to the JS file, a lot of trouble, So it is recommended that you use the second method to make your DataGrid paging component English to Chinese
Easyui of the DataGrid pagination component Chinese display in two ways