Layui穿梭框组件中HTML代码渲染问题解析

问题背景

在使用Layui的transfer穿梭框组件时，开发者发现parseData回调函数中的title属性无法正确渲染HTML代码，只能输出纯文本字符串。这限制了开发者对穿梭框项的自定义显示需求。

问题分析

Layui的transfer组件在设计上出于安全考虑，默认会对HTML代码进行转义处理，防止XSS攻击。因此当开发者尝试在title属性中插入HTML标签时，这些标签会被当作普通文本显示，而不会被浏览器解析为DOM元素。

解决方案

方法一：使用text属性替代

虽然title属性不支持HTML，但可以通过text属性来实现类似效果：

transfer.render({
  parseData: function(res) {
    return {
      value: res.value,
      title: res.title, // 保持简洁
      text: '<div class="custom-item">'+res.title+'</div>', // 使用text属性
      disabled: res.disabled,
      checked: res.checked
    };
  }
});

方法二：自定义模板

对于更复杂的需求，可以结合Layui的模板功能：

layui.use(['transfer', 'laytpl'], function(){
  var transfer = layui.transfer;
  var laytpl = layui.laytpl;
  
  var getTpl = function(data){
    var tpl = '<div class="custom-item">{{ d.title }}</div>';
    var html = '';
    laytpl(tpl).render(data, function(str){
      html = str;
    });
    return html;
  };
  
  transfer.render({
    parseData: function(res) {
      return {
        value: res.value,
        title: res.title,
        text: getTpl(res), // 使用模板渲染
        disabled: res.disabled,
        checked: res.checked
      };
    }
  });
});

方法三：后期DOM操作

如果必须在DOM中插入HTML，可以在transfer渲染完成后操作DOM：

transfer.render({
  done: function(obj, index){
    // 渲染完成后操作DOM
    $('.layui-transfer-box .layui-transfer-data li').each(function(){
      var title = $(this).find('.layui-transfer-ul li').attr('title');
      $(this).find('.layui-transfer-ul li').html('<div class="custom">'+title+'</div>');
    });
  }
});

最佳实践建议

1. 简单需求：优先使用text属性实现基础HTML渲染
2. 复杂需求：结合Layui模板引擎或后期DOM操作
3. 性能考虑：大数据量时避免频繁DOM操作
4. 安全性：确保动态HTML内容的安全性，防止XSS攻击

总结

Layui的transfer组件虽然默认不支持在title中直接渲染HTML，但通过合理使用text属性、模板引擎或后期DOM操作，开发者仍然可以实现丰富的自定义显示效果。理解组件设计原理后，可以更灵活地解决实际开发中的各种需求。