gpt4 book ai didi

c# - 自定义 jQuery DataTable 以获取自定义复选框事件行明智

转载 作者:行者123 更新时间:2023-12-01 08:38:24 25 4
gpt4 key购买 nike

我正在尝试使用自定义CheckBox列修改jQuery DataTable。我的要求是在表格的每一行添加一个 CheckBox ,并添加带有相应行复选框的点击事件,因此每当我单击复选框时,它应该显示相关行的详细信息或获取数据到数据库。我可以通过 Ajax 调用从数据库获取数据,并使用 CheckBoxes 完成。我按照本教程使其工作,现在工作正常:

jQuery DataTable with CheckBoxes

这是我到目前为止在后端所做的事情:

public JsonResult GetData()
{
var result = db.Doctors.Select(c => new
{
FirstName = c.Firstname,
LicenseNo = c.LicenseNo
}).ToList();

return Json(new { data = result }, JsonRequestBehavior.AllowGet);
}

在前端:

<link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet" />
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/css/dataTables.checkboxes.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/js/dataTables.checkboxes.min.js"></script>
<script>
$(document).ready(function () {
var table = $('#example').DataTable({
"ajax": {
url: '@Url.Action("GetData")',
type: "get",
datatype: "json",
data: {}
},

"columnDefs": [
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],

"columns": [
{ "data": "FirstName" },
{ "data": "FirstName" },
{ "data": "LicenseNo" }
],

'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
});
</script>

<body>
<div>
<hr><br>
<form>
<table id="example" class="display" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>License No</th>
</tr>
</thead>
</table>
<hr>
</form>
</div>
</body>

现在的问题是如何在 jQuery DataTable 中添加复选框单击事件。因此,每当我单击复选框时,我都可以检索相应的行详细信息。

注意:我对此做了一些研发,并检查了 CheckBox 是否被赋予了一个名为 dt-checkboxes 的类。它是动态生成的。有什么方法可以满足我的要求,比如为复选框分配唯一的 id,有点卡在这里。这就是它的样子 - 足够简单:

jQuery DataTable

最佳答案

您可以在 select 上使用事件监听器和 deselect事件。

table.on( 'deselect', function ( e, dt, type, indexes ) {
//get the row information for the row deselected.
console.log(dt.row(indexes).data());
});
table.on( 'select', function ( e, dt, type, indexes ) {
//get the row information for the row selected.
console.log(dt.row(indexes).data());
});

上面的代码片段将为您提供已选择或取消选择的行的数据。

forked your fiddle来演示它。

关于c# - 自定义 jQuery DataTable 以获取自定义复选框事件行明智,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50533272/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com