通过 javascript 访问 GridView/DataGrid 选中 CheckBox 行各列的值

/article/4756819.html

功能需求

1, 单击 checkbox 返回当前行值
2, 外部按钮获取所有选择行的值

实现说明

参见主要代码，代码为自说明式。

主要代码


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">


<Columns>


<asp:TemplateField>


<ItemTemplate>


<asp:CheckBox ID="chkItem1" runat="server" onclick="if(this.checked) alert(getRowValue(this))" />




<%

--OR--%>




<%

--<input type="checkbox" id="chkItem2" onclick="if(this.checked) alert(getRowValue(this))" />--%>


</ItemTemplate>


</asp:TemplateField>


<asp:TemplateField HeaderText="ProductName" >




<ItemTemplate><%

# Eval("ProductName") %></ItemTemplate>


</asp:TemplateField>


<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />


</Columns>


</asp:GridView>

<script type ="text/javascript">




/**//**


返回 chk 所在行的单元格值


@param chk 表示行中的 input type=check 对象


*/


function getRowValue(chk)






{


//debugger;


// if(sender.checked) { // 根据实际情况，决定是否进行选中状态判断


var tblRow = chk.parentNode.parentNode;


// 改变 tblRow.cells[<cellIndex>] 中占位符 <cellIndex> 访问不同单元格


//return tblRow.cells[1].innerText + ", " + tblRow.cells[2].innerText;


return tblRow.cells[1].innerHTML + ", " + tblRow.cells[2].innerHTML;


// }


}






/**//**


返回指定 grdId 中所有选中行的单元格值


@param grdId 表示 GridView/DataGrid 客户端 ID，实际上他们均呈现为 <table />


@param chkIdPart 表示待处理 input type=check 控件的 ID 中的部分，考虑行中可能存在多个 checkbox， 通过此参数可以准确确定目标


*/


function getAllRowValue(grdId, chkIdPart)






{


//debugger;


var tbl = document.getElementById(grdId);


var chkList;


var txt = "";




/**//* 方法1


for(var i = 0; i < tbl.rows.length; i++) { // 遍历行


chkList = tbl.rows[i].getElementsByTagName("input"); // 返回当前行内嵌的所有 input 控件


for(var j = 0; j < chkList.length; j++) {


// 多条件准确确定目标 checkbox


if(chkList[j].type == "checkbox" && chkList[j].checked && chkList[j].id.indexOf(chkIdPart) > -1) {


txt += getRowValue(chkList[j]) + "/n";


break;


}


}


}*/




/**//* 方法2 */


chkList = tbl.getElementsByTagName("input"); // 返回表内嵌的所有 input 控件




for(var j = 0; j < chkList.length; j++)

{


// 多条件准确确定目标 checkbox




if(chkList[j].type == "checkbox" && chkList[j].checked && chkList[j].id.indexOf(chkIdPart) > -1)

{


txt += getRowValue(chkList[j]) + "/n";


}


}


return txt;


}


</script>