【问题标题】:Does jQuery jqGrid edit form support fields that are multiselect?jQuery jqGrid 编辑表单是否支持多选字段?
【发布时间】:2011-06-26 11:22:06
【问题描述】:

我仍在尝试找出是否可以在 jqGrid 中有一个单元格,当我拉出该行的编辑表单时,我需要一个可以将该列显示为多选列表的 GUI。

这可能是:

  1. 复选框列表
  2. 选择带有复选框的列表,以便您可以选择多个。

这在 jqGrid 中可行吗?

【问题讨论】:

    标签: jquery jqgrid jqmodal


    【解决方案1】:

    jqGrid 支持多选编辑。它不使用复选框进行选择,而是使用多选选择元素。我在双击时使用内联编辑制作了the demo

    下面是对应的代码:

    jQuery(document).ready(function() {
        var lastSel, mydata = [
            {id:0, Name:"Lukas Podolski",     Category:"1", Subcategory:"1"},
            {id:1, Name:"Michael Schumacher", Category:"1", Subcategory:"2"},
            {id:2, Name:"Albert Einstein",    Category:"2", Subcategory:"3,4"},
            {id:3, Name:"Blaise Pascal",      Category:"2", Subcategory:"4"}
        ], grid = jQuery("#list");
        grid.jqGrid({
            data: mydata,
            datatype: 'local',
            colModel: [
                { name: 'Name', index: 'Name', width: 130, editable: true },
                {
                    name: 'Category', index: 'Category', width: 100,
                    formatter:'select', editable: true, edittype:'select',
                    editoptions: {
                        value: '1:sport;2:science',
                        multiple: true,
                        size: 2
                    }
                },
                {
                    name: 'Subcategory', index: 'Subcategory', width: 250,
                    formatter:'select', editable:true, edittype:'select',
                    editoptions: {
                        value: '1:football;2:formula 1;3:physics;4:mathematics',
                        multiple: true,
                        size: 4
                    }
                }
            ],
            sortname: 'Name',
            viewrecords: true,
            rownumbers: true,
            sortorder: 'desc',
            pager: '#pager',
            height: '100%',
            editurl: 'clientArray',
            ondblClickRow: function(rowid) {
                jQuery(this).jqGrid('editRow', rowid, true, null, null, 'clientArray');
            },
            onSelectRow: function(id){
                if (id && id!==lastSel){
                    jQuery(this).restoreRow(lastSel);
                    lastSel=id;
                }
            },
            caption: 'Selects with multiselect'
        });
    });
    

    顺便说一句,在创建the demo 的过程中,我发现不能使用以“0”作为 id 的选择元素,这不是完全支持的。例如,“1:sport;2:science”有效,但“0:sport;1:science”无效。在不保存“运动”项目的选择的情况下。

    如果您需要使用更舒适的复选框控件,您必须实现与 custom editing 相关的行为。

    【讨论】:

    • @Oleg - 谢谢。我的问题是我的列表很长(大约 100 项),因此与在表格中显示复选框列表相比,上述解决方案是一个难以跟踪的 UI。
    • @ooo:size 属性会很有帮助。它表示将显示选择中的多少项目。其余的将在滚动方面看到。另一方面,如果您想显示包含 100 个项目的多选框,那么用户将不太舒服。在这种情况下,一个启用了多选功能的额外 jqGrid 表似乎更适合作为任何类型的多选复选框。另一个想法:您可以考虑将使用自动完成 jQuery UI 控件的场景。
    • @ooo: 当然你可以使用我在all kind的编辑中描述的多选选择元素,例如表单编辑。
    • @Oleg - 你能澄清一下你所说的“另一个 jqgrid 表”是什么意思吗?你是说你可以有一个 jqgrid 表作为字段值的自定义编辑??
    • @ooo:自定义编辑是一种可能的方式(见我回答的最后一句话。一般情况下,您可以弹出 jQuery UI 对话框来选择您需要的选项。它可以是 jQuery UI 对话框里面有 jqGrid。它可以有 jQuery UI 自动完成控件,也可以是多选插件,例如用于列选择器(参见trirand.com/jqgridwiki/…)。在所有描述的解决方案中,我说 不是关于 jqGrid 功能如果是我的回答中的演示。你必须编写不能很小的 JavaScript 代码。
    猜你喜欢
    • 1970-01-01
    • 2011-06-20
    • 1970-01-01
    • 1970-01-01
    • 2011-03-25
    • 1970-01-01
    • 2015-07-10
    • 2013-07-06
    • 2018-02-17
    相关资源
    最近更新 更多