шаблон сетки пользовательского интерфейса kendo else if

ProgramBox

шаблон сетки пользовательского интерфейса kendo else if

Post author:admin
Запись опубликована:21 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #kendo-ui #kendo-grid

#javascript #jquery ( jquery ) #кендо-пользовательский интерфейс #kendo-grid #jquery #kendo-ui

Вопрос:

Следующий код не работает. Кто-нибудь может помочь мне написать и else if сформулировать здесь условия?

    function getMyColumns() {
     return [{
       field: "xxx",
       title: "1st",
       width: "75px",
     }, {
       field: "ChoiceCode",
       title: "2nd",
       width: "75px",
       template: "#if(ChoiceCode == null) {# #} else If(mychoice == ChoiceCode) {#"                                  
                                    "{ #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}"  
                                "else {# <span>#=secondChoiceCode#</span> #}"  
                            "#}#"
            }, {
    }];
}

В поле выбора, если оно равно null, я хочу отобразить пустую строку, и если у нее есть значение, и оно соответствует моему выбору, я хочу выделить эту ячейку зеленым цветом, если она не соответствует моему выбору, не выделяйте ее.

Ответ №1:

Если вы разместите свой шаблон встроенным, это будет так:

 #if(ChoiceCode == null) {# #} else If(mychoice == ChoiceCode) {# { #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}else {# <span>#=secondChoiceCode#</span> #} #}#

Или еще лучше (намеренно без # ):

 if(ChoiceCode == null) { } 
else If(mychoice == ChoiceCode) {
    { <div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>
}
else { 
    <span>#=secondChoiceCode#</span> } 
}

Заметили что-то не так? Я думаю, что это должно быть так:

 if(ChoiceCode == null) { } 
else If(mychoice == ChoiceCode) {
    <div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>
}
else { 
    <span>#=secondChoiceCode#</span>
}

Встроенная версия:

 # if(ChoiceCode == null) { # # } else if (mychoice == ChoiceCode) { #<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div> # } else { # <span>#=secondChoiceCode#</span> # } #

Версия кода:

 template: "#if(ChoiceCode == null) {# #} else if(mychoice == ChoiceCode) {#"                                  
          "<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}"  
          "else {# <span>#=secondChoiceCode#</span> #}#";

1. спасибо вам ооочень большое, отличное объяснение .. меня всегда смущало, как и куда помещать #

2. @bansi когда вы запутались, напишите это так, как если бы это был чистый код, затем добавьте хэши, а затем добавьте его в код, как я сделал выше, это становится легче понять.

Ответ №2:

Лично я бы изменил это, чтобы его было немного легче читать и изменять.

вместо того, чтобы размещать здесь всю логику, извлеките ее в функцию, чтобы ваша команда шаблона выглядела так:

 template: "#=highlighter(data.ChoiceCode, data.mychoice, data.secondChoiceCode) #"

функция написана следующим образом:

          function(choiceCode, myChoice, secondChoiceCode) {
   var retString = '';
   if (choiceCode === null || choiceCode === undefined) {
     retString = '';
   } else if (myChoice === choiceCode) {
     resString = '<div style="background-color:lightgreen;"><span>'  
       choiceCode   '</span></div>'
   } else {
     retString = '<span>'   secondChoiceCode   '</span>';
   }

   return retString;
 }

Затем вы можете избавиться от необходимости запоминать, куда должны идти различные фигурные скобки, и избегать их в вашем шаблоне.

Очевидно, измените функцию так, как вам нужно, чтобы возвращать данные, но это основано на том, что я мог видеть в предоставленном вами исходном коде. Я предполагаю, что переменные являются свойствами в вашей модели привязки для каждой строки.

РЕДАКТИРОВАТЬ Я добавил следующую демонстрацию, которая, надеюсь, поможет: http://dojo.telerik.com/ejaqU/2

1. спасибо за ответ. Как я упоминал в своем предыдущем комментарии, я уже пробовал, что он выдает «Неперехваченную ошибку ссылки: маркер не определен

2. Я использую AngularJS

3. хорошо, я нашел ошибку в своем коде, которую я исправил. Вот демонстрация, чтобы показать вам Angular (что, я должен сказать, не является моей сильной стороной) dojo.telerik.com/ejaqU/2

4. Это помогло мне с нагрузками — интеграция Angular бесполезна в Kendo, так что это сработало для меня!

Ответ №3:

возможна опечатка

} else If(mychoice == ChoiceCode) {

должно быть

} else if(mychoice == ChoiceCode) {

Ответ №4:

В ваших шаблонах есть несколько скобок extara ({)

Попробуйте это

 function getMyColumns() {
        return [{
                {
                field: "xxx",
                title: "1st",
                width: "75px",
            }, {
                field: "ChoiceCode",
                title: "2nd",
                width: "75px",
                template: "#if(ChoiceCode == null) {# #} else if(mychoice == ChoiceCode) {#"  
                        "<div style='background-color:lightgreen'><span>#=ChoiceCode#</span></div>#}"  
                        "else {# <span>#=secondChoiceCode#</span> #}#",
            }, {
            }];
    }