天天看點

Asp.net 動态控制GridView列的顯示和隐藏

效果圖如下:

Asp.net 動态控制GridView列的顯示和隐藏

       說明:當點選Gridview列中的—符号時,該被選列被隐藏掉,自動顯示在下邊的下拉框中,當選中下拉框中的某列時,該列在

                  在Gridview中又顯示出來

解決方案:

    需要在程式中需要引入一個JS 源碼如下:(ShowHideColumn.js)


   // Hide each cell in a gridview column
   function HideCol(gridView, colIndex, colName) {    
       var rows = document.getElementById(gridView).rows;    
      for(i = 0; i < rows.length; i++)
           if(rows[i].id != gridView + "_pager") 
                rows[i].cells[colIndex].style.display = "none";
       // Add the name and index of the hidden column to the dropdown list
       var hiddenCols = document.getElementById(gridView + "_showCols");   
       hiddenCols.options[hiddenCols.length] = new Option(colName, colIndex);
       
       SetupHiddenCols(gridView);
   }
  
  // Show each cell in a gridview column    
  function ShowCol(gridView, colIndex) {
       var rows = document.getElementById(gridView).rows;    
       for(i = 0; i < rows.length; i++)
           if(rows[i].id != gridView + "_pager") 
               rows[i].cells[colIndex].style.display = ""; 
       // Remove the name and index of the hidden column from the dropdown list
       var hiddenCols = document.getElementById(gridView + "_showCols");
       for(i = 0; i < hiddenCols.options.length; i++)
           if(hiddenCols.options[i].value == colIndex)
               hiddenCols.options[i] = null;
       
       SetupHiddenCols(gridView);        
  }
   
   // Setup the drop down list to show the hidden columns
   function SetupHiddenCols(gridView) {
       var hiddenCols = document.getElementById(gridView + "_showCols");
      if(hiddenCols)
           if(hiddenCols.options.length > 1)
               hiddenCols.style.display = "";
           else
               hiddenCols.style.display = "none";
   }
 

           

   前台頁面代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewDiplay.aspx.cs" Inherits="GridviewDiplay" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="js/ShowHideColumn.js"type="text/javascript"></script>
     <link href="js/showhidecolumns.css" target="_blank" rel="external nofollow"  type="text/css" rel="Stylesheet"/>
    <script type="text/javascript">
        function showcolumn() {
            document.getElementById('columns').style.display='block';
         }
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" target="_blank" rel="external nofollow"  οnclick="showcolumn()">檢視詳情</a>
    <div id="columns" style="display:none">
        <asp:CheckBoxList ID="cbColumns" runat="server">
        </asp:CheckBoxList>
    </div>
    
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            onrowcreated="GridView1_RowCreated">
    <Columns>
      <asp:BoundField  DataField="ID" HeaderText="ID" />
        <asp:BoundField  DataField="num1" HeaderText="num1"/>
        <asp:BoundField DataField="num2" HeaderText="num2" />
        <asp:BoundField DataField="num3" HeaderText="num3" />
        <asp:BoundField DataField="num4" HeaderText="num4" />
        <asp:BoundField DataField="num5" HeaderText="num5" />
        <asp:BoundField DataField="num6" HeaderText="num6" />
        <asp:BoundField DataField="num7" HeaderText="num7" />
        <asp:BoundField DataField="num8" HeaderText="num8" />
        <asp:BoundField DataField="num9" HeaderText="num9" />
        <asp:BoundField DataField="num10" HeaderText="num10" />
        <asp:BoundField DataField="num11" HeaderText="num11" />
        <asp:BoundField DataField="num12" HeaderText="num12" />
        </Columns>
    </asp:GridView>
     <asp:Literal ID="GridView1ShowHideColumns" runat="server"></asp:Literal>
        <br />
        
    </div>
    
    </form>
</body>
</html>

           

背景代碼如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Collections;
using System.Text;

public partial class GridviewDiplay : System.Web.UI.Page
{
    ArrayList list = new ArrayList();
    List<string> columnNames = new List<string>() { "ID", "num1", "num2", "num3","num4","num5","num6","num7","num8","num9","num10","num11","num12"};
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            loadColumns();
            loadlist();
            SetupShowHideColumns(this.GridView1, this.GridView1ShowHideColumns);
        }
    }

    public void loadlist() 
    {
        DataSet ds = SQLConnection.getTest1();
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    private void loadColumns() 
    {
        DataView ds=new DataView( SQLConnection.getColumns().Tables[0]);
        cbColumns.DataSource = ds;
        cbColumns.DataTextField = "Name";
        cbColumns.DataValueField = "Name";
        cbColumns.RepeatColumns = 5;
        cbColumns.DataBind();
    }
    

    private ArrayList getCheckList() 
    {
        ArrayList checkList = new ArrayList();
        for (int i = 0; i < cbColumns.Items.Count;i++ )
        {
           if(cbColumns.Items[i].Selected==true)
           {
               checkList.Add(cbColumns.Items[i].Value);
           }
        }
        return checkList; 
    }

    private void SetupShowHideColumns(GridView gridview,Literal showHideColumnsLiteral)
    {
        //StringBuilder sb = new StringBuilder();
        //sb.Append("<div class=\"showHideColumnsContainer\">");
        //sb.Append("<select id=\"");
        //sb.Append(gridview.ClientID);
        //sb.Append("_showCols\"onchange\"javascript:ShowCol('");
        //sb.Append(gridview.ClientID);
        //sb.Append("',this.value);\"style=\"display;none;\">");
        //sb.Append("<option>-show Column-</option></select></div>");
        //showHideColumnsLiteral.Text = sb.ToString();
        StringBuilder sb = new StringBuilder();
        sb.Append("<div class=\"showHideColumnsContainer\">");
        sb.Append("<select id=\"");
        sb.Append(gridview.ClientID);
        sb.Append("_showCols\" οnchange=\"javascript:ShowCol('");
        sb.Append(gridview.ClientID);
        sb.Append("', this.value);\" style=\"display:none;\">");
        sb.Append("<option>- Show Column -</option></select></div>");

        showHideColumnsLiteral.Text = sb.ToString();

    }

    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        GridView gridview = (GridView)sender;
        StringBuilder sb = new StringBuilder();
        if(e.Row.RowType==DataControlRowType.Header)
        {
            for (int columnIndex = 0; columnIndex < e.Row.Cells.Count;columnIndex++)
            {
                sb.Remove(0, sb.Length);
                sb.Append("javascript:HideCol('");
                sb.Append(gridview.ClientID);
                sb.Append("',");
                sb.Append(columnIndex);
                sb.Append(",'");
                sb.Append(columnNames[columnIndex]);
                sb.Append("')");

                HyperLink hideLink = new HyperLink();
                hideLink.Text = "-";
                hideLink.CssClass = "gvHideColLink";
                hideLink.NavigateUrl = sb.ToString();
                hideLink.Attributes.Add("title", "Hide Column");

                e.Row.Cells[columnIndex].Controls.AddAt(0, hideLink);

                if(e.Row.Cells[columnIndex].Text.Length>0)
                {
                    Label columnTextLabel = new Label();
                    columnTextLabel.Text = e.Row.Cells[columnIndex].Text;
                    e.Row.Cells[columnIndex].Controls.Add(columnTextLabel);
                }
            }
        }
        if (e.Row.RowType == DataControlRowType.Pager)
        {
            e.Row.Attributes.Add("id", gridview.ClientID + "_pager");
        }
        else 
        {
            e.Row.Attributes.Add("id",gridview.ClientID+"_r"+e.Row.RowIndex.ToString());
        }
    }
}


           

注:該功能參考相關資料加以修改

繼續閱讀