jquery easyui dataGrid动态改变排序字段名的方法


Posted in Javascript onMarch 02, 2017

jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致;

如:实体类中的属性为userName,前台filed="userName"而数据库的字段为user_name,这个时候如果把userName设置为排序列,然后去进行点击,就会抛出异常,因为dataGrid在排序的时候会以filed="userName"中的字段名为排序字段;

问题:

怎么把userName和数据库中的user_name进行做映射

解决方案:

1:在后台服务器端对前台传入的排序字段进行判断,并且手工进行映射为数据库中的字段名;

             优点:安全、数据库字段不会暴露在前台HTML页面中;

             缺点:后台代码中会出现很多的字段映射判断;

2:在前台点击排序字段列的时候做判断,通过JS脚本在前台页面判断进行映射为数据库中的字段名;

             优点:方便,不需要修改服务器端代码

             缺点:不安全,数据库真实字段名会暴露在HTML页面中;            

  注意:如果对安全性要求比较高建议选择第一种;

这里采用第二种方式,实现如下:

/** 
 *在点击排序字段时,改变传入后台的字段 
 *param对应onBeforeLoad事件的参数 
 *map自定义的字段映射Map 
 */ 
onSortColumn=function(param,map){ 
  //取出map中字段的映射关系值 
  var fieldSort=map[param.sort]; 
  if(fieldSort!='' && fieldSort!=undefined){ 
    //设置新的排序字段名,设置完之后,发送请求时一并会发送到服务端 
    param.sort=fieldSort; 
  } 
}

使用方法:

//创建Map 
var map = new Map(); 
//为map添加值;key:对应filed="userName"中的字段名;value:对应数据库的字段 
map['userName']='user_name'; 
 
$('#datagrid').datagrid({ 
  onBeforeLoad:function(param){ 
    onSortColumn(param,map); 
  } 
});

以上所述是小编给大家介绍的jquery easyui dataGrid动态改变排序字段名的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
Node.js笔记之process模块解读
May 31 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 #Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 #Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 #Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 #Javascript
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
php实现点击可刷新验证码
2015/11/07 PHP
javascript 写类方式之三
2009/07/05 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
django数据库自动重连的方法实例
2019/07/21 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
构造方法和其他方法的区别
2016/04/26 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
大学生毕业求职简历的自我评价
2013/10/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
党支部鉴定意见
2015/06/02 职场文书
python not运算符的实例用法
2021/06/30 Python