jquery 从复选框中获取数据作为字符串到SQL数据库

kb5ga3dv  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(73)

我怎样才能得到字符串的值并将其用作sp的参数?
我正在开发一个模块,该模块通过使用复选框和按钮编辑特定列来显示帐户列表,并将通过单击按钮打开某种类型的新窗口,从它们中我可以编辑我要更改的特定列。
这是我的网页代码

[WebMethod(EnableSession = true)]
public static object List(string search, int jtStartIndex, int jtPageSize, string jtSorting)
{
    try
    {
        jtStartIndex = jtStartIndex + 1;
        var pageIndex = jtStartIndex > jtPageSize ? Math.Ceiling(decimal.Parse(jtStartIndex.ToString()) / decimal.Parse(jtPageSize.ToString())) : 1;
        IEnumerable<NewAccount> List= SortRecord(_repository.NewAccount.GetList(search, int.Parse(pageIndex.ToString()), jtPageSize), jtSorting);

        var totalRecord = List.Count() > 0 ? List.FirstOrDefault().totalRecord : 0;

        return new { Result = "OK", Records = List, TotalRecordCount = totalRecord };
    }
    catch (Exception ex)
    {
        return new { Result = "ERROR", Message = ex.Message };
    }
}

im使用jtable有更多的按钮在这里和那里,但这只是为复选框和表

$(document).ready(function () {
$('#TableContainer').jtable({
    title: 'List',
    paging: true,
    pageSize: 10,
    sorting: true,
    defaultSorting: 'Id DESC',
    actions: {
        listAction: 'List.aspx/List'
    },
    fields: {
        Tag: {
            sorting: false,
            title: function (data) {
                return '<input type="checkbox" class="chkAll">';
            },
            width: '2.5%',
            display: function (data) {
                return '<input type="checkbox" class="chk">';
            }
        },
        ref_no: {
            title: 'Reference No.' ,
            width: '5%',
        },
        borrowerName: {
            title: 'Borrower Name'
        },
        lendingUnitDesc: {
            title: 'Lending Unit'
        },
        statusDesc: {
            sorting: false,
            title: 'Status',
            width: '4%'
        },
        rmName: {
            title: 'RM'
        },
        addedBy: {
            title: 'Owner'
        },
        SeniorReviewer: {
            title: 'Senior Reviewer'
        }
    },
})

$(".chkAll").click(function (event) {       
    if (this.checked) { 
        $(':checkbox').each(function () { 
            this.checked = true;            
        });
    } else {
        $(':checkbox').each(function () { 
            this.checked = false;                      
        });
    }
});

下面是使用复选框从列中获取值的代码

$("#btnReassign").button()
    .click(function () {
        var checkedBoxes = document.querySelectorAll('input[class="chk"]:checked');
        checkedBoxes.forEach(chk => {
            chk.closest("tr").querySelectorAll('td:nth-child(2)').forEach((td) => {
            });
        })
    });

下面是我的代码的HTML部分

<div class="site-container" style="width:100%">
    <div id="SearchRecord" style="background-color:#DEEDF8; padding:3px; border:1px solid #DDDDDD; color:#2e6894">
        &nbsp;&nbsp;Search Record : <input type="text" id="txtSearch" value="" size="40" />&nbsp;
        <input type="button" id="btnSearch" value="Filter"/>&nbsp;&nbsp;
        <input type="button" id="btnFilterby" value="Filter By RM/Lending Unit" />&nbsp;&nbsp;
        <input type="button" id="btnReset" value="Reset" />&nbsp;&nbsp;
        <input type="button" id="btnReassign" value="Reassign" />&nbsp;&nbsp;
        <input type="hidden" id="lblValidation" style="color:#ff0000; font-weight:bold"/>
    </div>
    <div id="TableContainer" style="width:100%"></div>
</div>
<input type="hidden" id="hdnRefNo" class="hdnRefNo" value="0"/>
        <div class="div-RMpopup" style="width: 98%; margin: 0 auto;">
            <div id="dvFilterModalPopUp"></div>
            <div id="dvReassignModalPopUp"></div>
        </div>
<br /><br />

我编辑我的问题,包括我的一些代码,以澄清一些事情。

piah890a

piah890a1#

如果能看到一些HTML
我们来分析一下
适当的取消注解/注解

window.addEventListener('DOMContentLoaded', () => { // when page has loaded
  document.getElementById('getInfo').addEventListener('click', () => {
    var checkedBoxes = document.querySelectorAll('input[class="chk"]:checked'); // all checked boxes
    const values = [...checkedBoxes].map(chk => {
      const checkedRow = chk.closest("tr");
      const cellWeWant = checkedRow.querySelectorAll('td')[2]
      const textWeWant = cellWeWant.textContent; // if the text
      const valueWeWant = cellWeWant.querySelector('input').value; // if the value of an input
      // return textWeWant; // uncomment to get text
      return valueWeWant;   // comment above and uncomment to get values 
    });
    console.log(values)
  });
});
<table>
  <tbody>
    <tr>
      <td><input type="checkbox" class="chk" /></td>
      <td>Line 1</td>
      <td>Description 1 <input type="text" value="value1" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="chk" /></td>
      <td>Line 2</td>
      <td>Description 2 <input type="text" value="value2" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="chk" /></td>
      <td>Line 3</td>
      <td>Description 3 <input type="text" value="value3" /></td>
    </tr>
  </tbody>
</table>
<button type="button" id="getInfo">Get info</button>

我试图从你发布的内容创建一个[mcve],但我认为它不是我们在这里谈论的jTable?

$(function() {
  $('#TableContainer').jtable({
    title: 'List',
    paging: true,
    pageSize: 10,
    sorting: true,
    defaultSorting: 'Id DESC',
    actions: {
      listAction: 'List.aspx/List'
    },
    fields: {
      Tag: {
        sorting: false,
        title: function(data) {
          return '<input type="checkbox" class="chkAll">';
        },
        width: '2.5%',
        display: function(data) {
          return '<input type="checkbox" class="chk">';
        }
      },
      ref_no: {
        title: 'Reference No.',
        width: '5%',
      },
      borrowerName: {
        title: 'Borrower Name'
      },
      lendingUnitDesc: {
        title: 'Lending Unit'
      },
      statusDesc: {
        sorting: false,
        title: 'Status',
        width: '4%'
      },
      rmName: {
        title: 'RM'
      },
      addedBy: {
        title: 'Owner'
      },
      SeniorReviewer: {
        title: 'Senior Reviewer'
      }
    },
  })

  $(".chkAll").click(function(event) {
    if (this.checked) {
      $(':checkbox').each(function() {
        this.checked = true;
      });
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      });
    }
  });
  $("#btnReassign").on("click", function() {
    var checkedBoxes = $('input[class="chk"]:checked'); // all checked boxes
    const values = [...checkedBoxes].map(function() {
      const $checkedRow = $(this).closest("tr");
      const $cellWeWant = $checkedRow.find('td').eq(2)
      const textWeWant = $cellWeWant.text(); // if the text
      const valueWeWant = $cellWeWant.find('input').val(); // if the value of an input
      // return textWeWant; // uncomment to get text
      return valueWeWant; // comment above and uncomment to get values 
    }).get();
    console.log(values)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.jtable.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/lib/themes/metro/blue/jtable.min.css" rel="stylesheet">

<div class="site-container" style="width:100%">
  <div id="SearchRecord" style="background-color:#DEEDF8; padding:3px; border:1px solid #DDDDDD; color:#2e6894">
    &nbsp;&nbsp;Search Record : <input type="text" id="txtSearch" value="" size="40" />&nbsp;
    <input type="button" id="btnSearch" value="Filter" />&nbsp;&nbsp;
    <input type="button" id="btnFilterby" value="Filter By RM/Lending Unit" />&nbsp;&nbsp;
    <input type="button" id="btnReset" value="Reset" />&nbsp;&nbsp;
    <input type="button" id="btnReassign" value="Reassign" />&nbsp;&nbsp;
    <input type="hidden" id="lblValidation" style="color:#ff0000; font-weight:bold" />
  </div>
  <div id="TableContainer" style="width:100%"></div>
</div>
<input type="hidden" id="hdnRefNo" class="hdnRefNo" value="0" />
<div class="div-RMpopup" style="width: 98%; margin: 0 auto;">
  <div id="dvFilterModalPopUp"></div>
  <div id="dvReassignModalPopUp"></div>
</div>
<br /><br />

相关问题