Question

我在带有复选框的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);

如何让它发挥作用？

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

Answer 1

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

更新：

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

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

注意：如果您正在处理大量数据，则需要在填充整个列表后异步添加上述行。

演示 -

＆＃13;

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);

＆＃13;

<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>

＆＃13;

列出带有复选框的js

1 个答案: