Question

在fancytree表格中，使用数据角色呈现的复选框为＆＃39; flipswitch＆＃39;仅显示为普通复选框。在fancytree表外部使用时，可以根据需要显示相同的控件。

由于这是我的第一篇文章，我无法插入能够以清晰的方式解释问题的图片。请参阅链接here。在fancytree外面（在顶部），翻转开关正确显示在fancytree内，对于项目DO | On / Off，它显示为普通复选框。还添加了一个滑块，并注意控件在fancytree表外部和内部的呈现方式的差异。

用于渲染fancytree列的Javascript代码也在下面给出。

renderColumns: function(event, data) {
  var node = data.node;
  $tdList = $(node.tr).find(">td");
  $tdList.eq(1).html(
       "<input type='checkbox' data-role='flipswitch' name='switch' id='switch'>" );
}

如何使花式树正确显示开关？感谢您的帮助。

Answer 1

（到目前为止我还没有使用过jQuery Mobile，所以我只是在这里猜测，主要基于jQuery Mobile: Markup Enhancement of dynamically added content。）

Flipswitch widget和其他插件是围绕现有的html标记创建的。这称为增强，并在页面加载时由jQuery Mobile库自动完成。

由于Fancytree节点（以及<input>标记）是在后动态创建的，因此您需要明确触发该增强。
解释了一些方法here，而enhanceWithin()可能是另一种方法。

这样做的好地方可能是Fancytree renderColumns事件。

注意：以下代码未经过测试;如果它适合你，请告诉我。

renderColumns: function(event, data) {
    var node = data.node;
    $tdList = $(node.tr).find(">td");
    $tdList.eq(1)
        .html("<input type='checkbox' data-role='flipswitch' name='switch'>")
        .enhanceWithin();
},

如何使fancytree表呈现jQuery-mobile控件

1 个答案: