0

我有下拉菜单、复选框和按钮提交。首先，用户将在下拉列表中选择（工作位置）。其次，用户将选中复选框，然后提交数据。在这里，刷新后它应该会出现在之前选择的下拉列表和复选框中。但是，我没有得到它。这里有人有更好的解决方案吗？

JavaScript 下拉菜单

//dropdown position
    $("#dropdown").kendoDropDownList({
                  optionLabel: "- Select Position -",
                  dataTextField: "functionName",
                  dataValueField: "hrsPositionID",
                  dataSource: {
                    transport:{
                        read: {
                        url:  "../DesignationProgramTemplate/getData.php",
                        type: "POST",
                        data: function() {
                                return { 
                                    method: "getDropdown",
                                }
                            }
                        },
                    },
                  },
                  change: onChange
              }).data('kendoDropDownList');

dropdownlist = $("#dropdown").data("kendoDropDownList");

复选框树视图（剑道 UI）

homogeneous = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: serviceRoot,
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id : "ehorsProgramID",
                        hasChildren: false,
                        children : "items"
                    }
                },

                filter: { field: "module", operator: "startswith", value: "Accounting" }
            });

        $("#AccountingTree").kendoTreeView({
            check: onCheck,
            checkboxes: { checkChildren: true } ,
        //  select: onSelect,
            dataSource: homogeneous,
                dataBound: function(){
                    this.expand('.k-item');
                },
            dataTextField: ["module","groupname","ehorsProgramName"]
        });

提交按钮的 AJAX

//AJAX call for button
    $("#primaryTextButton").kendoButton();
    var button = $("#primaryTextButton").data("kendoButton");
    button.bind("click", function(e) {

    var test = $("#dropdown").val()

    $.ajax({
        url: "../DesignationProgramTemplate/getTemplate.php",
        type: "post",
            data: {'id':test,'progid':array},
                success: function () {
                // you will get response from your php page (what you echo or print)                 
                    kendo.alert('Success'); // alert notification
                    //refresh
                    //location.reload("http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php");
                },
        });
    });

用于检查复选框的 JavaScript

  function checkedNodeIds(nodes, checkedNodes) {
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].checked) {
      checkedNodes.push(nodes[i].id);
    }

    if (nodes[i].hasChildren) {
      checkedNodeIds(nodes[i].children.view(), checkedNodes);
    }
  }

}

var array = [];
function onCheck() {
  var checkedNodes  = [],treeView = $("#AccountingTree").data("kendoTreeView"),message;
  var checkedNodes2 = [],treeView2 = $("#AdminSystemTree").data("kendoTreeView"),message;
  var checkedNodes3 = [],treeView3 = $("#FnBTree").data("kendoTreeView"),message;
  var checkedNodes4 = [],treeView4 = $("#HumanResourceTree").data("kendoTreeView"),message;
  var checkedNodes5 = [],treeView5 = $("#InventoryManagementTree").data("kendoTreeView"),message;
  var checkedNodes6 = [],treeView6 = $("#SalesMarketingTree").data("kendoTreeView"),message;

  checkedNodeIds(treeView.dataSource.view(), checkedNodes);
  checkedNodeIds(treeView2.dataSource.view(), checkedNodes);
  checkedNodeIds(treeView3.dataSource.view(), checkedNodes);
  checkedNodeIds(treeView4.dataSource.view(), checkedNodes);
  checkedNodeIds(treeView5.dataSource.view(), checkedNodes);
  checkedNodeIds(treeView6.dataSource.view(), checkedNodes);

  if (checkedNodes.length > 0) {

    message = checkedNodes.filter(x => !!x).join(",");

    array = checkedNodes.filter(x => !!x);
  } else {
    message = "No nodes checked.";
  }

}

输出

用于访问 dataItem 的 JavaScript

// cookies
  var values = ["LA1","LA6","LA12"]; //array nnti array ni la localstorage/cookies

    var setTreeViewValues = function(values) {
    var tv = $("#AccountingTree").data("kendoTreeView");

    document.write(JSON.stringify(tv));

    tv.forEach(function(dataItem) {   
    alert("test");
       if (dataItem.hasChildren) {
       var childItems = dataItem.children.data();
       //document.write(JSON.stringify(childItems[0].items[0].programID)); 
    }
        // document.write(JSON.stringify(dataItem.items)); 
      if (values.indexOf(childItems[0].items[0].programID) > -1) { 

        dataItem.set("checked", true);
      }
    });
  };
  setTreeViewValues(values);
  console.log(datasource.data()[0].hasChildren);
// end cookies
4

1 回答 1

0

因此，在不知道如何将现有值绑定到页面的情况下，我假设您将调用page state页面加载中的某处。

所以我准备了一个道场，它显示了设置checked项目状态的两种不同方式。

https://dojo.telerik.com/EhaMIDAt/8

1.在DataSource级别设置

因此，在设置数据源时，您可以向您的集合添加一个名为checkedthis 的额外属性，然后在加载时设置项目或子项目的选中值。使用我在道场中的示例：

{
  id: 9,
  text: "Reports",
  expanded: true,
  spriteCssClass: "folder",
  items: [{
      id: 10,
      text: "February.pdf",
      spriteCssClass: "pdf"
    },
    {
      id: 11,
      text: "March.pdf",
      spriteCssClass: "pdf",
      checked: true
    },
    {
      id: 12,
      text: "April.pdf",
      spriteCssClass: "pdf"
    }
  ]
}

这将为您将选中状态设置为 true，并将复选框显示为选中状态。

2. 加载所有数据源后手动设置值。

因此，我通过单击按钮完成了此操作，但如果需要，可以在就绪状态或其他触发器轻松完成此操作。单击此处的按钮将在树中找到带有文本的节点，Research.pdf并为您将其设置为选中或未选中状态。

  $('#checked').bind('click', () => {
    var box = $("#treeview").data("kendoTreeView").findByText('Research.pdf').find('input[type="checkbox"]');
    box.prop('checked', !box.is(':checked'));
  });

再次从上面的 dojo 链接中获取样本。希望这能让您开始根据您的特定要求设置值。

当您加载树视图的数据源时，我可能会设置值检查状态。

于 2019-07-31T09:25:40.887 回答