Как автоматически выбрать другую строку с таким же идентификатором, когда пользователь выбрал строку в GridView ASP.NET

1

У меня есть 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>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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(&#39;Are you sure you want to process selected transactions?&#39;);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder$btnGenerateSwitching&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))"
  id="ctl00_ContentPlaceHolder_btnGenerate" class="ButtonStyle" />
  • 0
    При публикации разметки помогает увидеть, что представляет собой обработанная разметка вывода, а не код, который генерирует разметку, поскольку это та часть, с которой будет работать ваш JavaScript.
  • 0
    Я добавил фрагмент кода. Но это не оказывает никакого вывода. Может кто-то указать на ошибку?
Показать ещё 2 комментария
Теги:
gridview

1 ответ

0
Лучший ответ

Вероятно, есть много способов сделать это, но вы можете получить все строки каждый раз, когда вы нажимаете на строку, а затем перебираете их через цикл 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>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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(&#39;Are you sure you want to process selected transactions?&#39;);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder$btnGenerateSwitching&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))"
  id="ctl00_ContentPlaceHolder_btnGenerate" class="ButtonStyle" />
  • 0
    Это сработало! Это идеально и именно то, что мне нужно. Будьте здоровы. Вы действительно сделали мой день. Огромное спасибо.
  • 0
    Другой вариант - дать каждой строке атрибут, содержащий идентификатор держателя, аналогично data-holder-id="2" тогда вы можете сделать прямой document.querySelectorAll("[data-holder-id=' + selectedId + ']") разумеется вместо document. Вы можете использовать таблицу для выбора области вместо. Это помогло бы, если у вас есть тонны строк, обрабатывать только те, которые совпадают с самого начала.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню