可以使用 jqgrid 使 celledit 下拉和多选吗？

Question

$.(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({
                        ....
                    });
                }
            });
        }
    });
});

你能理解我的意思吗？ 我想将 celledit 设置为下拉和多选，那么我该如何编写代码？ 这是我最终想要实现的效果图。而且每个列名都像图片，值与列名不同

enter image description here

Answer 1

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

Here 也是多选的有用链接

这是我在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"
            });

Answer 2

在你的 PHP 中添加这个在你创建列模型的地方 另见解决方案 Here that Oleg created 和你的差不多

  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);                                   
 }

function multiselectvalue(elem, op, v) {

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