jquery easyui grid 表格特殊字符处理

grid 获取的数据中,如果数据存在测试的字符,或者js语句,会导致页面布局错乱,如下方法,让获取到的数据全部当成文本进行显示

此操作主要防止以下亮点

1. 由于业务需要,查询的数据中存在特殊字符或者js语句,如:数据库字段中有一个字段的内容是:  "alert(‘商品编码‘);",那么这个字段查出来到表格中之后,页面会弹出提示框

2.grid查询的字段来自于用户手动输入的文本,如果有恶意攻击,直接输入js语句,会执行相关语句。

表格字段formatter 的时候调用 HTMLEncode

{field:‘dlAddress‘,title:‘使用地点‘,width: 200,align:‘center‘,

formatter : function(value, row, index) {
          return HTMLEncode(value);
      }
}

/*-----------------------------------------------------------------------------------------*\
* 函数: 把特殊字符进行转换
* 参数: value -- 需要转化的字符串
* 返回值:
* 描述:
\*-----------------------------------------------------------------------------------------*/
function HTMLEncode(value) {
var returnValue;
if(value==null){
return null;
}
returnValue = value.replace(/&/g, ‘&‘);
returnValue = returnValue.replace(/</g, ‘&lt;‘);
returnValue = returnValue.replace(/>/g, ‘&gt;‘);

returnValue = returnValue.replace(/\n\n/g, ‘<br/>‘);
returnValue = returnValue.replace(/\r\r/g, ‘<br/>‘);
returnValue = returnValue.replace(/\n/g, ‘<br/>‘);
returnValue = returnValue.replace(/\r/g, ‘<br/>‘);
returnValue = returnValue.replace(/\t/g, ‘&nbsp;‘);
return returnValue;
}

时间: 2024-11-14 16:20:54

jquery easyui grid 表格特殊字符处理的相关文章

jQuery EasyUI - 数据表格(DataGrid)

由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery,否则为提示找不到datagrid <!-- 加载jquery --> <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>

jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为用户的SQL是千奇百怪的,所以出现了诸如:"BLOCKS*8/1024","trunc(SYSDATE)"之类的列名(field)时,表格就会错位,而且含有特殊字符的列无法手工调整大小. 经分析,datagrid组件在画表格的时候会在宿主DOM后动态追加一个style节

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API] 2014-04-02   DataGrid 继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据. DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识.它是轻量级的和功能丰富的.合并单元格,多列标题,冻结列和页脚是仅有的几个特点. [依赖于] pane

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法,这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <select id="box" class="easyui-combogrid" name="dept" sty

第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件

jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的使用方法,这个组件依赖 于 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <table id="box" class="easyui-propertygrid" style="width:300px" data-opt

Jquery EasyUI datagrid后台数据表格生成及分页详解

由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而且容易上手.今天就把自己在项目中用到的功能做了一个总结.生成数据表格如下所示: 接下来上代码 界面html及js代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/>

jquery easyui DataGrid 数据表格 属性

中文帮助请点这里:中文属性详解 以下为未完结版 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head>