您的位置：首页 > Web前端 > JQuery

jQuery实现GridView列表自定义显示列

2012-05-15 15:42 381 查看

一个系统中有时候会为了方便用户操作，由用户决定显示列表中的哪些数据，示例如下：

下面我们看下用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和确定按钮即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航