[英]Using jQuery to get multiple checkbox's value and Multiple Delete Using jquery json
我已經使用jQuery json綁定了html表。 我想使用jQuery json獲取多個復選框值,並通過選擇的多個delete方法刪除。 這是我綁定表的代碼。
$(function () {
debugger
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm5.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function (dt) {
debugger;
for (var i = 0; i < dt.d.length; i++) {
$("#example1 > tbody").append("<tr><td> <input type='checkbox' /></td><td>" + dt.d[i].CategoryID + "</td><td>" + dt.d[i].Name + "</td><td>" + dt.d[i].Status + "</td><td> <button type='submit'>Submit</button><button type='submit' onclick='deleteRecord(" + dt.d[i].CategoryID + ")'>Delete</button> </tr>");
}
$("#example1").DataTable();
},
error: function (result) {
alert("Error");
}
});
});
這是我選擇的“刪除按鈕”(多次刪除):
<button type="button" name="deletebtn" id="deletebtn">Delete Selected</button>
這是我的html表:
<div class="box-body">
<button type="button" name="deletebtn" id="deletebtn">Delete Selected</button>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Check Box</th>
<th>Category Name</th>
<th>Category Details</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
</div>
你只是告訴我:
1.選中所有復選框的代碼是什么?
2.使用多個jQuery刪除代碼?
服務器端代碼在此處用於單個刪除(不帶復選框):
[WebMethod]
public static void deleteRecord(int Id)
{
clsCategoryBL objproject = new clsCategoryBL();
objproject.CategoryDelete(Id);
}
在BL中:
public string CategoryDelete(int CategoryID)
{
using (KSoftEntities db = new KSoftEntities())
{
try
{
var categoryDetails = db.tblCategories.Where(i => i.CategoryID == CategoryID).SingleOrDefault();
db.tblCategories.Remove(categoryDetails);
db.SaveChanges();
return "Record deleted successfully";
}
catch (Exception ex)
{
}
return "Error on deletion";
}
}
使用以下代碼在客戶端發生刪除:
$().ready(function () {
$('body').on('click', '#deletebtn', function () {
debugger;
$("#example1 tr").each(function () {
var rowSelector = $(this);
if (rowSelector.find("input[type='checkbox']").prop('checked')) {
rowSelector.remove();
}
});
});
});
綁定表的代碼:
enter code here
protected void Page_Load(object sender, EventArgs e)
{
if (Session["adminuser"] == null)
Response.Redirect("Default.aspx");
if (!IsPostBack)
{
// Page.Title = "Category Details";
BindDatatable();
}
}
[WebMethod]
public static UserDetails[] BindDatatable()
{
clsCategoryBL objcategory = new clsCategoryBL();
List<UserDetails> details = new List<UserDetails>();
DataTable dt = new DataTable();
//var categories= clsCategoryBL.GetAllCategoryDetails("admin");
dt = objcategory.GetAllCategoryDetails("admin");
if (dt.Rows.Count > 0)
{
foreach (DataRow dtrow in dt.Rows)
{
UserDetails user = new UserDetails();
user.CategoryID = dtrow["CategoryID"].ToString();
user.Name = dtrow["Name"].ToString();
user.Status = dtrow["Status"].ToString();
details.Add(user);
}
//literal1.Text = html.ToString();
}
return details.ToArray();
}
public class UserDetails
{
public string CategoryID { get; set; }
public string Name { get; set; }
public string Status { get; set; }
}
我想在服務器端刪除它,這也意味着在我的數據庫(Sql)上,那我該怎么辦???
我也想通過單擊數據庫上的多個復選框來刪除多行。.我也在上面的后端代碼中提到了..我想通過單擊2至3復選框來刪除html表的行(可能會有所不同,具體取決於數據),然后點擊刪除所選按鈕。按f12后的表格結構:
enter code here
<table id="example1" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="example1_info">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Check Box: activate to sort column descending" style="width: 204px;">Check Box</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Category Name: activate to sort column ascending" style="width: 276px;">Category Name</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Category Details: activate to sort column ascending" style="width: 293px;">Category Details</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 148px;">Status</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 211px;">Action</th></tr>
</thead>
<tbody id="myBody">
<tr role="row" class="odd"><td class="sorting_1"> <input type="checkbox"></td><td>42</td><td>xyz</td><td>True</td><td> <button type="submit">Submit</button><button type="submit" onclick="deleteRecord(42)">Delete</button> </td></tr><tr role="row" class="even"><td class="sorting_1"> <input type="checkbox"></td><td>33</td><td>Advertising</td><td>True</td><td> <button type="submit">Submit</button><button type="submit" onclick="deleteRecord(33)">Delete</button> </td></tr><tr role="row" class="odd"><td class="sorting_1"> <input type="checkbox"></td><td>31</td><td>Travel & Hospitality</td><td>True</td><td> <button type="submit">Submit</button><button type="submit" onclick="deleteRecord(31)">Delete</button> </td></tr></tbody>
</table>
假設一行中只有一個復選框,則可以簡單地遍歷各行並將其發布到現有的[WebMethod]
將第二列用作ID( EDIT ):
$().ready(function () {
$('body').on('click', '#deletebtn', function () {
$("#example1 tr").each(function () {
var rowSelector = $(this);
if (rowSelector.find("input[type='checkbox']").prop('checked'))
{
//THE MARKUP SHOWING THE ID IS NOT AVAILABLE
//POST A TABLE ENTRY TO CLEAR UP
var id = rowSelector.find('td').first().next().html();
var sendObj = {Id : id};
//USE JSON OBJECT
$.ajax({
url : "/page.aspx/deleteRecord",//CHANGE TO YOUR URL
dataType: "json",
data: sendObj,
type: "POST",
success: function () {
alert("entry deleted");
}
});
rowSelector.remove();
}
});
});
});
說明
使用JQuery,您只需遍歷每一行並查找復選框值。 請注意,您還將遍歷標題,因此,如果存在復選框,則必須添加邏輯以跳過第一次迭代 。
編輯3:如果選中此復選框,您還將ID張貼到服務器。 需要注意的重要一點是,您寧願發布ID的單個批量數組,而不是發布多個單獨的帖子,但是該方法尚未在此處公開或發布。
祝好運
代碼片段(僅客戶端)
$().ready(function () { $('body').on('click', '#deletebtn', function () { $("#example1 tr").each(function () { var rowSelector = $(this); if (rowSelector.find("input[type='checkbox']").prop('checked')) { rowSelector.remove(); } }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button id='deletebtn'>DELETE</button> <table id='example1'> <thead> <tr> <th>CHECKBOX</th> <th>NAME</th> <th>DESCRIPTION</th> </tr> </thead> <tbody> <tr> <td><input type='checkbox' value='check' /></td> <td>the name</td> <td>the description</td> </tr> <tr> <td><input type='checkbox' value='check' /></td> <td>the name</td> <td>the description</td> </tr> <tr> <td><input type='checkbox' value='check' /></td> <td>the name</td> <td>the description</td> </tr> </tbody> </table> </div>
一個更簡單的方法是,如果為表單中的所有復選框提供一個類,然后單擊按鈕,則只需使用該類迭代所有復選框,然后序列化它們的值即可。
var values = $("#Myform").find(".CheckBoxClass").serialize();
在這里,變量value
將包含表單中所有復選框的值,您可以在服務器上使用ajax將其發送以執行進一步的操作。
您可以使用下面提到的內容。
$(“ example1 input:checkbox”)。prop('checked',this.checked);
或者已經在下面的帖子中回答了
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.