页面加载后,在网格视图中将FooTable断点应用于列标题

时间:2016-04-13 13:46:52

标签: javascript jquery asp.net gridview footable

我想在页面呈现后在FooTable上添加并初始化GridView

鉴于代码:

<table class="footable" cellspacing="0" cellpadding="8" rules="all" border="1" id="cpContent_gvWorkOrderListing" style="color:#666666;border-style:Double;width:100%;border-collapse:collapse;">
<tr align="center" style="color:White;background-color:#939598;font-size:12px;">
    <th class="gridHiddenColumn" scope="col">&nbsp;</th>
    <th class="gridHiddenColumn" scope="col">&nbsp;</th>
    <th align="center" scope="col" style="width:4%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$SlNo&#39;)" style="color:White;">Sl No.</a></th>
    <th align="center" scope="col" style="width:10%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$WorkOrderNo&#39;)" style="color:White;">WorkOrder Number</a></th>
    <th align="center" scope="col" style="width:8%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$AssignTo&#39;)" style="color:White;">Assigned To</a></th>
    <th align="center" scope="col" style="width:4%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$Status&#39;)" style="color:White;">Status</a></th>
    <th align="center" scope="col" style="width:8%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$ExternalReferenceId&#39;)" style="color:White;">External RefID</a></th>
    <th align="center" scope="col" style="width:8%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$CustomerNo&#39;)" style="color:White;">Account Number</a></th>
    <th align="center" scope="col" style="width:10%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$CustomerName&#39;)" style="color:White;">Customer Name</a></th>
    <th align="center" scope="col" style="width:5%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$BuildingNo&#39;)" style="color:White;">BuildingNo</a></th>
    <th align="center" scope="col" style="width:10%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$StreetName&#39;)" style="color:White;">Street Name</a></th>
    <th align="center" scope="col" style="width:6%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$City&#39;)" style="color:White;">City</a></th>
    <th align="center" scope="col" style="width:5%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$WorkOrderDate&#39;)" style="color:White;">WorkOrder Date</a></th>
    <th align="center" scope="col" style="width:5%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$DueDate&#39;)" style="color:White;">Due Date</a></th>
    <th align="center" scope="col" style="width:8%;">Note1</th>
    <th align="center" scope="col" style="width:8%;">Note2</th>
</tr>

我想修改

的属性
    <th align="center" scope="col" style="width:4%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$Status&#39;)" style="color:White;">Status</a></th>

    <th  data-hide="phone,tablet" align="center" scope="col" style="width:4%;"><a href="javascript:__doPostBack(&#39;ctl00$cpContent$gvWorkOrderListing&#39;,&#39;Sort$Status&#39;)" style="color:White;">Status</a></th>

然后在标题修改后初始化FooTable。

我认为这会给我一个锚点:

$('a').filter(function(index) { return $(this).text() === "Status"; }

这将添加属性:

$("th").attr("data-hide", "phone,tablet");

但我在结合它们以完成我的任务时画了一个空白。

1 个答案:

答案 0 :(得分:0)

在后面的代码中添加html标记是微不足道的,因为每次回发都会重新呈现整个页面。数据绑定事件可能触发也可能不触发,因此我使用GridView的PreRender事件添加“最后机会”标记而不是DataBoundRowDataBound事件

// VB Code - convert as necessary
Private Sub gvWorkOrderListing_PreRender(sender As Object, e As EventArgs) Handles gvWorkOrderListing.PreRender

  Dim hrc As TableCellCollection = gvList.HeaderRow.Cells

  For idx As Int32 = 0 To hrc.Count - 1

    // Modify condition to single out relevant columns
    // This is based in what I see in your rendered table
    If idx > 1 Then
      hrc(idx).Attributes("data-hide") = "phone,tablet"
    End If

  Next
End Sub