无法在KendoUI上选择树形视图。

Question

我需要一个关于KendoUI Treeview的小帮助。我正在研究KendoUI Treeview代码。这里有FactorTypes作为父类，Factors作为子类。因此，如果我选择了FactorType，那么该FactorType下面的所有Factors都会被选中。而我把All作为FactorTypes的父节点，通过选择All复选框，所有FactorTypes中的所有Factors都会被选中。

然而，我有一个情况，我可以使用All复选框，并且第一个FactorType工作正常，如果我使用第二个或后续的FactorTypes在选择时，它们就会按照预期工作。以下是代码和截图。

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

这里是第一个FactorType选择，它选择了FactorType下面的所有Factor。

而在第二次选择FactorType时，因子没有被选择。这就是问题所在。我想让它像第一个FactorType选择一样工作。

任何帮助都是感激的。请留在家里，注意安全

我在原帖中添加更多信息。就像我可以修改代码到这篇文章中的例子一样 https:/demos.telerik.comkendo-uitreeviewcheckboxes。

但说到这里我需要从数据源中获取数据，我可以通过其余服务来获取。我可以在cfc中做到这一点，我需要在FactorTypes和Factors之间建立父子关系，比如和数组。我试过了，但它是不工作的。这里是代码。

<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.comgist1b343d0997dcad33583e813afdff68b1acf2018?主题=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.comkendo-uitreeviewcheckboxes。

我修改了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>
            ]
        }]
    });

这样做非常好。