jqGrid如何将多个复选框添加到一列中

jqGrid how to add multiple checkboxes to a column

本文关键字：一列 添加 复选框 jqGrid      更新时间：2023-10-23

我想在编辑/添加模式下为一列添加多个复选框。现在，此列有一个启用了多个选项的选择框。我想用复选框列表或单选按钮列表替换它

我的想法是：用户应该能够通过选中特定单元格中列出的复选框来选择他想要的相关选项（在添加或编辑模式下：内联）。保存行后，应仅显示用户选择的所选选项（无复选框）。

下面是我为特定列选择框的代码片段：

{
     name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select',
                   editoptions: {
                         value: roomTypesFormatterEdit,
                         custom_element: function (value, options) {
                             return $.jgrid.createEl.call(this, "select",
                                 $.extend(true, {}, options, { custom_element: null, custom_value: null }),
                                 value);
                         },
                         custom_value: function ($elem, operation, value) {
                             if (operation === "get") {
                                 return $elem.val();
                             }
                         },
                         multiple: true
                     },
                     align: 'left', formatter: roomTypesFormatter
                 },

其中"roomTypesFormatterEdit"返回将显示在选择框中的酒店房间名称列表。

此外，我想重新排列编辑（编辑模式）行的高度，以适应复选框的高度，或显示选择框中的所有项目

请帮助感谢所有

我认为您不需要编写自定义编辑控件（custom_element和custom_value）或自定义格式化程序（formatter和unformat）。相反，您只需要将multiple: true属性添加到editoptions即可获得基本的多选功能。为了提高可见性，您可以使用一些现有的控件，如jQuery UI MultiSelect Widget或Select2。答案和这个提供了使用jQueryUIMultiSelectWidget的演示。还有一个答案，这一个提供了使用Select2的演示。演示不使用Select2的多选功能，但它只是控件的一个选项（请参阅文档）。

相关文章：