jqGrid 中文配置

中文配置如下：多国语言（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: '等于u3000u3000'}, {oper: 'ne', text: '不等u3000u3000'}, {
                oper: 'lt',
                text: '小于u3000u3000'
            }, {oper: 'le', text: '小于等于'}, {oper: 'gt', text: '大于u3000u3000'}, {
                oper: 'ge',
                text: '大于等于'
            }, {oper: 'bw', text: '开始于'}, {oper: 'bn', text: '不开始于'}, {
                oper: 'in',
                text: '属于u3000u3000'
            }, {oper: 'ni', text: '不属于'}, {oper: 'ew', text: '结束于'}, {
                oper: 'en',
                text: '不结束于'
            }, {
                oper: 'cn', text: '包含u3000u3000'
            }, {
                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\/:_;.,	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', 
     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_表格宽度，象素值；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