У меня есть gridview с флажками для выбора пользователем. Я бы хотел, чтобы другие строки с одинаковым идентификатором были автоматически выбраны, когда пользователь выбирает строку, потому что она должна быть выбрана в паре.
Я попытался выполнить итерацию по всем строкам и добавил выбранный идентификатор в список, и снова повторить строки, чтобы выбрать строки с идентификатором в списке, но я понял, что это не эффективный способ сделать это.
У кого-нибудь есть опыт, похожий на проблему, или кто-то может предложить способ сделать это более эффективно и, если возможно, с помощью клиентского 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" />
Вероятно, есть много способов сделать это, но вы можете получить все строки каждый раз, когда вы нажимаете на строку, а затем перебираете их через цикл for
, игнорируя строку заголовка.
Внутри цикла вы обрабатываете только все строки, которые hqave имеют 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" />
data-holder-id="2"
тогда вы можете сделать прямой document.querySelectorAll("[data-holder-id=' + selectedId + ']")
разумеется вместо document.
Вы можете использовать таблицу для выбора области вместо. Это помогло бы, если у вас есть тонны строк, обрабатывать только те, которые совпадают с самого начала.