Asp.net 動態控制GridView列的顯示和隱藏
阿新 • • 發佈：2019-01-27
效果圖如下：
說明：當點選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" 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="#" onclick="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\" 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();
}
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());
}
}
}
注：該功能參考相關資料加以修改