ausblenden Bootstrap-Zeile Spalte basierend auf den Daten

Question

ich ein jquery Kendo Startreihe Vorlage leite, wo ich einige Inhalte mit images.Below zeige, ist der Code:

<table id="grid" style="width:100%"> 
 
       <colgroup> 
 
        <col class="photo" /> 
 
        <col class="details" /> 
 
        <col /> 
 
       </colgroup> 
 
       <thead style="display:none"> 
 
        <tr> 
 

 
         <th> 
 
          Details 
 
         </th> 
 

 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr> 
 
         <td colspan="3"></td> 
 
        </tr> 
 
       </tbody> 
 
      </table> 
 
      <script id="rowTemplate" type="text/x-kendo-tmpl"> 
 
       <tr> 
 
        <td style="width:30%"> 
 
        div class="row"> 
 
          <div id="dvImage" class="col-sm-4" style="width:118px"> 
 
           #= imagelink # 
 
          </div> 
 
          <div class="col-sm-8" style="width:400px"> 
 
           <span class="name" style="font-size:14px; color:green">#: Link #</span> 
 
           
 
          </div> 
 
         </div> 
 
        </td> 
 
       </tr> 
 
      </script> 
 
      <style> 
 
       .name { 
 
        display: block; 
 
        font-size: 1.3em; 
 
       } 
 

 
       .k-grid-header .k-header { 
 
        padding: 0px 20px; 
 
       } 
 

 
       .k-grid-content { 
 
        overflow-y: auto; 
 
       } 
 

 
       .k-grid tr td { 
 
        background: white !important; 
 
        border: 0 !important; 
 
        border-color: transparent; 
 
       } 
 

 
       .k pager-wrap { 
 
        border-width: 1px !important; 
 
        border-color: #ccc; 
 
       } 
 

 
       .k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-filter-row > th, .k-editable-area, .k-separator, .k-colorpicker .k-i-arrow-s, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-treemap-tile, .k-calendar th, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-toolbar, .k-tooltip, .k-button-group .k-tool, .k-upload-files { 
 
        border-color: transparent; 
 
       } 
 
       .col-md-2 { 
 
        width:118px 
 
       } 
 
       .col-md-3 { 
 
        width:25% 
 
       } 
 

 
      </style>

In der obigen Code Ich habe Bild und Beschreibung, die ich zeige, aber für einige der Zeilen habe ich kein Bild, aber es enthält immer noch das Leerzeichen. Also hier brauche ich, dass, wenn Bild für bestimmte Zeile null ist, dann sollte diese Bildspalte ausblenden. Ich habe es versucht, aber kein Glück. Unten ist der Code:

$("#grid").kendoGrid({ 
 
      autoBind: false, 
 
      dataSource: { 
 
       transport: { 
 
        read: { 
 
         url: "/Home/GetSearchData", 
 
         type: "POST", 
 
         contentType: "application/json; charset=utf-8", 
 
         dataType: "json", 
 
         data: { searchTerm: $('[id*=hdnHomeSearch]').val() } 
 
        }, 
 
        parameterMap: function (data, operation) { 
 
         return kendo.stringify(data); 
 
        } 
 
       }, 
 
       pageSize: 10, 
 
       schema: { 
 
        parse: function (data) { 
 
         debugger; 
 
         var items = []; 
 
         var chkCorrectVal = 0; 
 
         var context = $('#dvImage'); 
 
         for (var i = 0; i < data.data.length; i++) { 
 
          if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) { 
 
           $("#spnSR")[i].innerHTML = "<b>" + "Get results for this text: " + "</b>" + data.data[i].CorrectValue; 
 
           $("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " + "</b>" + data.data[i].SearchValue; 
 
           chkCorrectVal = 1; 
 
          } 
 
          else { 
 
           if (chkCorrectVal == 0) { 
 
            $("#spnSR").hide(); 
 
            $("#spnSV").hide(); 
 
           } 
 
          } 
 
          if (!data.data[i].imagelink) { 
 
           var getContext = $(context[i]); 
 
           data.data[i].imagelink = ""; 
 
           $(context[i]).addClass('hidden'); 
 
          } 
 
          
 
         } 
 
         var product = { 
 
          
 
          data: data.data, 
 
          total: data.total 
 
         }; 
 
         items.push(product); 
 
         return (items[0].data); 
 
        }, 
 

 
       } 
 
      }, 
 
      dataBound: function() { 
 
       DisplayNoResultFound($("#grid")); 
 
      }, 
 
      serverPaging: true, 
 

 
      pageable: { 
 
       refresh: true, 
 
       pageSizes: true 
 
      }, 
 
      rowTemplate: kendo.template($("#rowTemplate").html()), 
 
     }); 
 
    });

Ein weiteres Beispiel bin ich hier einfügen, wo ich die gleichen Ergebnisse zu bekommen versuchen, und das funktioniert gut für mich. Unten ist der Code:

  <input type="submit" id="soltitle" value="#1"/> 
 
       
 
      <div class="row"> 
 
       <div class="col-md-2" id="hell1"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <h4 class="panel-title"></h4> 
 
         </div> 
 
         <div id="timeline1" class="panel-collapse collapse"> 
 
          <div class="panel-body"> 
 
           <a href="#" class="thumbnail"> 
 
            <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" /> 
 
           </a> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <h4 class="panel-title"></h4> 
 
         </div> 
 
         <div id="timeline1" class="panel-collapse collapse"> 
 
          <div class="panel-body"> 
 
           <a href="#" class="thumbnail"> 
 
            <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" /> 
 
           </a> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     
 
     $('#soltitle').click(function() { 
 
      
 
      $('#hell1') 
 
       // Find parent with the class that starts with "col-md" 
 
       // Change class to "col-md-3" 
 
       .closest('[class^="col-md"]') 
 
        .toggleClass('col-md-2 col-md-2 hidden') 
 
       // Find siblings of parent with similar class criteria 
 
       // - if all siblings are the same, you can use ".siblings()" 
 
       // Change class to "col-md-2" 
 
       //.siblings('[class^="col-md"]') 
 
       // .removeClass('col-md-3') 
 
       // .addClass('col-md-2'); 
 
     }); 
 
    }); 
 
</script>

in diesem Beispiel i erste Spalte in Schaltfläche klicken Ereignis mich verstecke und das funktioniert gut.

Answer 1

Das Problem ist, dass Sie die Klasse für alle Zeilen umschalten, in denen das Bild nicht existiert. Jedes Mal, wenn Sie diese umschalten und erneut umschalten, negiert der zweite Schalter den ersten. Wenn die Zeilen, bei denen if als wahr ausgewertet wird, ein Paar sind, war der letzte Wechsel eine Negation.

Es ist nicht klar, ob Sie die gesamte Spalte verbergen müssen, wenn Sie eine solche Zeile finden, oder Sie müssen die Spalte nur für die betroffene Zeile ausblenden. Außerdem ist Ihr if falsch.

Wenn Sie die ganze Spalte ausblenden möchten, wenn zumindest eine solche Zeile vorhanden ist, dann könnte dies die Lösung sein:

var shouldShow = true; 
for (var i = 0; shouldShow && (i < data.data.length); i++) { 

          if (!data.data[i].imagelink) { 
           $(".imageClass").addClass('hidden'); 
           shouldShow = false; 
          } 

         } 

Wenn Sie es nur für die betroffene Zeile tun wollen, dann so etwas wie dieses könnte Ihnen helfen:

var context = $(".imageClass"); 
for (var i = 0; i < data.data.length; i++) { 

          if (!data.data[i].imagelink) { 
           $(context[i]).addClass('hidden'); 
          } 

         } 

Der Code geht davon aus, dass Sie eine einzelne Spalte mit imageClass haben.

EDIT

Es stellte sich heraus, dass die .hidden Klasse nicht definiert wurde. Es gibt zwei mögliche Lösungen, die Sie wählen können.

Solution1: ersetzen .addClass("hidden") mit .hide()

Solution2: Fügen Sie die folgende Regel an den CSS-Code: .hidden {display: none;}