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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
Javascript调用C#代码
Jan 17 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 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自定义hash函数实例
2015/05/05 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
koa源码中promise的解读
2018/11/13 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
javascript实现简单页面倒计时
2021/03/02 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
centos系统升级python 2.7.3
2014/07/03 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python之super的使用小结
2018/08/13 Python
python使用正则筛选信用卡
2019/01/27 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python中调用其他程序的方式详解
2019/08/06 Python
社团招新策划书
2014/02/04 职场文书
质量承诺书范文
2014/03/27 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
就业意向协议书
2015/01/29 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
python实现双向链表原理
2022/05/25 Python