Webix列表/数据视图如何用UI组件定义模板实现字体项增删？

Hey there! 刚上手Webix碰到这个问题太正常了——毕竟Webix的模板默认确实不能直接塞UI组件对象，但咱们有两种很实用的方式来实现你要的「带标签+删除按钮的可增删字体列表」，我给你拆解清楚：

方法1：HTML模板 + 事件委托（最轻量化） #

这种方式用纯HTML渲染列表项，再通过Webix的事件委托机制绑定删除逻辑，简单高效，适合大多数场景：

webix.ui({
  rows: [
    // 添加按钮
    { 
      view: "button", 
      value: "添加字体文件", 
      align: "left",
      click: function() {
        // 这里可以替换成实际的文件选择逻辑，比如结合upload组件
        const fontName = prompt("请输入字体名称（或文件名）");
        if (fontName) {
          $$("fontList").add({ 
            id: webix.uid(), // 生成唯一ID
            name: fontName,
            // 可以额外存储文件路径/Blob等信息
            // filePath: "xxx/xxx.ttf"
          });
        }
      }
    },
    // 字体列表
    {
      view: "list",
      id: "fontList",
      height: 300,
      template: `
        <div class="font-item">
          <span class="font-label">#name#</span>
          <button class="delete-btn" data-id="#id#">删除</button>
        </div>
      `,
      // 事件委托：监听删除按钮点击
      onClick: {
        "delete-btn": function(e, itemId) {
          // 通过itemId删除对应项
          $$("fontList").remove(itemId);
        }
      },
      // 初始空数据
      data: []
    }
  ]
});

关键说明： #

• 模板里用#name#、#id#绑定数据字段，data-id属性用来存储列表项的唯一ID，方便后续删除
• onClick里的"delete-btn"是事件委托的选择器，Webix会自动监听所有该类按钮的点击，不用给每个按钮单独绑定事件
• 如果要处理真实的字体文件上传，可以把prompt替换成Webix的upload组件，获取文件信息后再添加到列表

方法2：用Webix原生组件构建列表项（风格统一） #

如果你希望列表项的标签、按钮都是Webix的原生UI组件（而非纯HTML），可以通过自定义列表的type属性来实现：

webix.ui({
  rows: [
    { 
      view: "button", 
      value: "添加字体文件", 
      align: "left",
      click: function() {
        const fontName = prompt("请输入字体名称");
        if (fontName) {
          $$("fontList").add({ 
            id: webix.uid(), 
            name: fontName 
          });
        }
      }
    },
    {
      view: "list",
      id: "fontList",
      height: 300,
      // 自定义列表项的渲染逻辑
      type: {
        height: 45, // 统一每项高度
        template: function(itemData) {
          // 为每个列表项创建独立的Webix布局组件
          return webix.ui({
            cols: [
              { 
                view: "label", 
                label: itemData.name, 
                css: "font-label",
                width: 200 
              },
              { 
                view: "button", 
                value: "删除", 
                width: 80,
                click: function() {
                  // 直接通过itemData的ID删除项
                  $$("fontList").remove(itemData.id);
                }
              }
            ]
          }).$view; // 返回组件的DOM元素
        }
      },
      data: []
    }
  ]
});

关键说明： #

• 利用type.template函数，为每个列表项生成一个包含label和button的Webix布局
• 按钮的点击事件直接绑定到当前项的删除逻辑，不用依赖DOM属性
• 这种方式的UI风格和Webix原生组件完全统一，但每个列表项都是独立组件，内存占用会略高于纯HTML模板

额外小提示： #

如果需要持久化已添加的字体项，可以在add和remove方法后加上本地存储（比如localStorage）的逻辑，刷新页面后数据不会丢失。

内容的提问来源于stack exchange，提问作者Silas M