2

我在带有复选框的 html 列表上使用List js，并尝试用值对象填充它，如下所示：

var values = [
  {
    id: 12,
    action: 'a',
...
  },
  {
    id: 13,
    action: 'b',
...
  }
];

HTML：

<div id="users">
  <ul class="list">
    <li>
      <span class="id"></span>
      <span class="action"></span >
      <input class="required" type="checkbox">Required
    </li>
  </ul>

</div>

并初始化为：

new List('users', options, values);

如何让它发挥作用？

只是为了澄清我错过了如何完成值对象以及如何定义选项对象，以便我可以最初初始化复选框的检查状态。

4

1 回答 1

1

创建一个options变量并添加{ name: 'required', attr: 'checked'}具有其他属性名称的对象。将options作为参数传递给创建的新列表。

更新：

根据您的评论，我认为不可能使用 list.js，如果您愿意将 Jquery 添加到您的应用程序中，这是您可以合并的一个小技巧。

创建列表后添加$("input[checked='false']").prop('checked', false);到您的代码中。

注意：您想在填充整个列表后异步添加上述行，以防您处理大量数据。

演示 -

var options = {
  valueNames: ['id', 'action', {
    name: 'required',
    attr: 'checked'
  }],
  item: 'user-item'
};

var values = [{
    id: 12,
    action: 'a',
    required: false
  },
  {
    id: 13,
    action: 'b',
    required: true
  }
];

var userList = new List('user-list', options, values);

//Once the entire list is populated, set all checked='false' checkboxes to unchecked state.
$("input[checked='false']").prop('checked', false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="user-list">
  <ul class="list"></ul>
</div>

<div style="display:none;">
  <!-- A template element is needed when list is empty, TODO: needs a better solution -->
  <li id="user-item">
    <span class="id"></span>
    <span class="action"></span >
    <input class="required" type="checkbox" />Required
  </li>
</div>

于 2017-08-21T12:46:23.233 回答