MVC-WebGrid-Spalte mit Jquery anzeigen oder ausblenden

Ich habe ein MVC-Webgitter mit Spalten, die ich dynamisch ausblenden oder anzeigen möchte, basierend auf einer JavaScript-Funktion, nachdem das Raster gerendert wurde.MVC-WebGrid-Spalte mit Jquery anzeigen oder ausblenden

Also nachdem das WebGrid angezeigt wird, möchte ich eine JavaScript-Funktion aufrufen und in einem ColumnName zu ein- oder ausblenden. Ist das möglich?

Danke,

Dies ist, wie mein Raster-Setup ist:

@{ 
     var gridColumns = new List<WebGridColumn>(); 

     gridColumns.Add(grid.Column("Id", "Test ID")); 
     gridColumns.Add(grid.Column("Description", "Test Description")); 
     gridColumns.Add(grid.Column("ProjectDate", "Test Date", format: @<text> <span>@item.ProjectDate.ToString("d/M/yyyy")</span></text>)); 

    } 
<div id="divWebGrid" class="row"> 
       @grid.GetHtml(
        fillEmptyRows: false, 
        tableStyle: "webgrid", 
        alternatingRowStyle: "webgrid-alternating-row", 
        headerStyle: "webgrid-header", 
        footerStyle: "webgrid-footer", 
        selectedRowStyle: "webgrid-selected-row", 
        rowStyle: "webgrid-row-style", 
        mode: WebGridPagerModes.All, 
        columns: grid.Columns(gridColumns.ToArray()) 
        ) 
      </div>

Und dies würde mein Javascript-Code sein:

function ToggleColumn(columnName) 
    { 
     //Some Code to Show or Hide the Column in the WebGrid based on the columnName parameter. 
    }

Ist das möglich? Hier

ist das gerenderte Code meines Raster:

<table class="webgrid" data-swhgajax="true" data-swhgcontainer="divWebGrid" data-swhgcallback=""> 
    <thead> 
     <tr class="webgrid-header"> 
      <th scope="col"> 
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Id&amp;gridItemsortdir=ASC">Test ID</a>   </th> 
      <th scope="col"> 
<a data-swhglnk="true" href="/Home/Index?gridItemsort=Description&amp;gridItemsortdir=ASC">Test Description</a>   </th> 
      <th scope="col"> 
<a data-swhglnk="true" href="/Home/Index?gridItemsort=ProjectDate&amp;gridItemsortdir=ASC">Test Date</a>   </th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr class="webgrid-footer"> 
      <td colspan="3">1 <a data-swhglnk="true" href="/Home/Index?gridItempage=2">2</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">3</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=2">&gt;</a> <a data-swhglnk="true" href="/Home/Index?gridItempage=3">&gt;&gt;</a></td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr class="webgrid-row-style"> 
      <td>1</td> 
      <td>test 1</td> 
      <td> <span>22/7/2016</span></td> 
     </tr> 
     <tr class="webgrid-alternating-row"> 
      <td>2</td> 
      <td>test 2</td> 
      <td> <span>22/7/2016</span></td> 
     </tr> 
     <tr class="webgrid-row-style"> 
      <td>3</td> 
      <td>test 3</td> 
      <td> <span>22/7/2016</span></td> 
     </tr> 
    </tbody> 
    </table>

Quelle

2016-07-22 Ben

** Jedes Kontrollkästchen hat eine ID, die einer Spalte im Raster entspricht. **. Behalte keine doppelten IDs. Es gibt andere Möglichkeiten, Ihre Checkboxes Rasterspalten zuzuordnen, wie HTML 5 Datenattribute. – Shyju

Die ID der Steuerelemente ist nicht identisch. Entschuldigen Sie das Missverständnis. Die Checkbox ist mit einem Objekt aus dem Modell verknüpft und hat ein Attribut namens Id, das mit der Attribut-ID für die Spalte im WebGrid übereinstimmt. – Ben

Grundsätzlich möchte ich in der Lage sein, eine ID in eine Funktion zu übergeben und die Funktion eine WebGrid-Spalte, die diese ID als ColumnName hat, ausblenden oder anzeigen. – Ben

ich das ähnliche Problem in meinem Grid konfrontiert. Und ich habe es mit Hilfe der CSS-Klasse in WebGrid-Spalten gelöst.

Zuerst füge ich eine Klasse zu all diesen Spalten hinzu, die ausgeblendet werden müssen.

gridColumns.Add(grid.Column("ID", "Test ID", null, "hidden-column"));

Added hide Eigenschaft auf Klasse 'hidden-Spalte'

<style> 
    .hidden-column { 
     display:none; 
    } 
</style>

Es werden alle Spalten verstecken (td-Elemente) dieser Klasse gesetzt hat (in diesem Fall wird es Spalte "ID" verstecken).

Um Grid-Header auch ausblenden, rief ich IIFE Funktion auf Dokument bereit.

 (function() { 
      $('#divWebGrid tbody tr:first').find('td.hidden-column').each(function (i, td) { 
       var indexOfHiddenColumn = $(td).index(); 
       $('#divWebGrid thead th').eq(indexOfHiddenColumn).addClass('hidden-column'); 
      }); 
     }());

Ich hoffe, dieser Beitrag wird Ihnen helfen, Ihr Problem zu lösen.

Quelle

2016-07-23 08:24:52

MVC-WebGrid-Spalte mit Jquery anzeigen oder ausblenden

Antwort

Verwandte Themen