前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JIRA自定义一个优雅的可多选下拉列表

JIRA自定义一个优雅的可多选下拉列表

作者头像
曲水流觞
发布2019-12-16 19:11:03
4.2K0
发布2019-12-16 19:11:03
举报
文章被收录于专栏:曲水流觞TechRill

公司PMO最新发布的规范,需要在每个JIRA故事里输入涉及上线的应用系统名称,最开始就是自定义了一个最简单的文本框,让Owner自己填写,多个系统逗号分隔。后来在数据统计的过程中发现系统应用名每个人写的千奇百怪,难于对齐。所以考虑将所有的系统应用名称导入到JIRA中,让Owner直接选择减少出错概率。但是JIRA内嵌的几个标准自定义控件,实在是不好用。

自定义字段的路径是:右上角的“JIRA管理” ->“问题”->“自定义字段”->"添加",可多选的字段类型如下。

  1. 多个checkbox的复选框,对于我们上百个的微服务系统,全部陈列到一个页面,那简直没法看,故而放弃。
  2. Select List(多选)是个带垂直滚动条的多选框,这个控件也有问题,若上百个系统在里面滚动,多选需要按住Ctrl来多选,而且在滚动过程中,如果不小心没按住Ctrl,之前其他人选择的系统名称,可能就丢了,不直观。
  3. Select List(级联) 场景不合适,忽略。

checkbox 和 多选列表效果如下图所示。

那么有没有一种更优雅的方式,可以在下拉列表中多选,而且每次选择后可以有直观的提示我选择了哪些呢?当然有!而且只需要简单的几行代码。步骤如下:

1.继续之前的路径,在自定义字段界面,仍然选择Select List(多选);

2.名称随便输入一个你想要在Issue编辑页上显示的名字,比如我这里是叫"Related Applications";

3. 描述文本框留空,本文最关键的几行代码就是要存到这个“描述”里;选项先随便填入一个,确定即可;

4. 进入JIRA的数据库中,运行如下SQL,找到这个ID,比如是12000;

代码语言:javascript
复制
select id from customfield 
where cfname='Related Applications'; 
//cfname就是刚才你自定义字段的名称

5.复制如下的代码,将里面的<cf-id>替换为上一步从数据库里查询到的ID,比如customfield_<cf-id>

替换后变为(注意不要不小心加入空格啥的)

customfield_12000

代码语言:javascript
复制
<script type="text/javascript">
(function($) {
   AJS.$("#customfield_<cf-id> option[value='-1']").remove(); //Removes the default value "None"

   function convertMulti(id){
       if (AJS.$('#'+id+"-textarea").length == 0){
           new AJS.MultiSelect({
               element: $("#"+id),
               itemAttrDisplayed: "label",
     errorMessage: AJS.params.multiselectComponentsError            });
       }
   }
 
   AJS.toInit(function(){ 
       convertMulti("customfield_<cf-id>");
   })
 
   JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {
       AJS.$("#customfield_<cf-id> option[value='-1']").remove();
       convertMulti("customfield_<cf-id>");
   });})(AJS.$);
</script>

6. 从JIRA管理重新进入"自定义字段",选择"编辑",将上一步全局替换完毕的代码黏贴到“描述”中,保存;

7. 退出继续对自定义字段“配置”多个可选项,手动一个一个添加吧...

我曾经试过直接在数据库表 customfieldoption中插入,后来会引起ID冲突,全部回滚了。如果真的太多选项,你可以网页抓一下network找到那个jspa接口,自己写代码调用接口也可以。反正尽量不要直接操作数据库。

大功告成!!!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 曲水流觞TechRill 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档