jqGrid的autoencode参数设置为true在客户端可能引发的编码问题

简介:

不久前使用jqGrid+MVC做过一段时间开发。

一开始,分页参数几乎都是默认值,jqGrid的分页功能很好用。

考虑到each input is evil,我们的系统对安全性又有较高要求,所以,为了保证输入和输出都比较可靠,找了一下网上的资料,发现autoencode参数能满足需求。

By the way,参考了很多关于jqGrid使用的中文参考文章,大部分都只说是对url进行编码,讲的很不明确,后面还会对我排查问题造成不小的干扰。

 

除了分页之外,我们还需要在列表的最后一列加上操作列,实现诸如常见的更新、删除等操作。然后就发现了问题:在操作列发现了乱码。

比如有一个分页列表,最后一个操作列加上“编辑”和“删除”链接,按照jqGrid的常用做法,我们是在gridComplete回调函数中通过简单拼接字符串实现编辑和删除效果的,示例代码大致如下:

  gridComplete

可是,拼接后的字符串在页面中显示是html编码后的效果,根本没有出现“修改”和“删除”链接。

出现该问题的第一反应是字符串没拼接正确,检查后发现不是这个原因。

然后,我在参考了一堆资料排查了n个参数未果之后,最后跟进jqGrid的源代码里才发现是autoencode这个参数设置为true造成的。

参考官方wiki,发现autoencode这个参数的说明如下:

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

翻译过来,就是:当该参数设置为true,对客户端请求和服务端返回数据都进行html编码,比如<被编码成&lt;

html编码的原理也很简单,也就是几个特殊符号的转义而已,贴一下jqGrid的html编码实现源代码:

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

所以我怀疑出现乱码的原因就是,gridComplete回调函数触发执行的时候,内部逻辑间接调用了jqGrid的html编码函数htmlEncode(动态添加行数据addRowData函数内部可能调用了html编码逻辑)。

把autoencode参数设置为false,果然正常。

 本来懒得再码关于前端的文字的,可是在这个小问题上花了较长时间感觉很不值得,只能自我安慰贴一下算是经验值的提升吧。





本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/p/set-jqGrid-encodes-parameter-to-true-makes-gridComplete-not-work-well.html,如需转载请自行联系原作者

目录
相关文章
|
PHP 调度 数据安全/隐私保护
【源码解读】TP5读取本地图片输出后,设置header头无效,图片乱码
在Thinkphp程序中读取本地图片,做出加工处理(如合并二维码等水印),然后输出给客户端,一直输出图片内容乱码。 设置了header image/png 不生效。 写下这篇TP源码排查文章,看看问题到底出现在哪个步骤。
432 0
【源码解读】TP5读取本地图片输出后,设置header头无效,图片乱码
|
5月前
|
JavaScript
jQuery动态生成input填写时间值并且提交给后端
jQuery动态生成input填写时间值并且提交给后端
24 0
|
7月前
|
移动开发 HTML5
修改HTML5 input placeholder 颜色及修改失效的解决办法
修改HTML5 input placeholder 颜色及修改失效的解决办法
|
JSON 数据格式
fastadmin设置默认返回json类型
fastadmin设置默认返回json类型
401 0
|
Web App开发 JavaScript 前端开发
JavaScript 技术篇-chrome浏览器读取剪切板命令document.execCommand(‘paste‘)返回false原因及解决方法
JavaScript 技术篇-chrome浏览器读取剪切板命令document.execCommand(‘paste‘)返回false原因及解决方法
755 0
JavaScript 技术篇-chrome浏览器读取剪切板命令document.execCommand(‘paste‘)返回false原因及解决方法
|
JSON 测试技术 API
使用Wisdom RESTClient进行自动化测试,如何取消对返回的body内容的校验?对排除的JSON属性字段不做校验?
使用Wisdom RESTClient进行自动化测试,如何取消对返回的body内容的校验?对排除的JSON属性字段不做校验?
1185 0
|
编解码 应用服务中间件
表单提交方式由POST改为GET出现乱码的解决
组合查询功能,原先使用<html:form>缺省是以POST方式提交的,增加了分页功能后,由于要在URL里记住用户提交的查询内容(例如:http://localhost:8080/aims/client/filter.do?name=%E5%BC%A0&address=%E5%8C%97%E4%BA%AC&title=&duty=&departmentCode=10000001&categoryCode=10000002&fieldCode=10000006&genderCode=&identityCode=),所以表单的提交方式要改为GET。
1102 0