祖?zhèn)鞔a的存在曹洽，這個(gè)項(xiàng)目自我進(jìn)公司以來(lái)，就一直在改寫加上維護(hù)蹭沛，沒(méi)有什么太厲害的技術(shù)臂寝，據(jù)說(shuō)在我進(jìn)公司之前，是經(jīng)過(guò)兩個(gè)Java后臺(tái)來(lái)編寫遺留下來(lái)的代碼致板，公司覺(jué)得若是重新搭建框架過(guò)于費(fèi)力交煞，于是一直沿用至今，隨著功能的越來(lái)越多斟或，維護(hù)起來(lái)也是相當(dāng)?shù)馁M(fèi)腦素征，每次修改的時(shí)候，我都會(huì)將某個(gè)部分的功能記錄下來(lái)萝挤，寫在自己的技術(shù)博客里面御毅，以防混淆。
主要功能有：jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能
1：點(diǎn)擊全選的選擇框CheckBox怜珍，選中以下列表中所有的選擇框
2：再次點(diǎn)擊全選的選擇框CheckBox端蛆，不選中以下列表中所有的選擇框
3：?jiǎn)芜x某個(gè)選擇框
如圖所示：
GLj5a5BWo9.gif
簡(jiǎn)單代碼demo：
<thead>
<tr role="row" class="heading">
<th style="width: 44.8889px;">
全選 <input type="checkbox" name="keeperUserGroup-checkable" class="group-checkable" data-set="#sample_1 .checkboxes" />
</th>
<th>告警日期</th>
<th class="a">姓名</th>
<th>性別</th>
<th>所屬單位</th>
<th>位置詳情</th>
</tr>
</thead>
columns內(nèi)容：
render : function(data, type, row, meta) {
var content = '<label style="margin-left:32px;" class="mt-checkbox mt-checkbox-single mt-checkbox-outline">';
content += ' <input type="checkbox" name="test" class="group-checkable"" value="'
+ data + '" />';
content += '</label>';
return content;
}
主要的js部分代碼：
/* 批量刪除 */
$('#Button1').click(function() {
if ($("input[name='test']:checked")[0] == null) {
alert("請(qǐng)選擇需要?jiǎng)h除的消息");
return;
}
if (confirm("確認(rèn)刪除嗎？")) {
var ids = new Array;
$("input[name='test']:checked").each(function() {
ids.push($(this).val());
n = $(this).parents("tr").index() + 1; // 獲取checkbox所在行的順序
$("table#dataTable").find("tr:eq(" + n + ")").remove();
});
$.ajax({
url : basePath + "sos/deleteAlerts",
data : "ids=" + ids,
type : "post",
dataType : "json",
success : function(data) {
dataTable.reloadTable();
}
});
}
})
原文作者：祈澈姑娘技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子酥泛，愛(ài)編程今豆，愛(ài)運(yùn)營(yíng)，愛(ài)折騰柔袁。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題呆躲，堅(jiān)持記錄工作中所所思所見(jiàn)，歡迎大家一起探討交流捶索。
