どのように非表示の携帯電話のブートストラップクラスを使用して特定のasp.net WebGridColumnを非表示にすることができます

Question

私はasp.net mvc-4 Webアプリケーションで作業しています。そして、私は私のかみそりビュー内の以下のWebGridを持っている私のビュー内： -

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

       gridcolumns.Add(new WebGridColumn() 
       { 
        ColumnName="OrderID", 
        Header = "", 
        Style="hidden-phone", 
        CanSort = false, 
        Format = 

       @<text> 

      @Html.ActionLink("Edit","Edit", "Order",new { id = item.OrderID },null) 

       </text> 
       }); 

//other columns goes here.. 
var grid = new WebGrid(
       canPage: true, 
       rowsPerPage: Model.PageSize, 
       canSort: true, 
       ajaxUpdateContainerId: "grid"); 

       grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false); 
       grid.Pager(WebGridPagerModes.All); 

       @grid.GetHtml(htmlAttributes: new { id = "grid" }, // id for ajaxUpdateContainerId parameter 
     fillEmptyRows: false, 
     tableStyle: "table table-bordered table-hover", 


     mode: WebGridPagerModes.All, 
     columns: gridcolumns 

     ); 


} 

今私は小さなデバイス上WebGridColumns specif非表示にしたいです。上記のコードに示すように、私はウェブグリッド内部以下を定義している： -

Style="hidden-phone", 

今、この小さなデバイス（携帯電話）内部列の内容を非表示になり、それでも列ヘッダーが表示されます。小さな画面（電話）でWebGridを表示しているときに、本文列と比較してヘッダーの数が異なることになりました。

誰でもどのようにしてStyle="hidden-phone"を強制的に列の内容と列ヘッダーに適用できるかを説明できます。つまり、小さなサイズの画面の中でWebGridを表示しているときに、指定された列を非表示にすることはできますか？ WebGridのStyleプロパティは指定された列ヘッダーに適用されないようですか？

Answer 1

最も簡単な解決策を使用することにより、全くヘッダを非表示にするには、次のようになります。

displayHeader:false 

これは、WebGridのオブジェクトのオプションですが、あなたがそれを必要とするならば、唯一の解決策は、細胞数で列ヘッダーを非表示にするだろう：

$(function() { 
    $('#grid thead tr th:eq(0)').addClass('hidden-phone'); 
}) 

UPDATE

オクラホマので、あなたがあなたの電子のように列クラス隠された電話に追加することを前提としていますXAMPLEあなたはそのようなヘッダを対応する見つけることができます：

$(function() { 
    $('#grid tbody tr:first td.hidden-phone').each(function(index, td){ 
     $('#grid thead tr th:eq(' + index + ')').addClass('hidden-phone'); 
    }); 
}) 

提供される機能は、表の最初の行に目を通すと、クラス隠された電話を持つ細胞を検索します。次に、各セルに対して、対応するヘッダに同じクラスを追加します。

UPDATE＃2

あなたは、AJAX呼び出し、あなたは少し私の例を変更する必要があり、その後の並べ替えを使用している場合。そして、AJAXリクエストへのコールバックとしてその関数名を渡す

function hideHeaders() { 
    $('#grid tbody tr:first td.hidden-phone').each(function (index, td) { 
     $('#grid thead tr th:eq(' + index + ')').addClass('hidden-phone'); 
    }); 
}; 

$(function() { 
    hideHeaders(); 
}) 

：まず機能を分離するために、私のJSコードを移動

var grid = new WebGrid(
    canPage: true, 
    rowsPerPage: 1, 
    canSort: true, 
    ajaxUpdateContainerId: "grid", 
    ajaxUpdateCallback: "hideHeaders"); 

お知らせajaxUpdateCallback：「hideHeaders」 - 今聞かせてそのラインWebGridはajaxリクエストが完了した後に呼び出される必要があります。

Answer 2

私は1つのコードスニペットを作成して確認してください。

私はテーブルの3列目をすべて無効にしました。

私はあなたに役立つと思います。

おかげ

$(function() { 
 
    debugger; 
 
    $('#grid tr').each(function(){ 
 
    $(this).find('th:eq(2)').hide(); 
 
    $(this).find('td:eq(2)').hide(); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="grid"> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    <th>H4</th> 
 
    </tr> 
 
    <tr> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    <td>d3</td> 
 
    <td>d4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    <td>d3</td> 
 
    <td>d4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    <td>d3</td> 
 
    <td>d4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    <td>d3</td> 
 
    <td>d4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>d1</td> 
 
    <td>d2</td> 
 
    <td>d3</td> 
 
    <td>d4</td> 
 
    </tr> 
 
</table>