在 jqGrid 标头中添加一个复选框,您可以使用 beforeRequest
事件和一些自定义的 HTML 和 CSS 来实现
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.7.0/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.7.0/ui.jqgrid.min.css">
<table id="grid"></table>
<div id="pager"></div>
$(document).ready(function () {
$("#grid").jqGrid({
url: 'server.php?q=1', // 更改为您的数据源 URL
editurl: "server.php",
datatype: "json",
mtype: "GET",
colNames: ['Select', 'ID', 'Name'],
colModel: [
{ name: 'sel', width: 40, sortable: false, resizable: false, formatter: 'checkbox' },
{ name: 'id', width: 60, sortable: true },
{ name: 'name', width: 150, sortable: true }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: 'desc',
caption: "jqGrid with Header Checkbox",
beforeRequest: function () {
var headerCheckbox = $("#cb_selectAll");
if (headerCheckbox.length === 0) {
var thd = $("#grid").parent().find(">thead>tr.jqgfirstrow>th");
thd.eq(0).prepend('<input type="checkbox" id="cb_selectAll" />');
headerCheckbox = $("#cb_selectAll");
headerCheckbox.click(function () {
var isChecked = $(this).is(':checked');
$("#grid").find("input[type='checkbox']").each(function () {
$(this).prop("checked", isChecked);
});
});
}
}
});
});
在这个例子中,我们首先创建了一个空的 jqGrid,然后在 beforeRequest
事件中向表头的第一列添加了一个复选框。我们还为这个复选框添加了一个点击事件,这样当用户点击表头的复选框时,所有的行都会被选中或取消选中。
领取专属 10元无门槛券
手把手带您无忧上云