无法在 Kendo UI 的 Treeview 中进行选择

Question

我需要一些关于 KendoUI Treeview 的帮助。我正在研究 KendoUI Treeview 代码。这里有作为父级的 FactorTypes 和作为子级的 Factors。因此，如果我选择了 FactorType，那么该特定 FactorType 下的所有因素都将被选中。通过选中 All 复选框，我将 All 作为 FactorTypes 的父节点，所有 FactorTypes 中的所有因子都将被选中。

但是，如果我在选择时使用第二个或后续 FactorTypes，我可以使用 All 复选框，并且 First FactorType 工作正常，它们按预期工作。这是代码和截图。

HTML 代码：

<div class="form-group row">
  <label for="event_type_id" class="col-sm-2 col-form-label" style="font-weight:bold">
    Factor Types:
  </label>
  <div class="col-sm-10">
    <div id="treeview-section" class="header k-content">
      <ul id="treeview">
        <li data-expanded="true">
          <span class="k-sprite folder"></span>
          <input type="checkbox" name="select_all" class="k-checkbox" id="select_all" />
          <span class="k-sprite folder"></span>All
          <ul class="collapse" data-toggle="collapse" id="child_treeview">
            <cfloop query="FactorTypes">
              <li id="list_treeview" data-toggle="collapse" data-expanded="true">

                <input type="checkbox" name="factor_type_id" class="k-checkbox" id="factor_type_id" />

                <span class="k-sprite folder"></span>#FactorTypes.factor_type_name#

                <cfquery dbtype="query" name="ListOfFactors">
                  select * from Factors where factor_type_code = '#FactorTypes.factor_type_code#'
                </cfquery>

                <cfloop query="ListOfFactors">
                  <ul>
                    <li>
                      <input type="checkbox" name="factor_id" value="#ListOfFactors.factor_id#" class="k-checkbox" id="factor_id" />
                      <span class="k-sprite"></span>#ListOfFactors.factor_name#
                    </li>
                  </ul>
                </cfloop>
              </li>
            </cfloop>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

jQuery 代码：

$("#treeview").kendoTreeView({
        checkboxes: {checkChildren: true},
        check: onCheck
    });

    // show checked node IDs on datasource change
    function onCheck() {
        var checkedNodes = [], treeView = $("#treeview").data("kendoTreeView"), message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);
    };

    // function that gathers IDs of checked nodes
    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);
            }
        }
    };

这里是 First FactorType Selection，它选择了 FactorType 下的所有因子

而在第二个 FactorType 选择时，因子没有被选中。这就是问题所在。我希望它像 First FactorType Selection 一样工作。

感谢任何帮助。待在家里，保持安全！

我正在为原始帖子添加更多信息。就像我可以在本文的示例中将代码修改为相同https://demos.telerik.com/kendo-ui/treeview/checkboxes

但话虽如此，我需要从数据源中获取数据，这些数据可以通过其他服务获取。我可以在 cfc 中做到这一点，我需要在 FactorTypes 和 Factors like and array 之间建立父子关系。我试过了，但它不起作用。这是代码。

<cfcomponent rest="true">
    <cfheader name="Access-Control-Allow-Origin" value="mesdev.intranet.cnb"/>
    <cfheader name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE"/>
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type" />

    <cffunction name="FactorTypeTree" access="remote" returntype="string" returnformat="plain" httpmethod="GET">

        <cfinvoke component="e.qhse.sea.api.FactorType" method="FactorTypeTreeSelect" returnvariable="ftResult"></cfinvoke>

        <cfset aResults = arrayNew(1)>
        <cfloop query="ftResult">
            <cfset ftResult = structNew()>
            <cfset ftResult["factor_type_id"] = factor_type_id>
            <cfset ftResult["factor_type_name"] = factor_type_name>
            <cfset ftResult["factors"] = structNew()>
            <cfinvoke component="e.qhse.sea.api.Factor" method="FactorList" factor_type_id="#factor_type_id#" returnvariable="fResult"></cfinvoke>
            <cfloop query="fResult">
                <cfset fResult["factor_id"] = factor_id>
                <cfset fResult["factor_name"] = factor_name>
                <cfset arrayAppend(ftResult["factors"],fResult)>
            </cfloop>
            <cfset arrayAppend(aResults,ftResult)>
        </cfloop>
        <cfreturn SerializeJSON(aResults)>
    </cffunction>

</cfcomponent>

Answer 1

这看起来不对：

<cfinvoke component="e.qhse.sea.api.Factor" 
method="FactorList" factor_type_id="#factor_type_id#" 
returnvariable="fResult">
</cfinvoke>
<cfloop query="fResult">
<cfset fResult["factor_id"] = factor_id>
<cfset fResult["factor_name"] = factor_name>
<cfset arrayAppend(ftResult["factors"],fResult)>
</cfloop>

变量fResult 似乎是一个查询对象。它在循环的query attribute 中指定。

在查询对象上使用<cfset> 标记，正如您尝试做的那样，会引发错误。您可以在这里亲自查看，https://trycf.com/gist/1b343d0997dcad33583e813afdff68b1/acf2018?theme=monokai。运行代码。然后取消注释循环或单个 cfset 命令并再次运行它。

编辑从这里开始

你也有一些看起来像这样的代码：

<cfinvoke returnvariable = "ftResult">
<cfloop query = "ftResult">
<cfinvoke factor_type_id="#factor_type_id#" returnvariable="fResult">
<!--- fResult is also a query --->

如果没有看到数据源名称或 sql，就不可能说，但是，您可能正在做这样的事情：

<cfquery datasource = "fred" name = "q1">
select id 
from table1
</cfquery>

<cfloop query = "q1">

<cfquery datasource = "fred" name = "q2">
select id, name
from table2
where id = #id#
</cfquery>
more code
</cfloop>

如果是这样，充其量是低效的。它也可能导致其他问题。更好的方法是通过单个查询获取所有数据：

<cfquery datasource = "fred" name = "betterQuery">
select t1.id id, name
from table1 t1 join table2 t2 on t1.id = t2.id

</cfquery>

Answer 2

是的，我尝试过这种方式，这与这里的文章相同。

https://demos.telerik.com/kendo-ui/treeview/checkboxes

我更改了 HTML 代码，它是简单的 div 标签元素。

<div id="treeview-section" class="header k-content">
                    <div id="treeview">
                    </div>
                </div>

我像这样更改了数据的初始化。

$("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },
        dataSource: [{
            id: "select_all", text: "Select All", expanded: false, items: [
            <cfoutput query="FactorTypes">
                {id: "factor_type_id#factor_type_id#", text: "#FactorTypes.factor_type_name#", expanded: false, items: [

                <cfquery dbtype="query" name="ListOfFactors">
                    select * from Factors
                    where factor_type_code = '#FactorTypes.factor_type_code#'
                </cfquery>

                <cfloop query="ListOfFactors">
                    {id: "factor_id#ListOfFactors.factor_id#", text: "#ListOfFactors.factor_name#" },
                </cfloop>
                ]},
            </cfoutput>
            ]
        }]
    });

这工作得很好。