带有 Footable 的 KnockoutJS 可编辑表答案

【问题标题】：Editable Tables with KnockoutJS with Footable带有 Footable 的 KnockoutJS 可编辑表
【发布时间】：2014-12-03 20:50:17
【问题描述】：

我所在的部门已决定使用 Footable 在现有 Web 框架内提供响应式网格布局。一个增加的想法是使网格可编辑，我已经设法使用 KnockoutJS 来实现这一点。尽管尝试在隐藏的字段行中绑定输入字段时，我发现了一个有趣的影响。

如果我使用元素显示我的行数据的只读视图，则剔除绑定工作正常，并且当我按 + 符号扩展行时所有行都显示数据，但如果我用 an 替换标签，则文本框为空.脏标志也不响应更改。

设置为显示在主行中的任何字段都显示值正常并在编辑时触发脏标志，尽管如果我缩小浏览器窗口，它们会变为空白。

鉴于普通标签元素在脚注的第二行中没有问题绑定，任何人都可以提出为什么当它是输入时绑定会失败？我不知道是淘汰赛还是足球赛。

谢谢，

史蒂夫

【问题讨论】：

标签： html knockout.js

【解决方案1】：

[Footable 现在从 2.0.3 开始支持它]

Footable 本身不能正确支持表单输入元素。在我们的项目中，我们有多个需要编辑的页面，我已经对脚注代码进行了更改以启用编辑。您可以尝试以下内容，其中还包括文档：

https://github.com/bradvin/FooTable/pull/285

这个想法是为每个 td 创建一个具有唯一 id 的数据变量，并将其绑定到行及其详细信息，并根据可见性将内容从行分离到详细信息，反之亦然。

行

<tr class="footable-detail-show" style="display: table-row;">
    ....
    <td style="display: none;" data-bind-name="bind-1413864326707-4"></td>
    ....
</tr>

详情

<tr class="footable-row-detail">
    ....
        <div class="footable-row-detail-value" data-bind-value="bind-1413864326707-4">
            <input id="abc" type="text" value="200">
        </div>
    .....
</tr>

为了让它工作，它期望在表包含所有数据之后初始化footable（当data-editable =“true”时不需要）并且所做的任何更改都严格基于say id或元素选择器的输入元素和不基于 td 选择器。例如，对#abc 的更改被保留，但如果您对<td style="display: none;" data-bind-name="bind-1413864326707-4"> 进行更改，它们就会丢失。

在http://jsfiddle.net/habeebhassan/f8L8jt6p/查看演示

【讨论】：

嗯，谢谢。最后，我使用了一个模式弹出窗口来允许编辑行。当我使用 KnockoutJS 时有点混乱，并希望复制底层的 rowdata 以允许一个取消按钮，并且可以轻松放弃弹出窗口上的更改。但最终，我们的业务组确实想要一个可编辑的网格。我会看看这个最新版本。再次感谢
嗨，我刚刚试用了那个版本，但注意到一些奇怪的行为。我有一个标记为
在jsfiddle.net/habeebhassan/f8L8jt6p 上查看此演示。可能是您在将视图模型绑定到表之前正在初始化footable。如果要动态附加任何新代码，还需要触发 footable redraw 事件。
嘿，有一个错误请检查新代码
我刚刚发现的一个有趣的视觉问题是，如果您使用 class="form-control" （引导程序类）设置其他元素，那么输入将出现在 + footable-toggle 按钮下方，不在旁边。我可以找个时间看一下，但如果你知道你的头顶（之前已经通过代码），我想我会提到它。