laravel - 在 List.js 中使用输入字段而不是 td、h3、o 值

Question

在 List.js 站点上，他们展示了如何使用表格，甚至在http://www.listjs.com/examples/table上提供了一个示例。

<tr>
    <td class="name">Jonny Stromberg</td>
    <td class="born">1986</td>
</tr>

但是，我想改用输入值。

<tr>
    <input class="name" value="Jonny Stromberg">
    <input class="born" value="1986">
</tr>

结果出乎意料，输入值呈现为空。但是，最终目标是为输入值命名并在会话中保存列/行。有没有人在同一条船上？

Answer 1

尝试将其包装<input>在<td></td>标签中。您已正确设置value标签<inputs>，因此它们应该正确填充。

像这样的东西对我来说很好：

<table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td><input class="name" value="Jonny Stromberg"></td>
        <td><input class="born" value="1986"></td>
      </tr>
      <tr>
        <td><input class="name" value="Jonas Arnklint"></td>
        <td><input class="born" value="1985"></td>
      </tr>
      <tr>
        <td><input class="name" value="Martina Elm"></td>
        <td><input class="born" value="1986"></td>
      </tr>
      <tr>
        <td><input class="name" value="Gustaf Lindqvist"></td>
        <td><input class="born" value="1983"></td>
      </tr>
    </tbody>
</table>

JSFiddle - https://jsfiddle.net/oLbey91h/1/

Answer 2

我能够使用输入字段并填充 value 属性来实现所需的结果。这是一个 Pastebin：http://pastebin.com/dEfjdNCi。

请注意，在“选项”中，类名指向属性“值”。

<div id="users">
    <table>
        <!-- IMPORTANT, class="list" have to be at tbody -->
        <tbody class="list">
        <tr>
            <td style="display:none;"><input class="id" type="hidden"></td>
            <td><input class="name"></td>
            <td><input class="born"></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function () {
        var options = {
            valueNames: [
                {attr: 'value', name: 'id'},
                {attr: 'value', name: 'name'},
                {attr: 'value', name: 'born'},
            ]
        };
</script>