[英]Hide Gridview Using Javascript
I Have some Problem in Hiding Rows of Gridview Using Javascript... 我在使用JavaScript隐藏Gridview行时遇到一些问题...
My Js Function is 我的Js函数是
<script type="text/javascript">
function HideRows(Gdview) {
rows = document.getElementById(Gdview).rows;
for (var i = 0; i < rows.length; i++) {
if (rows[i].cells[0].type == "checkbox") {
if (rows[i].cells[0].childNodes[0].checked) {
rows[i].style.display = "none";
}
}
}
}
</script>
I Have a Gridview ID="Gdview" Which has 5 Columns and Every Column has a checkbox with id="Chk" and i placed a Button after the Gridview(Button id="Btn") i wannt to hide the Selected rows using checkboxes..i tried the following code behind..but it is not working..what wud be the problem?? 我有一个Gridview ID =“ Gdview”,其中有5列,每列都有一个id =“ Chk”的复选框,我在Gridview(Button id =“ Btn”)之后放置了一个按钮,我希望使用复选框隐藏选定的行..i在后面尝试了以下代码..但不起作用..到底是什么问题?? IS this Wrong Way????
这是错误的方式吗????
protected void Btn_Click1(object sender, EventArgs e)
{
Btn.Attributes.Add("onclick", "HideRows('" + Gdview + "')");
}
2ND Question Likewise same as first one: 第二个问题与第一个问题相同:
Here i am trying to select and unselect all checkboxes in gridview using respective link buttons...See my markup and JS: 在这里,我试图使用相应的链接按钮选择和取消选择gridview中的所有复选框...请参阅我的标记和JS:
<script type="text/javascript">
function SelectAll(b) {
var grid = document.getElementById("<%= Gdview.ClientID %>");
var cell;
if (grid.rows.length > 0) {
for (var i = 0; i < grid.rows.length; i++) {
cell = grid.rows[i].cells[0];
if (cell.childNodes[0].type == "checkbox")
cell.childNodes[0].checked = b;
}
}
}
</script>
<asp:GridView ID="Gdview" runat="server" AutoGenerateColumns="False"
onrowdatabound="Gdview_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="Chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="SNO" DataField="SerialNo" />
<asp:BoundField HeaderText="Organization" DataField="Organization" />
<asp:BoundField DataField="Origin" HeaderText="Origin"/>
<asp:BoundField DataField="Location" HeaderText="Location" />
<asp:BoundField DataField="Established" HeaderText="Established"/>
<asp:TemplateField>
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkChekall" runat="server" Text="Chekall"></asp:LinkButton>
<asp:LinkButton ID="lnkUncheck" runat="server" Text="UnCheckAll"></asp:LinkButton>
and i added Rowdatabound event in codebehind: 我在代码背后添加了Rowdatabound事件:
protected void Gdview_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
lnkChekall.Attributes.Add("onclick","javascript:SelectAll('" +"true" +"')");
lnkUncheck.Attributes.Add("onclick", "javascript:SelectAll('" + "false" +"')");
}
}
it is not working guys plz help me in my problems with the Javascripts... 伙计们请我帮我解决JavaScript问题...
EDIT 3 编辑3
In your second question, I can see there are few problems: 在您的第二个问题中,我可以看到有几个问题:
Your javascript is wrong. 您的JavaScript错误。
You should pass boolean true/false to javascript function, not string. 您应该将布尔值true / false传递给javascript函数,而不是字符串。
To make it work, Add the attributes at Page_Load: 要使其工作,请在Page_Load中添加属性:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//PopulateGridView
PopulateGrid();
}
lnkChekall.Attributes.Add("onclick", "javascript:SelectAll(true)");
lnkUncheck.Attributes.Add("onclick", "javascript:SelectAll(false )");
}
And change your javascript to this: 并将您的JavaScript更改为此:
<script type="text/javascript">
function SelectAll(b) {
var grid = document.getElementById("<%= Gdview.ClientID %>");
var cell;
if (grid.rows.length > 0) {
for (var i = 0; i < grid.rows.length; i++) {
cell = grid.rows[i].getElementsByTagName("input");
if (cell.length > 0) {
cell[0].checked = b;
}
}
}
}
</script>
You are doing it wrong way! 您做错了路! There's no need to call JS from code behind.
无需从后面的代码中调用JS。 Just add style to make the row invisible.
只需添加样式即可使该行不可见。 Here's how I would do it:
这是我的处理方式:
In the markup I have my GridView with five check boxes and one row number (Just to populate the Gridview with data). 在标记中,我的GridView带有五个复选框和一个行号(只需用数据填充Gridview)。 I also have a button :
我也有一个按钮:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateField HeaderText="CheckBox 1">
<ItemTemplate>
<asp:CheckBox ID="chk1" Text="CheckBox 1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CheckBox 2">
<ItemTemplate>
<asp:CheckBox ID="chk2" Text="CheckBox 2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CheckBox 3">
<ItemTemplate>
<asp:CheckBox ID="chk3" Text="CheckBox 3" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CheckBox 4">
<ItemTemplate>
<asp:CheckBox ID="chk4" Text="CheckBox 4" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CheckBox 5">
<ItemTemplate>
<asp:CheckBox ID="chk5" Text="CheckBox 5" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Row">
<ItemTemplate>
<%#Container.DataItem %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="Btn" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
Now in the code I am populating the GridView with test data. 现在,在代码中,我正在用测试数据填充GridView。 In the button's click event I am looping through all rows of GridView and finding the first CheckBox.
在按钮的click事件中,我遍历GridView的所有行并找到第一个CheckBox。 If it is checked, I am hiding the row:
如果选中,则隐藏行:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Test Data
var lst = new List<string>() { "Row 1", "Row 2", "Row 3" };
GridView1.DataSource = lst;
GridView1.DataBind();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
var chk = row.FindControl("chk1") as CheckBox;
if (chk != null && chk.Checked)
{
row.Attributes.Add("style", "display:none");
}
}
}
EDIT : If you want to use javascript, still there's no need to assign it from code behind. 编辑:如果您想使用javascript,仍然没有必要从后面的代码中分配它。 Add an input to the markup to call js
HideRows()
function: 在标记中添加输入以调用js
HideRows()
函数:
<asp:Button ID="Btn" runat="server" Text="Button" OnClick="Button1_Click" />
And the function in the page should look like this: 页面中的函数应如下所示:
<script type="text/javascript" >
function HideRows(Gdview) {
var rows = document.getElementById(Gdview).rows;
for( var i=0; i < rows.length; i++ ) {
var inputs = rows[i].getElementsByTagName("input");
if (inputs.length > 0 && inputs[0].checked) {
rows[i].style.display = "none";
}
}
}
</script>
Here's the screenshot before and after clicking the button: 这是单击按钮前后的屏幕截图:
You can download my test project here . 您可以在此处下载我的测试项目。
EDIT 2 : If you need to call the function from code behind, just do this: 编辑2:如果您需要从后面的代码中调用该函数,只需执行以下操作:
protected void Button1_Click(object sender, EventArgs e)
{
//Your other code goes here
//
Page.ClientScript.RegisterStartupScript(GetType(), "HideRows", "HideRows('" + GridView1.ClientID + "');", true);
}
client Id of server control is different from the Id you assigned, so try: 服务器控制的客户端ID与您分配的ID不同,因此请尝试:
document.getElementById("<%= Gdview .ClientID %>")
complete code: 完整的代码:
//dont pass as parameter
function HideRows() {
rows = document.getElementById("<%= Gdview.ClientID %>").rows;
for (var i = 0; i < rows.length; i++) {
if (rows[i].cells[0].type == "checkbox") {
if (rows[i].cells[0].childNodes[0].checked) {
rows[i].style.display = "none";
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.