TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
Easyui datagrid 编辑结束时combobox显示value而不显示text
3165
人阅读
2014/3/28 15:39
总访问:
3997127
评论:
0
收藏:
0
手机
分类:
前端
在调用datgrid编辑结束时 $('#dg').datagrid('endEdit', editIndex); datagrid的combobox会显示出value, 这是因为easyui在我们编辑结束时为了方便使用更改的值而记录下了combobox的value而不是text ``` var inserted = $("#dg").datagrid('getChanges', "inserted"); var deleted = $("#dg").datagrid('getChanges', "deleted"); var updated = $("#dg").datagrid('getChanges', "updated"); ``` 获取到更改在传会后台使用倒是方便,但是显示出来是value很不舒服, ###解决方法一(不推荐): 这是我们可以使用formatter来格式化输出 因为无论是加载数据与编辑结束时datagrid都会执行formatter函数,所以我们可以用它来输出我们想要的内容, 而且combobox的数据采用data方式而不直接使用url ``` <th data-options="field:'UserLevelId',width:100, formatter:fmLevelAJ, editor:{ type:'combobox', options:{ textField:'UserLevelName', valueField:'UserLevelId', data:GetLevelDTAJ(), editable:false } }">会员等级</th> ``` ``` var comboboxData = ""; function GetLevelDTAJ() { $.ajax({ url: "xx", type: 'get', async: false,//此处必须是同步 dataTye: 'json', success: function (data) { comboboxData = data; } }) return comboboxData; } function fmLevelAJ(value, row) { console.log(comboboxData); for (var i = 0; i < comboboxData.length; i++) { if (comboboxData[i].UserLevelId == value) { return comboboxData[i].UserLevelName; } } return row.UserLevelId; } ``` 原来的写法: ``` <th data-options="field:'UserLevelId',width:100, formatter:function fmLevelAJ(value, row) { return row.UserLevelId; }, editor:{ type:'combobox', options:{ textField:'UserLevelName', valueField:'UserLevelId', url:'xx', editable:false } }">会员等级</th> ``` ### 解决方法二: 后台返回一个值,当然不好解决,但是可以在后台查询出键值对,显示用值,返回用键 1:必须要把键值都查询出来field写键,formatter写值 ``` <th data-options="field:'ID',width:120, --键用于返回回台 formatter:function(value,row){ return row.Company; --值用于显示 }, editor:{ type:'combobox', options:{ valueField:'ID', textField:'Company', url:'/Membership/GetCompanyList', editable:false } }">公司名称</th> ``` 一般这样就可以了,但是有时间需要编辑多条的时候需要进行下第二条 2:在编辑结束前,得到对应的Combobox赋值一次 ``` var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'ID' }); //editIndex编辑时记录下的行号 if (ed != null) { var Company = $(ed.target).combobox('getText'); $('#dg').datagrid('getRows')[editIndex]['Company'] = Company; } $('#dg').datagrid('endEdit', editIndex); ``` 完整一点的代码 ``` function endEditing() { if (editIndex == undefined) { return true } if ($('#dg').datagrid('validateRow', editIndex)) { var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'ID' }); //editIndex编辑时记录下的行号 if (ed != null) { var Company = $(ed.target).combobox('getText'); $('#dg').datagrid('getRows')[editIndex]['Company'] = Company; } $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else {return false;} } ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}