技术文章

今天,我们激动地宣布Dhtmlx看板v1.4的发布。尽管情况不太好,我们的更新 甘班图书馆 提供一系列重要的新功能和改进,将有利于Web开发人员和终端用户。

新版本使你更容易用新的柳树和柳树黑色主题以及任何带有新CSS参数的单独元素来改变任务板的整体外观。我们的看板还帮助团队使用新的能力进行协作,为任务留下评论并为它们投票。现在您可以指定卡之间的依赖关系,为定制卡设置默认上下文菜单,为编辑器中的日期输入设置自定义格式,并限制一个任务的受让人的数目。此外,流行用例场景有两种新的演示。

让我们深入探究这个版本的细节。

新内置的看板主题

当你将一个JavaSIRTK看板集成到一个Web应用程序中时,一个漂亮的现代设计与功能和效率一样重要。我们增加了两个新的内置主题--柳树和柳树黑。这些新选项将补充默认的材料主题,并帮助您的风格。

柳树黑色的主题。检查片段;

在我们的看板中应用主题有三种方法。

1)使用 主题 包含下列参数的属性:

• 姓名 -定义你想使用的主题名称

• 字体 -指定来自CDN的字体是否应加载(默认加载)

主题 : {
    姓名 : "material" | "willow" | "willow-dark" ,
   字体 : 真实的 | 假的
}

… 主题 属性也添加到工具栏配置中:

新的 工具杆 ( "#toolbar" , {
   阿皮 : 冲浪板。 阿皮 ,
   主题 : "material" , | "willow" | "willow-dark"
} ) ;

要动态地将所需主题应用到看板容器和工具栏中,请使用 setConfig() 方法。

(2)通过增加相应的主题来适用所需的主题 通信服务系统 看板集装箱的等级:

<!-- Kanban toolbar -->
< 分 身份证 = "toolbar" 等级 = "wx-willow-theme" >< / 分 >
<!-- Kanban container -->
< 分 身份证 = "root" 等级 = "wx-willow-theme" >< / 分 >

3)在皮皮文件夹的页面上加入主题:

< 链接类型 = "stylesheet" 高参考值 = "路径/到/关口/皮/柳树黑" />

看板卡上的注释

各种规模的团队使用看板应用程序来可视化地安排和跟踪他们的工作流。因此,对于Web开发人员来说,能够在看板中向他们提供一些通信手段是很不错的。和Dhtmlx看板1.4与添加,更新,删除评论卡的能力。
检查样品;
默认情况下不会显示注释。若要显示每张卡片上的批注数目,请使用 评论意见 的参数 纸形的 财产:

纸形的 : {
    ... //其他卡设置
    使用者 : {
        展示 : 真实的 ,
        价值观 : [
            { 身份证 : 1 , 标签 : "史蒂夫·史密斯" , 神通 : "../assets/user.jpg" } ,
            { 身份证 : 2 , 标签 : "艾伦·龙" }
    评论意见 : 真实的 ,
}

可以通过看板编辑器添加、编辑和删除注释。为此,编辑器支持一种新的字段类型- 类型:"评述" 所以你可以把它加到 编辑 目的:

康斯特 板 = 新的 看板 ( "#root" , {
    柱 ,
    卡片 ,
    纸形的 ,
    编辑 : [
        ... 不合格 ,
        {
            类型 : "comments" ,
            键 : "comments" ,
            标签 : "Comments" ,
            配置 : {
                安置 : "editor" ,
            } ,
        } ,
    ] ,
    货币使用者 : 1 ,
} ) ;

你应该在 货币使用者 财产。此属性的值必须对应于 卡德沙佩。用户 财产。否则,评论只供阅读使用。

指定的身分证 货币使用者 物业也是正确运作 addComment() , updateComment() ,以及 deleteComment() 负责与评论有关的基本行动的方法。这些方法随之而来 附加评论 , 更新评论 , 删除评论 相应动作发生时调用的事件。

任务投票

V1.4中还有一个更大的功能,以确保看板用户之间更好地互动正在进行的活动。我们正在谈论为任务增加选票的能力。考虑到所有团队成员的意见,这是一种简单而可靠的方法,可以确定任务的优先次序或就某些问题进行表决。

在使用dhtmlx构建的看板中,为卡片投票很简单:只需点击编辑器中的大拇指向上图标即可。重复点击图标将取消投票.
检查样品;
要在看板中添加投票,需要设置 投票 参数在 纸形的 目的:

纸形的 : {
   ... //其他卡设置
    投票 : 真实的 ,
} ;

我们还创造了一个新的 模拟的 演示如何扩展后端以支持投票功能。

任务之间的依赖

当您使用看板应用程序管理日常业务活动时,完成一项任务可能会影响其他任务。换句话说,看板任务可以通过亲子关系、前继承人关系相互连接,或者仅仅属于项目的一部分。例如,当一个复杂的任务被分解成更易处理的碎片时,就会发生这种情况。

我们的看板组件的新版本为您提供了一种方法,可以指定具有所谓链接的任务之间的这种关系(或依赖关系)。它是通过编辑器完成的,最终用户可以指定某一特定任务的主导或从属角色,并将其链接到具有特定类型依赖性的其他任务。

编辑现在支持 链接域 所以你可以把它加到 编辑 财产:

新的 坎班。 看板 ( "#root" , {
   编辑 : [
        {
           类型 : "links" ,
           键 : "links" ,
           标签 : "Links" ,
        } ,
        //其他领域的设置
    ]
} ) ;

连结数据储存在 连结 看板API的属性。它是一个对象数组,每个对象都有一套所需的参数:

1. 身份证 -连结的身分证

2. 万事达 -分配给连结中占主导地位的身份证

3. 奴隶的 -分配给连结中从属角色的身份证

4. 亲属关系 -有助于界定各项任务之间的各种依赖关系的链接类型,例如:

• “relatesTo” -标记相关任务,而不指定它们之间的任何依赖关系

• “requiredFor” -使一项任务在完成另一项任务时具有可靠性

• “duplicate” -链接重复任务

• “parent” -创建父(主)子(奴隶)等级

… 连结 属性用于类似的代码:

连结 : [
    {
       身份证 : 弦 | 数量 ,
       万事达 : 弦 | 数量 ,
       奴隶的 : 弦 | 数量 ,
       亲属关系 : "relatesTo" | "requiredFor" | "duplicate" | "parent" ,
    } ,
    { ... }
] ;

你也可以使用 parse() 方法。

这一功能还得到两项新活动的补充- 附加链接 和 删除链接 .当卡片中的链接被分别添加和删除时,它们会被调用.

扩展造型功能

作为对新主题的一个很好的补充,我们还决定用客户要求的新功能来丰富v1.4,并允许您对您的JavaSript看板进行更有针对性的样式修改。我们向看板属性添加了一个CSS参数,用于配置板的不同元素。

您可以将CSS类添加到特定的卡片、行和列,或者通过它们的形状为所有或多个卡片、行和列定义通用CSS类。

例如,这就是看板列在处理完后的样子。 通信服务系统 参数在 柱 配置:
检查样品;

此外,各栏财产还收到: 覆盖 为特定列定义覆盖层的参数,在此可以为该列设置自定义模板。例如,您可以禁止将卡片移到某一特定列,并在列上添加文字内容,同时说明:

柱 : {
    覆盖 : 模板 ( `
        < 分 等级 = "块覆盖可降-降" >
            < 间隔 等级 = "disable-drop-header" > 滴下 是 不允许 </ 间隔 >
            < 间隔 等级 = "disable-drop-description" > 只有测试人员才能把卡片移到 这个 柱 </ 间隔 >
        </ 分 > ` ) ,
  } ,

检查样品;

但你可以更进一步。例如,您可以根据卡片的相关性修改其样式,并以不同的颜色突出相关和过时的任务。现在可以用 通信服务系统 参数在 纸形的 目的:

纸形的 : {
  //卡设置
   通信服务系统 : ( 信用卡 ) => 卡。 类型 == "feature" ? "green" : "red" ,
   头田 : [
        { //定制栏
           键 : "sprint" ,
           通信服务系统 : "custom_style" ,
           标签 : "Sprint"
        }
    ]
} ;

在这里 通信服务系统 是一个函数,它应用CSS类根据日期改变卡片样式。在当前日期之前有日期的卡片的颜色是不同的.
检查样品;

… 通信服务系统 具有相同功能的参数现在也可在 柱状的 和 成排的 财产。

因此,您可以在初始化期间或根据某些逻辑将主要看板元素的外观更改为您喜欢的样子。

自定义卡中的上下文菜单

从一开始,Dhtmlx看板就为您提供了一个机会,通过创建一个自定义模板来定制卡片的外观和行为。 模板 财产。然而,这种方法预先假定默认卡将被自定义卡完全替换。对于那些希望使用定制模板和方便的默认上下文菜单组合起来的人来说,它成为了一个障碍。

我们用v1.4解决了这个问题。现在您可以在定制模板中添加上下文菜单。只需要在模板标记中指定一个自定义图标并添加 data-menu-id=${cardFields.id} 如下例所示的表达式。

功能 模板 ( { 卡德菲尔德 , 选定的 , 拖曳的 , 纸形的 } ) {
        如果 ( 选定的 ) {
            返回的 `
                  < 分区级名称 = "custom-card" 风格 = { { 填充物 : '20px' } } >
                    < 分区级名称 = "status-color" 风格 = { { 背景 : '${cardFields.color}' } } ></ 分 >
                    < 分区数据 - 菜单 - 身份证 = $ { 卡德菲尔德。 身份证 } >
                              < 班名称 = "wxi-dots-v" ></ 我 >
                    </ 分 >
                        选定的 : $ { 卡德菲尔德。 标签 }
                  </ 分 >
           ` ;
        }
}

检查样品;

看板编辑器中的自定义日期格式

使用我们的看板库的新版本,您不限于仅使用默认格式在看板编辑器中显示日期。从v1.4开始,您可以通过设置新添加的日期格式自由定义自己的日期格式。 格式化 参数 约会日期 和 三角形的 在 编辑 配置。

新的 看板 ( "#root" , {
    柱 ,
    卡片 ,
    编辑 : [
        {
            类型 : "dateRange" | "date" ,
            键 : "start_date" ,
            标签 : "开始日期" ,
            格式化 : "%m.%d.%Y"
        }
    ] ,
} ) ;

检查样品;

控制任务受让人人数

资源管理在任何项目的成功中起着至关重要的作用。因此,建立一个可靠的资源配置跟踪机制是非常重要的。Dhtmlx看板1.4提供了限制某项活动参与人数的能力。您可以定义是否可以将一个或多个用户分配到卡中。

例如,在下面的示例中,您可以通过下拉列表只选择一个受让人。
检查样品;
因此,有两种可能的选择 类型 参数在 编辑 财产:

• “select” 或 “combo” 允许在卡片中添加一个用户

• “multiselect” 允许在卡片上添加几个用户的类型

康斯特 编辑 = [ //编辑器设置
   ... 看板 . 不合格 , //包括默认设置
    { //添加自定义字段
       类型 : "select" | "multiselect" ,
       键 : "users" | "users" ,
       标签 : "User" | "Users" ,
       价值观 : 使用者 | 使用者
    } ,
] ;

别忘了 使用者 字段必须在 纸形的 此功能的对象(默认情况下禁用)。为了达到这个目的 展示 参数到 真实的 并透过 价值观 参数。

纸形的 : {
   使用者 : {
       展示 : 真实的 ,
       价值观 : [
            { 身份证 : 1 , 标签 : "约翰·史密斯" , 神通 : "../assets/user.jpg" } ,
            { 身份证 : 2 , 标签 : "艾伦·肖特" }
        ]
    }
}

其他改进

该版本还包括一些微小但值得注意的改进:
1.从v1.4开始,您将获得处理拖放卡片过程的新事件。现在你可以使用相应的方法追踪所有三个拖曳阶段 星盘 , 拖牌 ,以及 终端卡 事件。

2. The api.getState() 更新了方法。我们反对以下参数: 单列表和弦 , 下弦 , 多亚美塔 .

3.此外,我们的开发团队准备了两个活样品,让你清楚地知道如何 管理好几个项目 和 当列扩展时动态加载数据 在坎班。