jQuery实现GridView列表自定义显示列
一个系统中有时候会为了方便用户操作，由用户决定显示列表中的哪些数据，示例如下：
下面我们看下用jQuery如何实现，有哪些注意点。
抽出来的公用的jQuery代码如下：
$(document).ready(function() {
//显示默认列
ErgodicCbl();
//单击确定按钮触发
$("input[belong="btnQuery"]").click(function() {
ErgodicCbl();
return false;
})
$("input[belong="btnReset"]").click(function() {
return true;
})
})
//遍历checkboxlist根据选中值控制列的显示
function ErgodicCbl() {
var indexCol = 0;
$("input[belong="cblCustomList"]:checkbox").each(function() {
indexCol = FindIndex($(this).attr("text"));
if (true == $(this).attr("checked")) {
//选中则显示
showColumn(indexCol);
}
else {
//未选中则隐藏
hideColumn(indexCol);
}
})
}
//找出列名在列表中的列索引
function FindIndex(column) {
var index = -1;
var i = 0;
$("table tr").each(function() {
var thText = $("table th:eq(" + i + ")").text();
if (thText == column) {
index = i;
}
i++;
})
return index;
}
//隐藏索引列
function hideColumn(index) {
$("table tr").each(function() {
$(this).find("th:eq(" + index + ")").css("display", "none");
$(this).find("td:eq(" + index + ")").css("display", "none");
})
}
//显示索引列
function showColumn(index) {
$("table tr").each(function() {
$(this).find("th:eq(" + index + ")").show();
$(this).find("td:eq(" + index + ")").show();
})
}
实际页面代码如下：
<head runat="server">
<title>使用公用jquery自定义显示列</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/customColumn.js"></script>
</head>
<body>
<form id="form1" runat="server"> //checkbox的属性很重要
<input id="cb1" belong="cblCustomList" type="checkbox" runat="server" value="Name"
text="姓名" checked="checked" />姓名
<input id="Checkbox1" belong="cblCustomList" type="checkbox" runat="server" value="sex"
text="性别" />性别
<input id="Checkbox2" belong="cblCustomList" type="checkbox" runat="server" value="age"
text="年龄" checked="checked" />年龄
<input id="Checkbox3" belong="cblCustomList" type="checkbox" runat="server" value="staure"
text="身高" />身高
<input id="Checkbox4" belong="cblCustomList" type="checkbox" runat="server" value="weightkg"
text="体重" />体重
<input id="Checkbox5" belong="cblCustomList" type="checkbox" runat="server" value="qt"
text="其他" />其他
<asp:CheckBoxList ID="cblCustomList" runat="server" RepeatDirection="Horizontal"
name="cblCustomList" Visible="false">
<asp:ListItem Value="Name" Text="姓名">姓名</asp:ListItem>
<asp:ListItem Value="sex">性别</asp:ListItem>
<asp:ListItem Value="age">年龄</asp:ListItem>
<asp:ListItem Value="staure">身高</asp:ListItem>
<asp:ListItem Value="weightkg">体重</asp:ListItem>
<asp:ListItem Value="qt">其他</asp:ListItem>
</asp:CheckBoxList>
<asp:Button ID="btnQuery" runat="server" Text="确定" belong="btnQuery" />
<asp:Button ID="btnReset" runat="server" Text="重置" belong="btnReset"
onclick="btnReset_Click" />
<asp:GridView ID="dvCustomList" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField HeaderText="序号" DataField="Num" />
<asp:BoundField HeaderText="姓名" DataField="Name" />
<asp:BoundField HeaderText="性别" DataField="sex" />
<asp:BoundField HeaderText="年龄" DataField="age" />
<asp:BoundField HeaderText="身高" DataField="staure" />
<asp:BoundField HeaderText="体重" DataField="weightkg" />
<asp:BoundField HeaderText="其他" DataField="qt" />
</Columns>
</asp:GridView>
</form>
</body>
其中，checkboxlist控件不能使用服务器控件，要用html编写，自定义两个属性用于标识checkbox和确定按钮即可。
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： linux c 获取文件大小
- 下一篇： 自定义GRIDVIEW编辑列 删除列
