jqGrid中文配置 - grid.locale-cn.js多国语言

jqGrid 中文配置 - grid.locale-cn.js 多国语言

中文配置如下：多国语言（demo 内有官方下载连接 ）：

jqGrid 表格插件中文 grid.locale-cn.js

代码如下：

;(function ($) {

    /**

     * jqGrid English Translation

     * Tony Tomov tony@trirand.com

     * http://trirand.com/blog/

     * Dual licensed under the MIT and GPL licenses:

     * http://www.opensource.org/licenses/mit-license.php

     * http://www.gnu.org/licenses/gpl.html

     **/

    $.jgrid = $.jgrid || {};

    $.extend($.jgrid, {

        defaults: {

            recordtext: "{0} - {1}\u3000共 {2} 条",

            emptyrecords: "无数据显示",

            loadtext: "读取中...",

            pgtext: "{0} 共 {1} 页"

        },

        search: {

            caption: "搜索...",

            Find: "查找",

            Reset: "重置",

            odata: [{oper: 'eq', text: '等于\u3000\u3000'}, {oper: 'ne', text: '不等\u3000\u3000'}, {

                oper: 'lt',

                text: '小于\u3000\u3000'

            }, {oper: 'le', text: '小于等于'}, {oper: 'gt', text: '大于\u3000\u3000'}, {

                oper: 'ge',

                text: '大于等于'

            }, {oper: 'bw', text: '开始于'}, {oper: 'bn', text: '不开始于'}, {

                oper: 'in',

                text: '属于\u3000\u3000'

            }, {oper: 'ni', text: '不属于'}, {oper: 'ew', text: '结束于'}, {

                oper: 'en',

                text: '不结束于'

            }, {

                oper: 'cn', text: '包含\u3000\u3000'

            }, {

                oper: 'nc', text: '不包含'

            }, {

                oper: 'nu', text: '不存在'

            }, {

                oper: 'nn', text: '存在'

            }],

            groupOps: [{op: "AND", text: "所有"}, {op: "OR", text: "任一"}]

        },

        edit: {

            addCaption: "添加记录",

            editCaption: "编辑记录",

            bSubmit: "提交",

            bCancel: "取消",

            bClose: "关闭",

            saveData: "数据己改变，是否保存?",

            bYes: "是",

            bNo: "否",

            bExit: "取消",

            msg: {

                required:"此字段必需",

                number:"请输入有效数字",

                minValue:"输值必须大于等于 ",

                maxValue:"输值必须小于等于 ",

                email: "这不是有效的e-mail地址",

                integer: "请输入有效整数",

                date: "请输入有效时间",

                url: "无效网址。

前缀必须为 ('http://' 或 'https://')",

                nodefined : " 未定义！",

                novalue : " 需要返回值！",

                customarray : "自定义函数需要返回数组！",

                customfcheck : "必须有自定义函数!"

            }

        },

        view: {

            caption: "查看记录",

            bClose: "关闭"

        },

        del: {

            caption: "删除",

            msg: "删除所选记录？",

            bSubmit: "删除",

            bCancel: "取消"

        },

        nav: {

            edittext: "",

            edittitle: "编辑所选记录",

            addtext:"",

            addtitle: "添加新记录",

            deltext: "",

            deltitle: "删除所选记录",

            searchtext: "",

            searchtitle: "查找",

            refreshtext: "",

            refreshtitle: "刷新表格",

            alertcap: "注意",

            alerttext: "请选择记录",

            viewtext: "",

            viewtitle: "查看所选记录"

        },

        col: {

            caption: "选择列",

            bSubmit: "确定",

            bCancel: "取消"

        },

        errors: {

            errcap : "错误",

            nourl : "没有设置url",

            norecords: "没有要处理的记录",

            model : "colNames 和 colModel 长度不等！"

        },

        formatter: {

            integer: {thousandsSeparator: ",", defaultValue: '0'},

            number: {decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00'},

            currency: {

                decimalSeparator: ".",

                thousandsSeparator: ",",

                decimalPlaces: 2,

                prefix: "",

                suffix: "",

                defaultValue: '0.00'

            },

            date: {

                dayNames:   [

                    "日", "一", "二", "三", "四", "五", "六",

                    "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"

                ],

                monthNames: [

                    "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",

                    "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"

                ],

                AmPm: ["am", "pm", "上午", "下午"],

                S: function (j) {

                    return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th';

                },

                srcformat: 'Y-m-d',

                newformat: 'n/j/Y',

                parseRe: /[Tt\\\/:_;.,\t\s-]/,

                masks: {

                    // see http://php.net/manual/en/function.date.php for PHP format used in jqGrid

                    // and see http://docs.jquery.com/UI/Datepicker/formatDate

                    // and https://github.com/jquery/globalize#dates for alternative formats used frequently

                    // one can find on https://github.com/jquery/globalize/tree/master/lib/cultures many

                    // information about date, time, numbers and currency formats used in different countries

                    // one should just convert the information in PHP format

                    ISO8601Long: "Y-m-d H:i:s",

                    ISO8601Short: "Y-m-d",

                    // short date:

                    //    n - Numeric representation of a month, without leading zeros

                    //    j - Day of the month without leading zeros

                    //    Y - A full numeric representation of a year, 4 digits

                    // example: 3/1/2012 which means 1 March 2012

                    ShortDate: "n/j/Y", // in jQuery UI Datepicker: "M/d/yyyy"

                    // long date:

                    //    l - A full textual representation of the day of the week

                    //    F - A full textual representation of a month

                    //    d - Day of the month, 2 digits with leading zeros

                    //    Y - A full numeric representation of a year, 4 digits

                    LongDate: "l, F d, Y", // in jQuery UI Datepicker: "dddd, MMMM dd, yyyy"

                    // long date with long time:

                    //    l - A full textual representation of the day of the week

                    //    F - A full textual representation of a month

                    //    d - Day of the month, 2 digits with leading zeros

                    //    Y - A full numeric representation of a year, 4 digits

                    //    g - 12-hour format of an hour without leading zeros

                    //    i - Minutes with leading zeros

                    //    s - Seconds, with leading zeros

                    //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)

                    FullDateTime: "l, F d, Y g:i:s A", // in jQuery UI Datepicker: "dddd, MMMM dd, yyyy h:mm:ss tt"

                    // month day:

                    //    F - A full textual representation of a month

                    //    d - Day of the month, 2 digits with leading zeros

                    MonthDay: "F d", // in jQuery UI Datepicker: "MMMM dd"

                    // short time (without seconds)

                    //    g - 12-hour format of an hour without leading zeros

                    //    i - Minutes with leading zeros

                    //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)

                    ShortTime: "g:i A", // in jQuery UI Datepicker: "h:mm tt"

                    // long time (with seconds)

                    //    g - 12-hour format of an hour without leading zeros

                    //    i - Minutes with leading zeros

                    //    s - Seconds, with leading zeros

                    //    A - Uppercase Ante meridiem and Post meridiem (AM or PM)

                    LongTime: "g:i:s A", // in jQuery UI Datepicker: "h:mm:ss tt"

                    SortableDateTime: "Y-m-d\\TH:i:s",

                    UniversalSortableDateTime: "Y-m-d H:i:sO",

                    // month with year

                    //    Y - A full numeric representation of a year, 4 digits

                    //    F - A full textual representation of a month

                    YearMonth: "F, Y" // in jQuery UI Datepicker: "MMMM, yyyy"

                },

                reformatAfterEdit: false

            },

            baseLinkUrl: '',

            showAction: '',

            target: '',

            checkbox: {disabled: true},

            idName: 'id'

        }

    });

})(jQuery);

替换引入如图：

结果：

=================================

更多其它：

验证：

         required:"此字段必需",

         number:"请输入有效数字",

         minValue:"输值必须大于等于 ",

         maxValue:"输值必须小于等于 ",

         email: "这不是有效的e-mail地址",

         integer: "请输入有效整数",

         date: "请输入有效时间",

         url: "无效网址。

前缀必须为 ('http://' 或 'https://')",

         nodefined : " 未定义！",

         novalue : " 需要返回值！",

         customarray : "自定义函数需要返回数组！",

         customfcheck : "必须有自定义函数!"

自定义验证函数实例：

{
    name: 'customer_phone',
    index: 'customer_phone', 
    width: 120, 
    editrules: {
    required: true, 
        number: true, 
        custom: true, 
        custom_func: function (value, colNames) {
            if (!(/^(1[3-9])\d{9}$/.test(value))) {
                return [false, "不是正确的手机号格式"];
            } else {
                return [true, ""];
            }
        }
}, 
    editable: true, 
    sorttype: "date", 
    editoptions: 
        {
            size: "20",
            maxlength: "11"
        }
},

暴力设定表格自适应宽度：

//css

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x: hidden;
}

// js 

var grid_selector = "#grid-table";

var parent_column = $(grid_selector).closest('[class*="col-"]');
//resize to fit page size
$(window).off('resize');
$(window).on('resize.jqGrid', function () {
    $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
})

//resize on sidebar collapse/expand
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
    if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
        //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
        setTimeout(function() {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
        }, 20);
    }
})

=================================

事件：

//初始化

        jQuery(grid_selector).jqGrid({

//事件在初始化函数后，定义如下：选择单元格触发函数

            onCellSelect: function(rowid,iCol,cellcontent,e){

                console.log(rowid);

            },

        })

事件

参数

备注

afterInsertRow

rowidrowdatarowelem

当插入每行时触发。

rowid插入当前行的id；rowdata插入行的数据，格式为name: value，name为colModel中的名字

beforeRequest

none

向服务器端发起请求之前触发此事件但如果datatype是一个function时例外

beforeSelectRow

rowid, e

当用户点击当前行在未选择此行时触发。

rowid：此行id；e：事件对象。

返回值为ture或者false。

如果返回true则选择完成，如果返回false则不会选择此行也不会触发其他事件

gridComplete

none

当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件

loadComplete

xhr

当从服务器返回响应时执行，xhr：XMLHttpRequest 对象

loadError

xhr,status,error

如果请求服务器失败则调用此方法。

xhr：XMLHttpRequest 对象；satus：错误类型，字符串类型；error：exception对象

onCellSelect

rowid,iCol,cellcontent,e

当点击单元格时触发。

rowid：当前行id；iCol：当前单元格索引；cellContent：当前单元格内容；e：event对象

ondblClickRow

rowid,iRow,iCol,e

双击行时触发。

rowid：当前行id；iRow：当前行索引位置；iCol：当前单元格位置索引；e:event对象

onHeaderClick

gridstate

当点击显示/隐藏表格的那个按钮时触发；gridstate：表格状态，可选值：visible or hidden

onPaging

pgButton

点击翻页按钮填充数据之前触发此事件，同样当输入页码跳转页面时也会触发此事件

onRightClickRow

rowid,iRow,iCol,e

在行上右击鼠标时触发此事件。

rowid：当前行id；iRow：当前行位置索引；iCol：当前单元格位置索引；e：event对象

onSelectAll

aRowids,status

multiselect为ture，且点击头部的checkbox时才会触发此事件。

aRowids：所有选中行的id集合，为一个数组。

status：boolean变量说明checkbox的选择状态，true选中false不选中。

无论checkbox是否选择，aRowids始终有 值

onSelectRow

rowid,status

当选择行时触发此事件。

rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用

onSortCol

index,iCol,sortorder

当点击排序列但是数据还未进行变化时触发此事件。

index：name在colModel中位置索引；iCol：当前单元格位置索引；sortorder：排序状态：desc或者asc

resizeStart

event, index

当开始改变一个列宽度时触发此事件。

event：event对象；index：当前列在colModel中位置索引

resizeStop

newwidth, index

当列宽度改变之后触发此事件。

newwidth：列改变后的宽度；index：当前列在colModel中的位置索引

serializeGridData

postData

向服务器发起请求时会把数据进行序列化，用户自定义数据也可以被提交到服务器端

=================================

方法：

//jqGrid 新的APi

//如果使用新的API,会替换老的方法，需要trigger("reloadGrid")；

//原型如下：method=方法名 parameter1=参数

jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );

//实例：

jQuery("#grid_id").jqGrid('setGridParam',{...}).jqGrid('hideCol',"somecol").trigger("reloadGrid");

//配置使用新API

 jQuery.jgrid.no_legacy_api = true;  

//====一般方法的使用  

//原型

jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );

//实例

jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");

//===== 使用通用方法

//原型

jQuery.jgrid.jqGridFunction( parameter1,...parameterN );

//===== 特别方法

jQuery("#grid_id").jqGrid('filterToolbar',options);  

方法名

参数

返回值

说明

addJSONData

data

none

使用传来的data数据填充表格。

使用方法：

var mygrid = jQuery(”#”+grid_id)[0];

var myjsongrid = eval(”(”+jsonresponse.responseText+”)”); mygrid.addJSONData(myjsongrid);

myjsongrid = null;

jsonresponse =null;

addRowData

rowid,data, position, srcrowid

成功为true, 否则为false

根据参数插入一行新的数据，rowid为新行的id，data为新行的数据，position为新增行的位置，srcrowid为新增行的参考位置。

data数据格式：{name1:value1,name2: value2…} name为在colModel中指定的名称

addXMLData

data

none

根据传来的数据填充表格。

用法：var mygrid = jQuery(”#”+grid_id)[0]; mygrid.addXmlData(xmlresponse.responseXML);

clearGridData

clearfooter

jqGrid对象

清除表格当前加载的数据。

如果clearfooter为true时则此方法删除表格最后一行的数据

delRowData

rowid

成功为true否则为false

根据rowid删除行，但不会从服务器端删除数据

footerData

action,data, format

jgGrid对象

设置或者取得底部数据。

action：“get”或者“set”，默认为“get”，如果为“get”返回值为name:value，name为colModel中名称。

如果为“set”则值为name：value，name是colModel中的名称。

format：默认为true，当为 true时，在设置新值时会调用formatter格式化数值

getCell

rowid, iCol

单元格内容

返回指定rowid，iCol的单元格内容，iCol既可以是当前列在colModel中的位置索引也可以是name值。

注意：在编辑行或者单元格时不能使用此方法，此时返回的并不是改变的值，而是原始值

getCol

colname, returntype, mathoperation

array[] or value

返回列的值。

colname既可以是当前列在colModel中的位置索引也可以是name值。

returntype指定返回数据的类型，默认为false。

当为false时，返回的数组中只包含列的值，当为true时返回数组是对象数组，具体格式 {id:rowid, value:cellvalue} ，id为行的id，value为列的值。

如： [{id:1,value:1},{id:2,value:2}…]。

mathoperation 可选值为'sum, 'avg', 'count'

getDataIDs

none

array[]

返回当前grid里所有数据的id

getGridParam

name

mixed value

返回请求的参数信息

getInd

rowid,rowcontent

mixed

如果rowcontent为false，返回行所在的索引位置，id为行id。

rowcontent默认为false。

如果rowconent为ture则返回的为行对象，如果找不到行则返回false

getRowData

rowid or none

array[]

返回指定行的数据，返回数据类型为name:value，name为colModel中的名称，value为所在行的列的值，如果根据rowid找不到则返回空。

在编辑模式下不能用此方法来获取数据，它得到的并不是编辑后的值

hideCol

colnameor[colnames]

jqGrid对象

如果参数为一个列名则隐藏此列，如果给定的是数组则隐藏指定的所有列。

格式： [“name1”,”name2”]

remapColumns

permutation, updateCells, keepHeader

none

调整表格列的显示顺序,permutation为当前列的顺序，假如值是[1,0,2]，那么第一列就会在第二位显示。

如果updateCells为ture则是对单元格数据进行重新排序，如果keepHeader为true则对header数据显示位置进行调整

resetSelection

none

jqGrid对象

选择或者反选行数据，在多选模式下也同样起作用

setCaption

caption

jqGrid对象

设置表格的标题

setCell

rowid,colname, data, class, properties

jqGrid对象

改变单元格的值。

rowid：当前行id；colname：列名称，也可以是列的位置索引，从0开始；data：改变单元格的内容，如果为空则不更 新；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置单元格属性

setGridParam

object

jqGrid对象

设置grid的参数。

有些参数的修改必须要重新加载grid才可以生效，这个方法可以覆盖事件

setGridHeight

new_height

jqGrid对象

动态改变grid的高度，只能对单元格的高度进行设置而不能对表格的高度进行动态修改。

new_height：可以是象素值，百分比或者"auto"

setGridWidth

new_width,shrink

jqGrid对象

动态改变表格的宽度。

new_width:表格宽度，象素值；shrink：true或者false，作用同shrinkToFit

setLabel

colname, data, class, properties

jqGrid对象

给指定列设置一个新的显示名称。

colname：列名称，也可以是列的位置索引，从0开始；data：列显示名称，如果为空则不修改；class：如果是 string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置 label的属性

setRowData

rowid,data, cssprop

成功true否则false

更新行的值，rowid为行id。

data值格式：{name1:value1,name2: value2…} name为colModel中名称；cssprop：如果是string则会使用addClass方法将其加入到行的css中，如果是array或者对象 则会直接加到style属性中

setSelection

rowid,onselectrow

jqGrid对象

选择或反选指定行。

如果onselectrow为ture则会触发事件onSelectRow，onselectrow默认为ture

showCol

colname

jqGrid

显示列。

colname可以是数组[“name1”,”name2”],但是name1或者name2必须是colModel中的name

trigger(“reloadGrid”)

none

jqGrid对象

重新加载当前表格，也会向服务器发起新的请求

updateColumns

none

none

同步表格的宽度，用在表格拖拽时，用法：var mygrid=jQuery(”#grid_id”)[0];mygrid.updateColumns();

这些方法并不和jqGrid对象绑定，可以随意使用：

jQuery.jgrid.jqGridFunction( parameter1,...parameterN );

函数名

参数

返回值

说明

ajaxOptions

空对象

none

这个函数可以改变jqgrid中用到的ajax请求参数，这个函数可以覆盖当前所有ajax请求设置。

从3.6版本开始起有3个级别的ajax设置：第一 个级别就是在模块中设置ajax请求；第二个级别就是通过此函数设置；第三级别的设置是控制全局ajax请求的设置：jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds)); 当然我们也可以单独设置ajax的参数

jqID

string

解析后的string

转义字符串，把两个反斜杠(\\)转化为单个反斜杠(\)

jgrid.htmlDecode

string

转换后string

把转码后的字符串还原

jgrid.htmlEncode

string

编码后的string

把字符串编码

jgrid.format

string

格式化后string

简单字符串模板。

用法：Example jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4,result : “Please enter a value between 4 and 8.”

jgrid.getCellIndex

cell

index

这个方法是用来修复在ie7里的一个bug

jgrid.stringToDoc

xmlstring

xmlDoc

把xmlstring转换为dom对象

jgrid.stripHtml

content

new_content

去掉html标签返回标签中内容

jgrid.parse

jsonstring

对象

把一个jsonstring转换为json对象

特别方法
jQuery("#grid_id").jqGrid('filterToolbar',options);

方法名

参数

返回值

说明

filterGrid

grid_id,params

HTML对象

构造jqGrid的查询界面。

grid_id:表格id；params：参数

filterToolbar

params

jqGrid对象

同上。

不同的是搜索输入框在header层下方

getColProp

colname

array

返回指定列的属性集合。

name为colModel中名称

GridDestroy

grid_id

boolean

从dom上删除此grid

GridUnload

grid_id

boolean

跟GridDestroy不同的是table对象跟pager对象并不会被删除，以便下次使用

setGridState

state

jqGrid对象

设置grid的状态，显示或者隐藏。

这个方法不会触发onHeaderClick 事件。

setColProp

colname, properties

jqGrid对象

设置新的属性，对于动态改变列属性是非常有用的，但是有些属性的修改并不会起效。

用法：jQuery(”#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}});

sortGrid

colname, reload

jqGrid对象

按指定列进行排序。

效果同setGridParam({sortname:'myname'}).trigger('reloadGrid'). 如果reload为true则会重新加载数据

updateGridRows

data,rowidname,jsonreader

boolean

修改表格中某行的数据，data数据格式：[{name:value,name1:value1…}, {name:value,name2:value2…}]，name为colModel中的名称；rowidname某行的名称。

 jsonreader：boolean值，默认false。

如果为true则是定义数据的格式，data的值并不是name：value形式而只是 value