如何使用jqxListbox

Question

我正在尝试将项目添加到jqxListbox中的组中，但在添加时使用group属性似乎不起作用。我看过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);

问题的例子：

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;