如何使fancytree表格呈现jQuery移动控件

在fancytree表中，数据角色呈现为“flipswitch”的复选框仅作为普通复选框显示。在fancytree表格之外使用时，可以根据需要进行相同的控制。如何使fancytree表格呈现jQuery移动控件

由于这是我的第一篇文章，我无法插入一张图片，以清晰的方式解释问题。请参阅链接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'>"); 
}

我应该怎么做才能让花式树正确显示开关？感谢您的帮助。

来源

2015-09-28 Ravindran Ramamurthy

也许你可以创建一个jsFiddle来重现这个问题？ – ezanker

我试着在下面回答你的问题，但作为一个方面说明：你似乎为每一行都分配了相同的'id ='switch''，这在HTML中是不允许的。 – mar10

谢谢。我将更改id，使其表示花哨树中当前行的数据，并可能使用节点的关键元素 –

（我没有使用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(); 
},

来源

2015-09-28 20:44:53 mar10

哇。完美的答案。像魅力一样工作。非常感谢。 –

如何使fancytree表格呈现jQuery移动控件

回答

相关问题