jqGrid的autoencode參數(shù)設(shè)置為true在客戶端可能引發(fā)的編碼問題

不久前使用jqGrid+MVC做過一段時(shí)間開發(fā)。

一開始，分頁(yè)參數(shù)幾乎都是默認(rèn)值，jqGrid的分頁(yè)功能很好用。

考慮到each input is evil，我們的系統(tǒng)對(duì)安全性又有較高要求，所以，為了保證輸入和輸出都比較可靠，找了一下網(wǎng)上的資料，發(fā)現(xiàn)autoencode參數(shù)能滿足需求。

By the way，參考了很多關(guān)于jqGrid使用的中文參考文章，大部分都只說(shuō)是對(duì)url進(jìn)行編碼，講的很不明確，后面還會(huì)對(duì)我排查問題造成不小的干擾。

除了分頁(yè)之外，我們還需要在列表的最后一列加上操作列，實(shí)現(xiàn)諸如常見的更新、刪除等操作。然后就發(fā)現(xiàn)了問題：在操作列發(fā)現(xiàn)了亂碼。

比如有一個(gè)分頁(yè)列表，最后一個(gè)操作列加上“編輯”和“刪除”鏈接，按照jqGrid的常用做法，我們是在gridComplete回調(diào)函數(shù)中通過簡(jiǎn)單拼接字符串實(shí)現(xiàn)編輯和刪除效果的，示例代碼大致如下：

        gridComplete: function () {                    var ids = jQuery("#yourGridtable").jqGrid('getDataIDs');                    for (var i = 0; i < ids.length; i++) {                        var itemID = ids[i];                        var strUpdate = "<a href='javascrJavascript:;' class='del' name='btnDelete' id='btnDelete_" + itemID + "'>刪除</a>";                        $("#yourGridtable").jqGrid('setRowData', ids[i], { UserAction: strUpdate + strDel });                    }                    setTimeout(function () {                         //todo 設(shè)置編輯效果                         //todo 設(shè)置刪除效果                    }, 200);                }

可是，拼接后的字符串在頁(yè)面中顯示是html編碼后的效果，根本沒有出現(xiàn)“修改”和“刪除”鏈接。

出現(xiàn)該問題的第一反應(yīng)是字符串沒拼接正確，檢查后發(fā)現(xiàn)不是這個(gè)原因。

然后，我在參考了一堆資料排查了n個(gè)參數(shù)未果之后，最后跟進(jìn)jqGrid的源代碼里才發(fā)現(xiàn)是autoencode這個(gè)參數(shù)設(shè)置為true造成的。

參考官方wiki，發(fā)現(xiàn)autoencode這個(gè)參數(shù)的說(shuō)明如下：

When set to true encodes (html encode) the incoming (from server) and posted data (from editing modules). For example < will be converted to &lt;.

翻譯過來(lái)，就是：當(dāng)該參數(shù)設(shè)置為true，對(duì)客戶端請(qǐng)求和服務(wù)端返回?cái)?shù)據(jù)都進(jìn)行html編碼，比如<被編碼成&lt;

html編碼的原理也很簡(jiǎn)單，也就是幾個(gè)特殊符號(hào)的轉(zhuǎn)義而已，貼一下jqGrid的html編碼實(shí)現(xiàn)源代碼：

   htmlEncode : function (value){        return !value ? value : String(value).replace(/&/g, "&amp;").replace(//"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");    }

所以我懷疑出現(xiàn)亂碼的原因就是，gridComplete回調(diào)函數(shù)觸發(fā)執(zhí)行的時(shí)候，內(nèi)部邏輯間接調(diào)用了jqGrid的html編碼函數(shù)htmlEncode(動(dòng)態(tài)添加行數(shù)據(jù)addRowData函數(shù)內(nèi)部可能調(diào)用了html編碼邏輯)。

把a(bǔ)utoencode參數(shù)設(shè)置為false，果然正常。

本來(lái)懶得再碼關(guān)于前端的文字的，可是在這個(gè)小問題上花了較長(zhǎng)時(shí)間感覺很不值得，只能自我安慰貼一下算是經(jīng)驗(yàn)值的提升吧。

參考：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:change#jqgrid_3.5.2_changes_and_fixes