javascript - 如何使用 jqxListbox 将项目添加到组中

Question

我正在尝试将项目添加到 jqxListbox 中的组中，但是在添加时使用组属性似乎不起作用。我读过 the relevant api ，上面写着 group - determines the item's group。

$(document).ready(function() {
  var source = [{
    label: "Peppermint Hot Chocolate",
    value: "phc",
    group: "First group"
  }, {
    label: "Salted Caramel Hot Chocolate",
    value: "schc",
    group: "Second group"
  }, {
    label: "White Hot Chocolate",
    value: "whc",
    group: "Third group"
  }];

  $("#drinks").jqxListBox({
    width: 300,
    height: 300,
    source: source
  });

  $("#add_item").click(function() {
    $("#drinks").jqxListBox('addItem', {
      label: 'Regular Hot Chocolate',
      value: 'rhc',
      group: 'Second group'
    });
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />

<button id="add_item">Add item</button>
<div id="drinks"></div>

我试图让新项目进入第二组，而不是在没有组的情况下直接附加到列表中。我可以尝试什么？

我找到了 this ，所以 addItem 不在窗口内，如何使用 insertItem 将其插入到正确的组中？ (假设该组尚不存在)

Answer 1

所以我通过更改源数据然后刷新使其工作:

source.push({ label: 'Regular Hot Chocolate', value: 'rhc', group :'Second group'});              
$("#drinks").jqxListBox('refresh', true);

问题示例:

$(document).ready(function() {
  var source = [{
    label: "Peppermint Hot Chocolate",
    value: "phc",
    group: "First group"
  }, {
    label: "Salted Caramel Hot Chocolate",
    value: "schc",
    group: "Second group"
  }, {
    label: "White Hot Chocolate",
    value: "whc",
    group: "Third group"
  }];

  $("#drinks").jqxListBox({
    width: 300,
    height: 300,
    source: source
  });

  $("#add_item").click(function() {
    source.push({ label: 'Regular Hot Chocolate', value: 'rhc', group :'Second group'});			  
    $("#drinks").jqxListBox('refresh', true);
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />

<button id="add_item">Add item</button>
<div id="drinks"></div>