如何制作fancytree table render jQuery-移动控制

Question

在 fancytree table 中，数据角色呈现为 'flipswitch' 的复选框仅显示为普通复选框。在 fancytree 外部使用相同的控件 table 根据需要显示。

由于这是我的第一个 post，我无法插入可以清楚地解释问题的图片。请参考linkhere。在 fancytree 外部（顶部），翻转开关正确显示，在 fancytree 内部，针对项目 DO|On/Off 它显示为普通复选框。还添加了一个滑块，并注意控件在 fancytree 外部和内部呈现方式的差异 table。

Javascript 用于呈现 fancytree 列的代码也在下面给出。

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 移动库在页面加载时自动完成。

由于 Fancytree 节点（以及您的 <input> 标记）是动态创建的之后，您需要显式触发该增强。
解释了一些方法 here, and 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 table render jQuery-移动控制

How to make fancytree table render jQuery-mobile control

javascript

jquery-mobile

html-table

fancytree