jqGrid 中文配置 - grid.locale-cn.js 多國語言

時間 2019-11-12

標籤 jqgrid 中文配置 grid.locale grid locale cn.js 多國語言欄目 JavaScript 简体版

原文原文鏈接

中文配置以下：多國語言（demo 內有官方下載鏈接）：php

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

代碼以下：html

;(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);

替換引入如圖：node

結果：jquery

================================= git

更多其它：github

驗證：web

         required:"此字段必需",
         number:"請輸入有效數字",
         minValue:"輸值必須大於等於 ",
         maxValue:"輸值必須小於等於 ",
         email: "這不是有效的e-mail地址",
         integer: "請輸入有效整數",
         date: "請輸入有效時間",
         url: "無效網址。前綴必須爲 ('http://' 或 'https://')",
         nodefined : " 未定義！",
         novalue : " 須要返回值！",
         customarray : "自定義函數須要返回數組！",
         customfcheck : "必須有自定義函數!"

自定義驗證函數實例：ajax

{
    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"
        }
},

暴力設定表格自適應寬度：json

//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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。