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

Applying FooTable break point to column header in Grid View after page load

本文关键字：视图 网格 标题 应用于 断点 加载 FooTable      更新时间：2024-05-30

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

给定代码：

<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");

但我对将它们结合起来完成我的任务一无所知。

在代码隐藏中添加html标记是微不足道的，因为每次回发都会重新呈现整个页面。数据绑定事件可能会被触发，也可能不会被触发，所以我使用GridView的PreRender事件来添加"最后机会"标记，而不是它的DataBound或RowDataBound事件

// 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
相关文章：