jquery bootstrap表格提供了非常方便的多選功能,可以讓用戶在表格內選中多個選項,然后進行一次性的操作。
首先需要在表格的頭部加上checkbox,用來全選或取消全選:
<th><input type="checkbox" id="chkAll"></th>
然后需要給每一行的checkbox綁定事件,實現選中或取消選中的效果:
$(document).on('change', 'tbody input[type="checkbox"]', function() { var isChecked = $(this).prop('checked'); $(this).closest('tr').toggleClass('selected', isChecked); $("#chkAll").prop('checked', $('tbody input[type="checkbox"]').length == $('tbody input[type="checkbox"]:checked').length); });
這段代碼使用了jQuery的事件綁定方式,在每次行內checkbox改變時進行相應的操作。
最后需要在某個按鈕的點擊事件中獲取選中的行:
$("#btnSubmit").click(function() { var ids = ""; $('tbody input[type="checkbox"]:checked').each(function() { ids += $(this).closest('tr').find('td:eq(0)').text() + ","; }); ids = ids.slice(0, -1); //do something with the ids });
這段代碼使用了jQuery的each循環遍歷所有選中的行,并獲取選中行的第一列數據,用逗號拼接起來作為參數傳遞給后端進行處理。
通過以上三個步驟,就可以實現jquery bootstrap表格的多選功能。
上一篇mysql三表練習題