如何在jQgrid标头中添加一个复选框

<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);
          });
        });
      }
    }
  });
});