Невозможно выбрать в Treeview на KendoUI - PullRequest
Новая
       56

Невозможно выбрать в Treeview на KendoUI

1 голос
/ 27 апреля 2020

Мне нужна небольшая помощь по KendoUI Treeview. Я работаю над KendoUI Treeview Code. Здесь идет FactorTypes как родитель и Factors как дети. Поэтому, если я выбрал FactorType, будут выбраны все факторы под этим конкретным FactorType. И у меня есть Все в качестве родительского узла для FactorTypes, установив флажок Все, будут выбраны все Факторы во всех Факторных типах.

Однако у меня есть ситуация, когда я могу использовать флажок Все, и First 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);
            }
        }
    };

Вот выбор First FactorType, который выбирает все факторы под FactorType First FactorType Selection

В то время как при втором выборе FactorType факторы не выбираются. Это проблема. Я хочу, чтобы это работало как First FactorType Selection. Second FactorType Selection

Любая помощь приветствуется. STAY HOME STAY SAFE!

Я добавляю больше информации в исходное сообщение. Как я могу изменить код к тому же самому в примере, приведенном здесь в этой статье https://demos.telerik.com/kendo-ui/treeview/checkboxes

Но при этом мне нужно получить данные из источника данных, которые я могу получить через услуги отдыха. Я могу сделать это в cf c, который мне нужен, чтобы установить sh родительско-дочерние отношения между FactorTypes и Factors like и массивом. Я пробовал это, но это не работает. Вот код для этого. 

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

Ответы [ 2 ]

2 голосов
/ 27 апреля 2020

Это выглядит неправильно: 

<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 из l oop.

. Использование тега <cfset> для объекта запроса, как вы пытаетесь сделать, выдает ошибку. Вы можете увидеть здесь, https://trycf.com/gist/1b343d0997dcad33583e813afdff68b1/acf2018?theme=monokai. Запустите код. Затем раскомментируйте либо команду l oop, либо одну команду 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>
1 голос
/ 28 апреля 2020

Да, я попробовал этот способ, который идентичен статье здесь.

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

Это работает отлично.

...