可以将单元格编辑为下拉列表并使用 JQGard 进行多选


can make celledit to dropdown and multiselect with jqgrid?

$.(document).ready(function() {
    $.ajax({
        url: 'xx_op.php',
        ...success: function(result) {
            result = JSON.parse(result);
            var colNames = result.columnNames;
            var colModel = result.colModel;
            $.("list").jqGrid({
                colNames: colNames,
                colModel: colModel,
                cellEdit: true,
                cellsubmit: 'clientArray',
                afterSaveCell: function(rowid, cellname, value, iRow, iCol) {
                    var y = $("group_list").getChangedCells('dirty');
                    var t = JSON.stringify(y);
                    $.ajax({
                        ....
                    });
                }
            });
        }
    });
});

你能理解我的意思吗?我想将单元格编辑设置为下拉列表和多选,那么如何编写代码?这是我最终想要实现的效果图。 并且每个同名都像图片,值因同名而异

在此处输入图像描述

您需要

为要成为多选选项的列定义编辑类型和编辑选项。

这里也是关于多选的有用链接

这是我在jsfiddle中为您创建的解决方案

 var mydata = [
                    {id: "10", Name: "dog",     Singleselect: "1", Multiselect: [1]},
                    {id: "20", Name: "cat", Singleselect: "1", Multiselect: [2]},
                    {id: "30", Name: "fish",    Singleselect: "2", Multiselect: [3, 4]},
                    {id: "40", Name: "elephant",      Singleselect: "2", Multiselect: [4]}
                ],
                lastSel;
            $("#list").jqGrid({
                data: mydata,
                cellEdit:true,
                datatype: "local",
                cellsubmit: 'clientArray',
                colModel: [
                    { name: "Name", width: 130 },
                    { name: "Singleselect", width: 100, formatter: "select", edittype: "select",
                        editoptions: {
                            value: {"1": "sport", "2": "science"},
                            size: 2
                        }
                    },
                    { name: "Multiselect", width: 250,
                        formatter: "select",
                        edittype: "custom",
                        editoptions: {
                            value: {"1": "Swim", "2": "Eat 1", "3": "drink", "4": "bark"},
                            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
                        }
                    }
                ],
                cmTemplate: { editable: true },
                gridview: true,
                sortname: "Name",
                sortorder: "desc",
                viewrecords: true,
                rownumbers: true,
                pager: "#pager",
                height: "100%",
                editurl: "clientArray",
                caption: "Multi select options"
            });

在你的PHP中添加它,无论你在哪里创建列模型SEe 也是解决方案在这里,奥列格创造了与您的相似的

内容
  editoptions: 
   {
      'custom_element': multiselectcallback,
      'custom_value': multiselectvalue,
       multiple: true
   }

然后把它们放到javascript中

function multiselectcallback(value, options) {
   //get dropdown values using ajax and load them on success 
   $.get( "xx_op.php/getdropdownlistdata", function(result) {
    return $.jgrid.createEl.call(this, "select", $.extend(true, {}, options, {custom_element: null, custom_value: null}), result);                                   
 }

函数多选值(elem, op, v( {

if (operation === "get") 
 {
  return $elem.val();
}