当用户在 GridView ASP.NET 中选择一行时如何自动选择相同 ID 的其他行
Posted
技术标签:
【中文标题】当用户在 GridView ASP.NET 中选择一行时如何自动选择相同 ID 的其他行【英文标题】：How to automatically select other row of same ID when user selected a row in GridView ASP.NET 【发布时间】：2018-02-21 20:27:27 【问题描述】：我有一个带有复选框的网格视图供用户选择。我希望在用户选择一行时自动选择具有相同 ID 的其他行，因为它必须成对选择。
我尝试遍历所有行并将选定的 ID 添加到列表中，然后再次迭代行以选择列表中存在 ID 的行，但我意识到这不是一种有效的方法。
有没有人遇到过类似的问题，或者有人可以建议一种更有效的方法，如果可能的话，通过客户端 javascript 来减少来回的流量。
非常感谢您的帮助。
提前谢谢你。
function Check_Click(objRef)
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked)
//If checked change color
row.style.backgroundColor = "orange";
else
//If not checked change back to original color
if (row.rowIndex % 2 == 0)
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
else
row.style.backgroundColor = "white";
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++)
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)
if (!inputList[i].checked)
checked = false;
break;
headerCheckBox.checked = checked;
function checkAll(objRef)
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++)
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i])
if (objRef.checked)
//If the header checkbox is checked, check all checkboxes and highlight all rows
row.style.backgroundColor = "orange";
inputList[i].checked = true;
else
//If the header checkbox is checked, uncheck all checkboxes and change rowcolor back to original
if (row.rowIndex % 2 == 0)
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
else
row.style.backgroundColor = "white";
inputList[i].checked = false;
<table cellspacing="1" cellpadding="4" border="0" border="0" id="ctl00_ContentPlaceHolder_gvLedger" style="border-width:0px;width:100%;">
<tr class="TblHeaderStyle">
<th scope="col">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl01_checkAllGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl01$checkAllGvLedger" onclick="checkAll(this);" />
</th>
<th scope="col">HOLDER_ID</th>
<th scope="col">HOLDER_DTL_ID</th>
<th scope="col">HOLDER_NO</th>
<th scope="col">HOLDER_NAME</th>
<th scope="col">ST_MV</th>
<th scope="col">RB_MV</th>
<th scope="col">MVMT</th>
<th scope="col">AMT</th>
<th scope="col">TX_DATE</th>
<th scope="col">STATUS</th>
<th scope="col">CD_BY</th>
<th scope="col">CD_TIME</th>
<th scope="col">RKS</th>
<th scope="col">STATUS_MAN</th>
<th scope="col">REFER_NO</th>
<th scope="col">BATCH_NO</th>
<th scope="col">FD_CODE</th>
<th scope="col">SW_TYPE</th>
<th scope="col">ST_MV_DTL</th>
<th scope="col">RB_MV_DTL</th>
<th scope="col">AMT_DTL</th>
<th scope="col">EXCHG_RATE</th>
<th scope="col">TRANS_AMT</th>
<th scope="col">TRANS_UNIT</th>
<th scope="col">N_UNIT</th>
<th scope="col">N_DATE</th>
<th scope="col">FD_PER</th>
<th scope="col">TRANS_NO</th>
<th scope="col">TL_SW_DONE</th>
<th scope="col">TT_TL_SW</th>
</tr>
<tr class="TblRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl02_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl02$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>3</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>02</td>
<td>from</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>853.97</td>
<td>0.5855</td>
<td>10/07/2014</td>
<td>0</td>
<td> </td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>4</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007762</td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>3</td>
<td>5</td>
<td>0000002</td>
<td>MR DEF</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007763</td>
<td>2</td>
<td>0</td>
</tr>
</table>
<input type="submit" name="ctl00$ContentPlaceHolder$btnGenerate" value="Proceed >" onclick="return confirm('Are you sure you want to process selected transactions?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder$btnGenerateSwitching", "", true, "", "", false, false))"
id="ctl00_ContentPlaceHolder_btnGenerate" class="ButtonStyle" />【问题讨论】：
发布标记时，有助于查看呈现的输出标记是什么，而不是生成标记的代码，因为这是您的 JavaScript 将运行的部分。 我添加了代码 sn-p。但它不会呈现任何输出。有人能指出错误吗？ 生成标记的服务器端代码不起作用。您需要将页面中实际客户端呈现的 html 放入问题和片段中，因为这是 JavaScript 与之交互的内容。我们需要看到它能够更好地帮助您使用 JavaScript。如果您的客户端 HTML 很大，只需将几行复制到问题中即可演示问题。 我已经编辑了sn-p现在可以运行的代码。你能帮我看看吗？ TIA。 【参考方案1】：可能有很多方法可以做到这一点，但您可以在每次单击一行时获取所有行，然后使用 for 循环遍历它们，忽略标题行。
在循环中，您只处理具有所选行的holder id 的所有行。
将所有不等于选中行的行的选中状态设置为与选中行相同。
然后您可以在循环内移动突出显示代码以将其应用到所有相关行。
function Check_Click(objRef)
//Get the Row based on checkbox
var selectedRow = objRef.parentNode.parentNode;
var selectedId = selectedRow.cells[1].innerHTML;
// Get All Rows
var allRows = selectedRow.parentNode.parentNode.rows;
for (i = 1; i < allRows.length; i++)
var row = allRows[i];
var id = row.cells[1].innerHTML;
var chkBox = row.cells[0].getElementsByTagName("input")[0];
if (id == selectedId)
if (row != selectedRow)
chkBox.checked = objRef.checked;
if (chkBox.checked)
//If checked change color
row.style.backgroundColor = "orange";
else
//If not checked change back to original color
if (row.rowIndex % 2 == 0)
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
else
row.style.backgroundColor = "white";
//Get the reference of GridView
var GridView = selectedRow.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++)
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox)
if (!inputList[i].checked)
checked = false;
break;
headerCheckBox.checked = checked;
function checkAll(objRef)
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++)
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i])
if (objRef.checked)
//If the header checkbox is checked, check all checkboxes and highlight all rows
row.style.backgroundColor = "orange";
inputList[i].checked = true;
else
//If the header checkbox is checked, uncheck all checkboxes and change rowcolor back to original
if (row.rowIndex % 2 == 0)
//Alternating Row Color
row.style.backgroundColor = "#e3f0f1";
else
row.style.backgroundColor = "white";
inputList[i].checked = false;
<table cellspacing="1" cellpadding="4" border="0" border="0" id="ctl00_ContentPlaceHolder_gvLedger" style="border-width:0px;width:100%;">
<tr class="TblHeaderStyle">
<th scope="col">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl01_checkAllGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl01$checkAllGvLedger" onclick="checkAll(this);" />
</th>
<th scope="col">HOLDER_ID</th>
<th scope="col">HOLDER_DTL_ID</th>
<th scope="col">HOLDER_NO</th>
<th scope="col">HOLDER_NAME</th>
<th scope="col">ST_MV</th>
<th scope="col">RB_MV</th>
<th scope="col">MVMT</th>
<th scope="col">AMT</th>
<th scope="col">TX_DATE</th>
<th scope="col">STATUS</th>
<th scope="col">CD_BY</th>
<th scope="col">CD_TIME</th>
<th scope="col">RKS</th>
<th scope="col">STATUS_MAN</th>
<th scope="col">REFER_NO</th>
<th scope="col">BATCH_NO</th>
<th scope="col">FD_CODE</th>
<th scope="col">SW_TYPE</th>
<th scope="col">ST_MV_DTL</th>
<th scope="col">RB_MV_DTL</th>
<th scope="col">AMT_DTL</th>
<th scope="col">EXCHG_RATE</th>
<th scope="col">TRANS_AMT</th>
<th scope="col">TRANS_UNIT</th>
<th scope="col">N_UNIT</th>
<th scope="col">N_DATE</th>
<th scope="col">FD_PER</th>
<th scope="col">TRANS_NO</th>
<th scope="col">TL_SW_DONE</th>
<th scope="col">TT_TL_SW</th>
</tr>
<tr class="TblRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl02_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl02$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>3</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>02</td>
<td>from</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>853.97</td>
<td>0.5855</td>
<td>10/07/2014</td>
<td>0</td>
<td> </td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>2</td>
<td>4</td>
<td>0000001</td>
<td>MR ABC</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007762</td>
<td>2</td>
<td>0</td>
</tr>
<tr class="TblAlternateRowStyle">
<td align="center">
<input id="ctl00_ContentPlaceHolder_gvLedger_ctl03_chkThisGvLedger" type="checkbox" name="ctl00$ContentPlaceHolder$gvLedger$ctl03$chkThisGvLedger" onclick="Check_Click(this);" />
</td>
<td>3</td>
<td>5</td>
<td>0000002</td>
<td>MR DEF</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>10/7/2014</td>
<td>O</td>
<td> </td>
<td> </td>
<td>CV 201709</td>
<td>N</td>
<td>CVA_2</td>
<td>2</td>
<td>01</td>
<td>to</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>500</td>
<td>994.43</td>
<td>0.5028</td>
<td>10/07/2014</td>
<td>100</td>
<td>00007763</td>
<td>2</td>
<td>0</td>
</tr>
</table>
<input type="submit" name="ctl00$ContentPlaceHolder$btnGenerate" value="Proceed >" onclick="return confirm('Are you sure you want to process selected transactions?');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder$btnGenerateSwitching", "", true, "", "", false, false))"
id="ctl00_ContentPlaceHolder_btnGenerate" class="ButtonStyle" />【讨论】：
成功了！这是完美的，正是我需要的。上帝祝福你。你真的让我很开心。非常感谢。 另一种选择是给每一行一个包含持有者 id 的属性，类似于data-holder-id="2" 然后你可以直接使用document.querySelectorAll("[data-holder-id=' + selectedId + ']") 而不是document. 你可以使用表格代替选择范围。如果您有大量行，这将有助于仅处理与开头匹配的行。以上是关于当用户在 GridView ASP.NET 中选择一行时如何自动选择相同 ID 的其他行的主要内容，如果未能解决你的问题，请参考以下文章
在 Gridview 中选择一行并将其删除 - Asp.net
如何在 c# ASP.NET 中使用 GridView_RowCommand 事件从 GridView 获取图像
如何在编辑模式 ASP .Net 中将日期选择器放在 Gridview 中