[easyui]总结一下目前项目里遇到的小麻烦
来源:互联网 发布:wince5.0软件 编辑:程序博客网 时间:2024/06/04 20:07
数据字典
比如我们将用户性别存入数据库,一般都是用数字来存储,比如1表示男性,2表示女性。
这时候碰到这样一个需求,
一个datagrid需要支持行编辑,
然后性别这一列用combobox来做。
那如何方便的在前台将数据 1 显示成对应的 ‘男’ 呢?
首先要先定义好这个列
{ field:'gender',title:'性别',width:80, editor:{ type:'combobox', options:{ // 1种做法是通过url获取数据,有个弊端后面说明 url:'fetchGender', // 还有一种做法是直接赋值data,这里的值跟上面的url返回相同。 data:[ {value:'1',text:'男'}, {value:'2',text:'女'}, ] } }}
我们再来看看数据接口应该返回什么样的数据
心急的人会选择直接将要显示的值返回过来
[ {"name":"关羽","gender":'女'}, {"name":"张飞","gender":'男'}, {"name":"马超","gender":'男'}, {"name":"黄忠","gender":'女'}, {"name":"赵云","gender":'男'}]
这么一看没什么问题啊,但如果你进行编辑的话,随便选了一个值之后保存该数据,就会看到
所以这个列还是老老实实的返回value值
那问题又来了,怎么能显示对应的text值?
我见过很多人是这样做的
接口数据:
[ {"name":"关羽","gender":2,"displayGender":"女"}, {"name":"张飞","gender":1,"displayGender":"男"}, {"name":"马超","gender":1,"displayGender":"男"}, {"name":"黄忠","gender":2,"displayGender":"女"}, {"name":"赵云","gender":1,"displayGender":"男"}]
多返回了一个数据,然后在列上加上这样一个formatter
{ field:'gender', ... formatter:function(value,row,index){ return row.displayGender; }}
这样确实也能正常显示
但是!
你会发现,还是编辑出了问题,因为你无论怎么改,数据都还是显示一样的值。
因为虽然编辑的时候改变了当前gender的值,但是displayGender的值并没有同步更改,所以始终显示为初始值。
所以要想实现功能,还需要在结束编辑的时候,同步更新 displayGender 的值。
大概流程是这样
取到当前正在编辑行的性别列的combobox组件
取到text值
先 endEdit 结束行编辑
再 updateRow 更新当前行的 displayGender 值
这种做法,首先是数据接口会多返回一列数据,这对于追求完美的我来说是不允许的。
同时操作也不够优美,就感觉太拐弯了。
现在,分析一下思路。
我们知道这个列所有可能的值(通过接口可以拿到数据),
那我们就可以在formatter里面去遍历找到对应的text用来显示。
为此,我封装了一段代码。
function FieldData(data, _v, _t) { // 标识是否已获取过数据 var isGet = true; // 支持自定义字段的名字 var valueField = _v || 'value', textField = _t || 'text'; // 数据,如果为字符串表示需要从后台获取的。 var _data = data; if ('string' === typeof data) { isGet = false; } // 获取数据 function get() { if (!isGet) { $.ajax(data, { dataType: 'json', async: false, success: function (data) { _data = data; isGet = true; } }); } return _data; } return { getData: function () { return get(); }, formatter: function (value, row, index) { var data = get(); for (var i = 0, len = data.length; i < len; i++) { var item = data[i]; if (item[valueField] == value) { return item[textField] } } return value; } };}
说下用法
// 声明一个字段// 有三个参数,// 第一个参数 可以为 String,Array,如果是String就代表url,如果是Array就表示直接将数据定义好了。// 后面两个参数 valueField,textField,都是可以省略的,如果接口返回的数据不是 {value:'',text:''} 这样,那就得声明好var fieldGender = new FieldData('/api/fetchGender');// 也可以这样用fieldGender = new FieldData([ {id:1,name:'男'},{id:2,name:'女'}],'id','name');
对了,如果是通过url定义的数据,在获取数据的时候,是设置的同步获取的,这样代码好控制一点。而且用的是get方式,如果需要post方式请自行修改。
现在 fieldGender 有两个方法
- getData (获取数据并将数据进行缓存)
- formatter
然后我们重新定义列
{ field:'gender', ... editor:{ type:'combobox', options:{ // 这里就不用设置url了,而且也不推荐用url // 因为如果使用url的话,每次进行编辑的时候,都会请求一次。 data:fieldGender.getData() } }, // 直接将字段的方法放到这边来即可 formatter:fieldGender.formatter}
现在一切正常了。
接口数据:
[ {"name":"关羽","gender":2}, {"name":"张飞","gender":1}, {"name":"马超","gender":1}, {"name":"黄忠","gender":2}, {"name":"赵云","gender":1}]
初始显示:
修改一条数据:
完成编辑:
花了一下午把这篇写完,本来不打算配图的,但觉得有图看着就很直观。
更新日期:2016年3月15日17:57:16
- [easyui]总结一下目前项目里遇到的小麻烦
- 项目遇到的麻烦
- JS中遇到的小麻烦
- cocos2dx加载texturepacker遇到的小麻烦
- 开发过程中 遇到的一些小问题 总结一下
- 刚开始玩openMP,总结一下遇到的一点小问题。
- swing进行GUI编程时遇到的一点小麻烦
- 使用MATLAB过程中遇到的一点小麻烦 theta
- hadoop初试时遇到的一些小麻烦
- Twitter遇到的麻烦
- 总结一下最近使用的easyui
- 总结一下使用Swift遇到的几个小问题和几个小知识点
- 使用easyUI遇到的一些小问题
- 总结一下目前为止碰到的Python编译错误
- 总结一下之前遇到的Android app的开发的小问题
- 记录一下平时遇到的小问题
- 异步下载图片小项目中遇到的问题总结
- 项目中遇到的小问题,总结。敲响警钟!
- Linux内核编译与裁剪(ARM版)
- Objective-C关于非ARC模式下的对象引用计数
- Android掌中游斗地主游戏源码完整版
- Sublime Text 3 (Build 3103) 注册码
- 怎么在ZBrush中通过遮罩得到子物体
- [easyui]总结一下目前项目里遇到的小麻烦
- System.AccessViolationException: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
- Java WebService 简单实例 (图文详解)
- 文通Android平台证件识别SDK
- tomcat CATALINA_OPTS参数设置
- 数据库性能优化
- java启动停止脚本
- the book of meteor
- 机器学习路线图