Я добавляю таблицу jqGrid в свой основной проект. net.
Я хочу показать первый столбец моей таблицы как флажок. (Заголовок и строки с флажком)
Содержимое файла test.cs html page
<html lang="ja">
<head>
<meta charset="utf-8" />
<link href="~/lib/bootstrap4-toggle/css/bootstrap4-toggle.min.css" rel="stylesheet" />
<!-- Files for jqgrid-->
<link href="~/lib/jqueryui/jquery-ui.css" rel="stylesheet" />
<link href="~/lib/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
<link rel="icon" href="~/image/logoTitle.png" />
<link href="~/css/myCSS.css" rel="stylesheet" />
</head>
<body>
<div>
<table id="jqGrid"></table>
<div id="jqControls"></div
</div>
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="~/lib/jqgrid/js/i18n/grid.locale-ja.js" type="text/javascript"></script>
<script src="~/lib/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="~/js/test.js"></script>
</body>
</html>
Содержимое файла tets.ts
interface JQuery {
[x: string]: any;
jqGrid: any;
}
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: "./GetData",
datatype: 'json',
mtype: 'Get',
multiselect: true,
colNames: ['Col1', 'Col2', 'Col3'],
colModel: [
{ key: false,name:'Col1',index:'Col1',editable:true,sortable:true,width:'100px',search: false,align:'center'},
{ key:false,name:'Col2',index:'Col2',editable:true,sortable:true,width:'120px',search: false,align:'center'},
{ key:false,name:'Col3',index: 'Col3',editable:true,sortable:true,width:'100px',search: false,align:'center'}
],
pager: jQuery('#jqControls'),
rowNum: 20,
rowList: ['10', '20', '30', '40', 'All'],
height: 600,
viewrecords: true,
sortname: 'Col1',
sortorder: 'desc',
caption: '',
emptyrecords: '',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
beforeSelectRow: function (rowid, e) {
// Disable row selection
return false;
},
onCellSelect: function (rowid, iCol, cellcontent, e) {
// Handle Add, Edit, Delete action
//handleAction(rowid, iCol, cellcontent, e);
},
onSortCol: function (index, iCol, sort) {
// set current page number
//jQuery("#jqGrid").setGridParam({ page: PageNumber });
},
loadComplete: function (data) {
// save current page number
PageNumber = data.page;
// error handling
if (data.success === false) {
}
}
});
$(".ui-jqgrid-titlebar").hide(); function () { fnBeforeSearch(); } });
});
с использованием вышеуказанного исходного кода все столбцы таблиц видны в браузере, но флажки не отображаются. Я проверил таблицу jqGrid, и результат выглядит следующим образом.
Изображение 1: когда флажок не отображается в браузере
Изображение 2: Обновил вручную тип ввода для кнопки 
Дополнительная информация: Браузер: Edge
JQGrid: jqGrid JS - v5.4.0
jqueriui: jQuery UI - v1.12.1