可以让celledit下拉并用jqgrid多选？

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

can you understand my meanings? I want to set celledit to dropdown and multiselect,so how can i write code? This is renderings that I want to achieve finally . And each colnames are like picture and values are different from colnames to other colnames

enter image description here

Answer 1

You need to define the edittype and editoptions for your column which you want to be multi select options.

Here is also helpful link on multiselects

Here is a soltion I created for you in 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"
            });