Question

我想实现显示两个组的功能，一个用于工作日（Mon -fri），另一个用于周末（Sat-sun）。

并且需要在两个组中选择all的选项。还需要显示组的选定值。我该怎么用。

<script>
    var Days = [{
        "key": "Weekdays",
        "items": ["Mon", "Tue", "Wed", "Thu", "Fri"]
    }, {
        "key": "Weekend",
        "items": ["Sat", "Sun"]
    }
    ];
    $(function () {
        $("#simpleList").dxList({
            dataSource: Days,
            height: "100%",
            grouped: true,
            selectionMode: "all",
            showSelectionControls: true,

            collapsibleGroups: false,

            onSelectionChanged: function (data) {
               // $("#selectedItemKeys").text(listWidget.option("selectedItemKeys").join(", "));
            },
            groupTemplate: function (data) {
                return $(" <input type='checkbox' id='myCheck' onclick='myFunction(this)' data-key="+data.key+"> <div>" + data.key + "</div>");

            }
        });
        $("#checked").dxCheckBox({
            value: true
        });


    });


    function myFunction(obj) {

        // If the checkbox is checked, display the output text
        if ($(obj).prop('checked')  == true) {
            if ($(obj).attr("data-key") == 'Weekdays') {
                var newarray = $("#simpleList").dxList("instance").option("selectedItems");
                newarray.includes("Mon", "Tue", "Wed", "Thu", "Fri");

                $("#simpleList").dxList("instance").option("selectedItems", ["Mon", "Tue", "Wed", "Thu", "Fri"]);
            }
            if ($(obj).attr("data-key") == 'Weekend'){
                $("#simpleList").dxList("instance").option("selectedItems", ["Sat", "Sun"]);
            }
        } else {
            $("#simpleList").dxList("instance").option("selectedItems", []); 
        }
    }
</script>

Answer 1

我认为你要找的是dxTagBox。它允许批量选择，这基本上是您在周一至周五或周末选择时所需的。请查看下面的代码，了解一般情况。

$(function(){
  var days = new DevExpress.data.DataSource({
        store: [
          { id: 1, group: 'Weekdays', day: 'Moday' },
          { id: 2, group: 'Weekdays', day: 'Thursday' },
          { id: 3, group: 'Weekdays', day: 'Wednesday' },
          { id: 4, group: 'Weekdays', day: 'Thursday' },
          { id: 5, group: 'Weekdays', day: 'Friday' },
          { id: 6, group: 'Weekend', day: 'Saturday' },
          { id: 7, group: 'Weekend', day: 'Sunday' }
        ],
        key: "id",
        group: "group"
    });

  var days = $("#widget").dxTagBox({
    "dataSource": days,
    "valueExpr": "id",
    "displayExpr": "day",
    grouped: true,
    multiline: true,
    showSelectionControls: true,
    groupTemplate: function(groupData, groupIndex, groupElement){
      groupElement.empty();
      groupElement.append("<div id='" +  groupData.key +"'></div>");
      $("#"+groupData.key).dxCheckBox({
        name: groupData.key,
        text: groupData.key,
        onValueChanged: function(e){
          if(e.component.option("name") == "Weekdays")
            toggleWeekdays(e.value);
          else if(e.component.option("name") == "Weekend")
            toggleWeekends(e.value);
        }
      });
    },
  }).dxTagBox("instance");

  function toggleWeekdays(value){
    var dayValues = [];
    if(value){
      if($("#Weekend").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(1,2,3,4,5,6,7);
      else
        dayValues.push(1,2,3,4,5);
    }
    else{
      if($("#Weekend").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(6,7);
    }
    days.option("value", dayValues);
  }  

  function toggleWeekends(value){
    var dayValues = [];
    if(value){
      if($("#Weekdays").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(1,2,3,4,5,6,7);
      else
        dayValues.push(1,2,3,4,5);
    }
    else{
      if($("#Weekdays").dxCheckBox().dxCheckBox("instance").option("value"))
        dayValues.push(1,2,3,4,5);
    }
    days.option("value", dayValues);
  } 
});

我想实现显示两个组的功能

1 个答案: