0

動的に作成しているグリッドビューがあります。実行時にフォームに追加しています (そのため、HTML ソースにはタグがありません)。スクロール バーを表示することはできましたが、上司から、スクロール中にヘッダー行を固定するように求められました。インターネットでの徹底的な検索では、静的なグリッド ビューの例のみが示されています。一般的な JavaScript ソリューションを実装しようとしましたが、「オブジェクトが必要です」というエラーが表示され、次の行にフラグが立てられます。

var gridWidth = grid.offsetWidth;

これが私のhtmlソースです：

form id="form1" runat="server">
<div>

    <asp:ImageButton ID="ImageButtonExcelExport" runat="server"
        ImageUrl="~/css/images/icons/custom/Excel-16.gif" 
        ToolTip="Export to Excel" PostBackUrl="~/ErrorReportGrid.aspx" />


    <div id="Div1" runat="server" >
    </div>


</div>

<!-- javascript here -->
<script type = "text/javascript">
var GridId = "<%=ErrorCodeGrid.ClientID %>";
var ScrollHeight = 300;
window.onload = function() {
    var grid = document.getElementById(GridId);
    var gridWidth = grid.offsetWidth;
    var gridHeight = grid.offsetHeight;
    var headerCellWidths = new Array();

for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
    }

grid.parentNode.appendChild(document.createElement("div"));
    var parentDiv = grid.parentNode;
    var table = document.createElement("table");

for (i = 0; i < grid.attributes.length; i++) {
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
            table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
        }
    }

    table.style.cssText = grid.style.cssText;
    table.style.width = gridWidth + "px";
    table.appendChild(document.createElement("tbody"));
    table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR") [0]);
    var cells = table.getElementsByTagName("TH");
    var gridRow = grid.getElementsByTagName("TR")[0];

for (i = 0; i < cells.length; i++) {
        var width;
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
            width = headerCellWidths[i];
        }
        else {
            width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
        }
        cells[i].style.width = parseInt(width - 3) + "px";
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
    }

parentDiv.removeChild(grid);
    var dummyHeader = document.createElement("div");
    dummyHeader.appendChild(table);
    parentDiv.appendChild(dummyHeader);
    var scrollableDiv = document.createElement("div");

if (parseInt(gridHeight) > ScrollHeight) {
        gridWidth = parseInt(gridWidth) + 17;
    }

scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
    scrollableDiv.appendChild(grid);
    parentDiv.appendChild(scrollableDiv);
}</script>

ここに私のvbコードがあります：

Public ErrorCodeGrid As GridView

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    'Create dynamic grid
    ErrorCodeGrid = New GridView
    ErrorCodeGrid.ID = "ErrorCodeGrid"
    'form1.Controls.Add(ErrorCodeGrid)
    Div1.Attributes("Style") = "width: 930px; height: 280px; margin-top: 0px; overflow: auto"
    Div1.Controls.Add(ErrorCodeGrid)

    'Set datasource ID for dynamic grid / sets the data that is displayed
    If Session("strVariableA") = "SINGLEUSER" And Session("strVariableB") = "EMPTY" Then 'staff sees their personal error
        ErrorCodeGrid.DataSource = SqlDataSourceSingleUser
        strSQL = SqlDataSourceSingleUser.SelectCommand.Replace("@User_ID", "'" + Session("strVariableB") + "'")
    ElseIf Session("strVariableA") = "ALL_RECORDS" Then 'user selects the list item "All Records"
        If Session("strVariableB") = "READ" Then 'if user has READ access, sees everyone's errors
            ErrorCodeGrid.DataSource = SqlDataSourceErrorReports_Core_Data
            strSQL = SqlDataSourceErrorReports_Core_Data.SelectCommand.ToString
        Else 'user sees all errors but Provider Data's
            ErrorCodeGrid.DataSource = SqlDataSourceStaffNoUserID
            strSQL = SqlDataSourceStaffNoUserID.SelectCommand.ToString
        End If
    ElseIf Session("strVariableA") = "CATEGORY_DESCRIPTIONS" Then 'user selects the list item "Category Descriptions"
        ErrorCodeGrid.DataSource = SqlDataSourceErrorDescriptions
        strSQL = SqlDataSourceErrorDescriptions.SelectCommand.ToString
    ElseIf Session("strVariableA") = "ACTIVE_ERROR" Then 'user selects a list item within the Code dropdown
        ErrorCodeGrid.DataSource = SqlDataSourceActiveErrors
        strSQL = SqlDataSourceActiveErrors.SelectCommand.Replace("@Error_Code", "'" + Session("strVariableB") + "'")
    ElseIf Session("strVariableA") = "STAFF_MEMBER" Then 'manager sees the selected user's errors
        ErrorCodeGrid.DataSource = SqlDataSourceMgrSingleUser
        strSQL = SqlDataSourceMgrSingleUser.SelectCommand.Replace("@User_ID", "'" + Session("strVariableB") + "'")
    ElseIf Session("strVariableA") = "TEAM" Then 'manager sees the selected team's errors
        ErrorCodeGrid.DataSource = SqlDataSourceMgrTeam
        strSQL = SqlDataSourceMgrTeam.SelectCommand.Replace("@Team_Name", "'" + Session("strVariableB") + "'")
    End If
    ErrorCodeGrid.DataBind()

    'set gridview parameters
    ErrorCodeGrid.EmptyDataText = "You currently have no errors."
    ErrorCodeGrid.CellPadding = 2
    ErrorCodeGrid.AllowSorting = True
    ErrorCodeGrid.CellSpacing = 1
    ErrorCodeGrid.Height = Unit.Pixel(111)
    ErrorCodeGrid.Width = Unit.Pixel(2775)
    ErrorCodeGrid.RowStyle.Font.Size = 8

    'set gridview colors
    ErrorCodeGrid.ForeColor = Drawing.ColorTranslator.FromHtml(&H333333)
    ErrorCodeGrid.RowStyle.BackColor = Drawing.ColorTranslator.FromHtml(&HF7F6F3)
    ErrorCodeGrid.RowStyle.ForeColor = Drawing.ColorTranslator.FromHtml(&H333333)
    ErrorCodeGrid.AlternatingRowStyle.BackColor = Drawing.Color.White
    ErrorCodeGrid.AlternatingRowStyle.ForeColor = Drawing.ColorTranslator.FromHtml(&H284775)
    ErrorCodeGrid.HeaderStyle.BackColor = Drawing.ColorTranslator.FromHtml(&H5D7B9D)
    ErrorCodeGrid.HeaderStyle.ForeColor = Drawing.Color.White
    ErrorCodeGrid.HeaderStyle.Font.Bold = True
    ErrorCodeGrid.HeaderStyle.Font.Size = 8

End Sub
4

1 に答える 1

0

動的グリッドがClientIDを持つようにするには、動的グリッドのIDを指定する必要があります。

    ErrorCodeGrid = New GridView
    ErrorCodeGrid.ID = "ErrorCodeGrid"

編集：あなたはそれがあなたのために機能しなかったと言ったので、もう少し洞察力があります。

IDを指定せずに、このjs出力を取得しました（明確にするために、デザイン属性の束を削除しました）。

var GridId = "ctl02"; // Your ID may differ.

およびグリッドビュー：

table cellspacing="0" rules="all" border="1" style="border-collapse:collapse;"

グリッドビューにID指定がないため、JavaScriptがそれを見つけることができず、null参照を取得することに注意してください。

IDを追加すると次のようになります。

var GridId = "ErrorCodeGrid";
table cellspacing="0" rules="all" border="1" id="ErrorCodeGrid" style="border-collapse:collapse;"

IDが一致していることに注意してください。

これがうまくいかない場合は、おそらく私よりも古いバージョンのasp.netを使用しています。しかし、最終的には、これらのIDは一致する必要があります。

これを機能させることができない場合の別のオプション。コード全体を関数に移動し、GridIdを渡します（とにかくこれは良い考えです）。次に、動的グリッドビューのClientIdを使用して呼び出し元のコードを動的に挿入できます。

ClientScript.RegisterStartupScript(Me.GetType, "FreezeHeader", "FreezeHeader(" & ErrorCodeGrid.ClientID & ");", True)

編集2：上記のコードを使用して、ページのJavaScriptを変更する必要があります。

このコードを置き換えます：

var GridId = "<%=ErrorCodeGrid.ClientID %>";
var ScrollHeight = 300;
window.onload = function() {

このコードで：

var ScrollHeight = 300; // you could move this into the function as well.
var FreezeHeader = function(GridId) {

Client Script Managerは、この関数の呼び出しを出力するだけです。

于 2012-08-25T23:23:05.050 に答える