如何使花式树表呈现jquery移动控件

How to make fancytree table render jQuery-mobile control

本文关键字：jquery 移动控件 何使花      更新时间：2023-09-26

在fancytree表中，data-role呈现为'flipswitch'的复选框仅显示为普通复选框。在fanytree表外使用时，显示相同的控件

由于这是我的第一篇文章，我无法插入一张图片来清楚地解释这个问题。请参考这里的链接。在fanytree外部(顶部)，翻转开关正确显示，而在fanytree内部，针对DO| on/Off项，它显示为正常复选框。还添加了一个滑块，并注意控件在花式树表外部和内部的呈现方式的差异。

下面还提供了用于呈现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'>" );
}

我该怎么做才能使花式树正确显示开关?谢谢你的帮助。

(到目前为止我还没有使用过jQuery Mobile，所以我在这里只是猜测，主要基于jQuery Mobile:动态添加内容的标记增强)

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

由于Fancytree节点(以及您的<input>标记)是在之后动态创建的，因此您需要显式地触发该增强。
这里解释了一些方法，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();
},
相关文章：