我们在开发过程中经常会遇到需要将枚举值转换成名称进行显示的情况。如下我们有这样一个数据源对象:

var users = [
{id: 1, name: "similar1", status: 1},
{id: 2, name: "similar2", status: 2}
];

其中字段 status 代表的是用户的状态, 1 代表 “可用”, 2 代表 “禁用”。我们使用 kendo grid 常规配置如下:

columns: [
{ field: "id", title: "编号" },
{ field: "name", title: "用户名" },
{ field: "status", title: "状态" }
],

对应的效果如下图所示:

由上图可见,我们的状态那一列直接就是显示的数字 1,2 ,这并不是我们想要的结果。我们需要的是将1,2分别转换成文字:可用,禁用。起初我想到的是通过 template 进行条件判断,当 status 为1时,显示 可用, 为2时, 显示 禁用。 代码如下:

columns: [
{ field: "id", title: "编号" },
{ field: "name", title: "用户名" },
{ field: "status", title: "状态", template: "#= (status == 1) ? '可用' : '禁用' #" }
] // 或者 columns: [
{ field: "id", title: "编号" },
{ field: "name", title: "用户名" },
{ field: "status", title: "状态", template: "#if (status == 1) {# 可用 #}else{# 禁用 #}#" }
]

之后觉得这种方法太烂了,自己似乎接受不了。这种模板判断的方式维护性太低了,哪天如果加了几个状态,那就得写一堆的if。因此又去查找官方api文档,想寻找更好的解决方案,于是就有以下的收获,代码如下:

//1. 首先我们定义一个类似枚举功能的对象
var statusEnum = [
{text: "可用", value: 1},
{text: "禁用", value: 2}
] //2. 之后对kendo grid中的配置做如下调整
columns: [
{ field: "id", title: "编号" },
{ field: "name", title: "用户名" },
{ field: "status", title: "状态", values: statusEnum }
]

做完上面2步就ok了,这种方式是不是更容易被接受呢? 维护起来比之前简单了,看着也明了.....

Kendo Grid控件中将枚举值转为枚举名显示的更多相关文章

  1. Grid控件

    Grid控件是WPF布局容器中功能最强大.最灵活的控件.Grid控件基本上能够完成其他WPF容器控件所能完成的功能,Microsoft建议大多数界面的布局都使用Grid控件来实现,因此默认情况下.vs ...

  2. 完全使用一组 DSL 来操作 Grid 控件

    最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...

  3. wpf研究之道-grid控件

    想要说些什么,却不知道从哪开始."形而上谓之道,形而下谓之器".与其坐而论道,不如脚踏实地,从最实用的地方开始. 我们先来看看wpf中的grid控件.grid控件是个网格的布局控件 ...

  4. WPF-学习笔记 动态修改控件Margin的值

    原文:WPF-学习笔记 动态修改控件Margin的值 举例说明:动态添加一个TextBox到Grid中,并设置它的Margin: TextBox text = new TextBox(); t_gri ...

  5. FineUI Grid控件高度自适应

    引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设 ...

  6. WPF平台Grid控件性能比较

    WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...

  7. python通过win32api轻松获取控件的属性值

    1.如何利用句柄操作windows窗体 首先,获得窗体的句柄  win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd)  ...

  8. FineUI Grid控件右键菜单的实现

    FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...

  9. 实现控件WPF(4)----Grid控件实现六方格

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...

随机推荐

  1. SQLYog执行SQL脚本提示:错误代码: 1067 - Invalid default value for '数据库表'查询:解决办法

    强烈建议:完全卸载当前版本MySQL,重新安装5.6及以上版本 完全卸载方法:https://jingyan.baidu.com/article/3d69c551611290f0ce02d77b.ht ...

  2. 广度优先遍历-BFS、深度优先遍历-DFS

    广度优先遍历-BFS 广度优先遍历类似与二叉树的层序遍历算法,它的基本思想是:首先访问起始顶点v,接着由v出发,依次访问v的各个未访问的顶点w1 w2 w3....wn,然后再依次访问w1 w2 w3 ...

  3. mybatis 关联映射

    一对一 创建数据表 CREATE TABLE `tb_card` ( `id` int NOT NULL AUTO_INCREMENT , `code` varchar() NULL , PRIMAR ...

  4. vue2.0+Element-ui实战案例

    前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭 ...

  5. HTML5本地储存sessionStorage的销毁数据问题

    前几天项目中用到了本地储存,虽然说也就是几个api,但之前有一个问题一直没有去想,我们知道本地储存分为两种,一种是临时储存,关闭浏览器后数据就会销毁,另外一种是没有时间限制的储存,我们做的这个页面比较 ...

  6. maven install 打包 报错 Cannot run program "gpg.exe": CreateProcess error

    打包报错, mvn install后加上参数-Dgpg.skip,例如:mvn install -Dgpg.skip   即可解决. 我们也可以去掉 这个 插件   <plugin>    ...

  7. MySQL Replication之主从切换

    在生产环境中,我们的架构很多都是一主多从.比如一个主数据库服务器M,两个从数据库服务器S1,S2同时指向主数据库服务器M.当主服务器M因为意外情况宕机,需要将其中的一个从数据库服务器(假设选择S1)切 ...

  8. WPF中Grid的行的Height和列的Width根据内容自适应

    Grid中RowDefinition的Height和ColumnDefinition的设置都有三种: 1. 具体数值,固定不变: 2. * 星号,如: 2*,5*,8*: 分母为(2+5+8=15), ...

  9. KMP算法中next数组的理解与算法的实现(java语言)

    KMP 算法我们有写好的函数帮我们计算 Next 数组的值和 Nextval 数组的值,但是如果是考试,那就只能自己来手算这两个数组了,这里分享一下我的计算方法吧. 计算前缀 Next[i] 的值: ...

  10. Centos7下使用yum安装lnmp zabbix3.2

    1:配置epel-release mysql zabbix 源 配置epel源 wget http://mirrors.aliyun.com/epel/epel-release-latest-7.no ...