0

詳細に入る前に、stackoverflow と net からもさまざまなソリューションを試したことに言及したいと思います。しかし、私のシナリオには適していません。というわけで、詳細情報を提供しました。

ASP.NET 2.0 Web アプリケーションでは、グリッドビュー コントロールが使用され、そのグリッドビューの列がユーザーの設定に関して実行時に生成されます。したがって、Default.aspx では、グリッドビューの定義は次のようになります。

<div id="DivListB" runat="server" onscroll="SaveScrollValue(); SetListFloatingHeader()" visible="True">
<asp:GridView ID="ObjList" runat="server" OnLoad="ReloadGrid" CssClass="ObjList" AutoGenerateColumns="false" OnRowDataBound="ObjList_RowDataBound" AutoGenerateSelectButton="false" OnSelectedIndexChanged="ObjList_SelectedIndexChanged" OnRowCreated="ObjList_RowCreated">
    <Columns>
        <asp:TemplateField HeaderText="&nbsp" ItemStyle-Width="46px" ItemStyle-HorizontalAlign="Center">
            <HeaderTemplate>
                <asp:CheckBox AutoPostBack="true" ID="chkAll" runat="server" OnCheckedChanged="HeaderChk_Changed" /> 
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox AutoPostBack="true" ID="chkRow" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem, "Selection")%>' OnCheckedChanged="ChkRow_OnCheckChange" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

gridview 列は実行時に追加され、以下のメソッドは web.config からのユーザー設定に応じて列を作成します。

private void CreateDefaultGridView(Hashtable htPartSchema)
    {
        string sTempHeader, sTempAlignment, sTempWidth, sTempVisible;
        try
        {
            //get partlist settings section from web.config
            NameValueCollection plConfigKeys = (NameValueCollection)ConfigurationManager.GetSection("CONFIG_SETTINGS/PL_SETTINGS");
            //cond: check partlist config keys exist
            if (plConfigKeys != null && plConfigKeys.Count > 0)
            {
                //loop: every key present in configruation
                foreach (string key in plConfigKeys)
                {
                    //cond: config key is present in part schema
                    if (htPartSchema.ContainsKey(key.ToUpper()) == true)
                    {
                        //create new databound column                        
                        BoundField gridCol = new BoundField();
                        //assign datafield to bind with data table column
                        gridCol.DataField = key;
                        //get value from config key                
                        string sKeyValue = plConfigKeys[key].ToString();                         
                        try
                        {
                            string[] sTempArray = sKeyValue.Split(new string[] { "|" }, StringSplitOptions.RemoveEmptyEntries);
                            sTempHeader = sTempArray[0];
                            sTempAlignment = sTempArray[1];
                            sTempWidth = sTempArray[2];
                            sTempVisible = sTempArray[3];
                            PLDefaultColumnHeaderAlignments.Add(sTempHeader, sTempAlignment);
                            PLDefaultColumHeaderWidths.Add(sTempHeader, sTempWidth);
                        }
                        catch
                        {
                            sTempHeader = string.Empty;
                            sTempAlignment = string.Empty;
                            sTempWidth = string.Empty;
                            sTempVisible = "false";
                        }
                        if (sTempVisible.ToLower().Equals("true"))
                        {
                            //assign display header text
                            gridCol.HeaderText = sTempHeader;
                            //add the column in the gridview
                            ObjList.Columns.Add(gridCol);

                            //cond: to check the specified alignment
                            if (sTempAlignment.ToUpper() == "L")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Left;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Left;        
                            }
                            else if (sTempAlignment.ToUpper() == "R")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Right;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Right;
                            }
                            else if (sTempAlignment.ToUpper() == "C")
                            {
                                gridCol.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
                                gridCol.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;
                            }
                            if (string.IsNullOrEmpty(sTempWidth) == false)
                            {
                                gridCol.ControlStyle.Width = Unit.Pixel(int.Parse(sTempWidth));
                                gridCol.HeaderStyle.Width = int.Parse(sTempWidth);

                                gridCol.HeaderStyle.Wrap = false;
                                gridCol.ItemStyle.Wrap = false;
                                gridCol.ItemStyle.Width = Unit.Pixel(int.Parse(sTempWidth));

                                //set column width
                                double dTempColWidth = 120;  //default value
                                double.TryParse(sTempWidth, out dTempColWidth);
                                //change width of grid view according to column sizes
                                ObjList.Width = new Unit((ObjList.Width.Value + dTempColWidth), UnitType.Pixel);                                   
                            }
                        }
                        gridCol.ItemStyle.Wrap = false;
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }

また、行が GridView にバインドされている場合、以下に示すように、実行時に GridView の DataRowBound イベントでいくつかのイベントと css も適用されます。

protected void ObjList_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        try
        {
            int iDataRowsCounter = 0;
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //get datatable from 
                DataTable dtList = (DataTable)Session["ListTable" + ViewState["ViewerId"]];

                //get position of the respective row
                string strPostion = dtList.Rows[e.Row.RowIndex]["Position"].ToString();
                string strLinkNum = dtList.Rows[e.Row.RowIndex]["LinkNumber"].ToString();
                //get row check box
                CheckBox cbRow = ((CheckBox)e.Row.FindControl("chkRow"));
                string pnum = dtList.Rows[e.Row.RowIndex]["PartNumber"].ToString();
                if (a_PartNumber != null && pnum == a_PartNumber)
                {
                    HighlightPic.Value = HighlightPic.Value + "||" + e.Row.RowIndex.ToString();
                    e.Row.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#3D98FF");
                    e.Row.Style.Add(HtmlTextWriterStyle.Color, "#FFFFFF");
                }
                //mouse hover effects on gridview (CSS)
                e.Row.Attributes.Add("onmouseover", "this.className='ObjListHighlight'");
                e.Row.Attributes.Add("onmouseout", "this.className='ObjListNormal'");
                //keep position of the row in case needed in javascript
                e.Row.Attributes.Add("RowPosition", strPostion);
                //on row checkbox check change of a single row
                cbRow.Attributes.Add("onclick", "OnRowCheckChange(this, 'ObjList')");
                //on full row click highlight picture 
                e.Row.Attributes.Add("onclick", "HighlightPicture('" + strPostion + "'," + e.Row.RowIndex + ", false)");
                //on row double click 
                e.Row.Attributes.Add("ondblclick", "OnRowDblClick(" + e.Row.RowIndex + ",'ObjList')");                              
            }
            else if (e.Row.RowType == DataControlRowType.Header)
            {
                //find header checkbox control
                CheckBox cbHeader = ((CheckBox)e.Row.FindControl("chkAll"));
                e.Row.Attributes.Add("class", "item_HeaderRow");
                e.Row.Cells[0].Attributes.Add("class", "item_HeaderCell");
                //add header change event on checkbox click
                cbHeader.Attributes.Add("onclick", "OnHeaderCheckChange(this,'ObjList')");                    
            }
        }
        catch
        {
            throw new Exception(ex.Message);
        }
    }

そのプレゼンテーションは以下のようなものです: ここに画像の説明を入力 それぞれの css は以下のとおりです:

    .ObjList
{
    height: auto;    
}
.ObjListHighlight
{
    background-color: #CAE4FF;
    cursor: pointer;
}
.ObjListNormal
{
    background-color: White;
    cursor: pointer;
}

.ObjList tr.row
{
    cursor: pointer;
    color: #1B3A7A;
    background-color: #FFFFFF;
}

.ObjList tr.row:hover
{
    background-color: #CAE4FF;
}

.ObjList tr.row_selected
{
    cursor: default;
    color: #FFFFFF;
    background-color: #3D98FF;
}

私がやりたかったのは、そのグリッドビューのヘッダー行を修正することです。ソリューションは、javascript または jQuery で作成できます。提案を歓迎します。

4

2 に答える 2

2

これを試して、

ASPX ページ: 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script src="gridviewScroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            gridView1 = $('#gridtest').gridviewScroll({
                width: 600,
                height: 300,
                railcolor: "#F0F0F0",
                barcolor: "#CDCDCD",
                barhovercolor: "#606060",
                bgcolor: "#F0F0F0",
                freezesize: 1,
                arrowsize: 30,                
                headerrowcount: 1,
                railsize: 16,
                barsize: 8
            });
        }
    </script>
    <div style="width: 100%; height: 400px; overflow: scroll">
            <asp:GridView ID="gridtest" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="UserID" HeaderText="ID" SortExpression="UserID" ReadOnly="true" />
                    <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
                </Columns>
            </asp:GridView>
        </div>

CS ページ:

protected void Page_Load(object sender, EventArgs e)
    {
        gridtest.DataSource = getUserDetails();
        gridtest.DataBind();
    }
    public class details
    {
        public int UserID { get; set; }
        public string FirstName {get;set;}
    }
    public List<details> getUserDetails()
    {
        List<details> gt = new List<details>();
        for (int i = 1; i < 40; i++)
        {
            details objDetails = new details();
            objDetails.UserID = i;
            objDetails.FirstName = "test" + i;
            gt.Add(objDetails);
        }
        return gt;
    }

参考のためにこれを使用してください：http://gridviewscroll.aspcity.idv.tw/

于 2013-07-15T06:16:31.890 に答える
1

最善の策は、2 つの GridView を作成することです。純粋にヘッダー用の 1 つ。2 つ目は、最初の div のすぐ下にあるスクロール可能な div にラップされた body です。ヘッダーを非表示にするには、2 番目のグリッドビューを負の上マージンで配置します。このようにして、最初の girdview のヘッダーを使用し、2 番目のものをスクロールします。

または、次のようなプラグインを使用することもできます: http://www.fixedheadertable.com

このプラグインも、上で説明したのと同じロジックを使用します。

于 2013-07-15T05:52:11.787 に答える