作为模板的Webix布局

Question

我是Webix的新手，正在尝试创建一个用户可以添加和删除iten的列表或数据视图。(这次是字体文件)

为此，我定义了一个“添加”按钮和一个显示先前添加的项目的列表。

我的计划是使用Webix已经提供的组件在列表的每一项中放置一个标签和一个排除按钮，但令我惊讶的是，数据组件的模板属性不能单独用ui对象本身来定义。

有什么办法可以做到吗？有些人喜欢这样想：

webix.ui({ id:'stage', rows:[
{ view:"button", type:"icon", icon:"plus", label:"Add Font", autowidth:true, click:AddFont },
{ view:"dataview", id:"fnt_list", data:fonts(), width:300,
    type:{ width:300, height:150, template:function(fnt)
    {
        return webix.ui({cols:[
            {view:"label", align:"left", label:fnt.fileName },
            {view:"button", type:"icon", icon:"trash", label:"Exclude", align:"right", autowidth:true }
        ]});
    }}
}]});

我知道它可以单独使用布局组件，但我真的很想使用其中一个数据组件，因为它们具有分页功能。

Answer 1

虽然可以为每一行创建一个单独的webix UI实例，但这对于您的任务来说有点夸张，只需在模板中使用HTML标记即可。类似于next

{ view:"dataview", css:"fonts", id:"fnt_list", data:fonts, width:300,
  type:{ 
    width:300, height:150,
    template:"#fileName# <i class='fa fa-trash-o'></i>"
  },

工作代码片段- https://snippet.webix.com/dvbdt6st

如果您仍然希望在数据视图项目中包含真正的UI小部件，请选中https://docs.webix.com/desktop__data_layout.html和https://docs.webix.com/desktop__active_content.html