拓展11-datagrid中颜色格式化显示

vi-vi-

于 2019-12-23 16:53:16 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： Java #SpringDataJpa 文章标签： datagrid

本文链接：https://blog.youkuaiyun.com/vivid9527/article/details/103668522

42 篇文章

订阅专栏

15 篇文章

订阅专栏

本文介绍了两种在datagrid中实现颜色格式化的展示方法。方式1通过jsp页面设置`formatter:colorFormt`配合js，利用div的`background-color`属性，支持英文颜色名和十六进制。方式2则使用input的`type=color`属性，但只支持十六进制颜色显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果展示

未格式化之前，显示的为颜色名字或者十六进制的颜色。
在这里插入图片描述

使用div的background-color，颜色可以是red英文也可以使用十六进制

formatter:colorFormt

 <th data-options="field:'color',width:10,formatter:colorFormt">颜色</th>

//颜色格式化
function colorFormt(v, r, i) {
    return `<div style="width: 20px;height: 20px;background-color:${v}"></div>`;
}

使用input的type=color属性，这里需要注意，只能使用十六进制显示

//颜色格式化
function colorFormt(v, r, i) {
    return '<input  type="color" disabled="true" value="' + v + '">';
}