To add an editable checkbox in JQGrid, you can use the edittype
property of the colModel
to specify that the column should be of type "checkbox". Here are the steps you can follow:
- Define your JQGrid configuration and add a column with
edittype
set to"checkbox"
:
javascript$("#grid").jqGrid({
url: "your_api_url",
mtype: "GET",
datatype: "json",
colNames: ["Column 1", "Checkbox Column"],
colModel: [
{ name: "col1", index: "col1", width: 100 },
{ name: "checkbox_col", index: "checkbox_col", width: 100, align: "center", editable: true, edittype: "checkbox", editoptions: { value: "True:False" } },
],
});
In the example above, the editoptions
property is set with the values "True:False"
to specify the value mapping for the checkbox column.
- Set up the editing options for the checkbox column:
javascript$("#grid").jqGrid("navGrid", "#pager", { edit: true, add: true, del: true });
$("#grid").jqGrid("inlineNav", "#pager", {
edit: true,
add: true,
save: true,
cancel: true,
editurl: "your_api_url",
});
- Handle the PUT or POST request on your server-side API and update the database accordingly.
Note that you may also need to include any necessary authentication tokens or headers in your AJAX request, depending on your API requirements.
Comments
Post a Comment