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

あなたは私の意味を理解できますか？ celleditをドロップダウンとマルチセレクションに設定したいので、どのようにコードを書くことができますか？ これは私が最終的に達成したいレンダリングです。各COLNAMESは絵のようで、値が他のCOLNAMESへCOLNAMES異なる

enter image description here

Answer 1

と、あなたがマルチ選択オプションになりたいあなたのための列edittypeとeditoptionsを定義する必要があります。

Hereはまた、あなたがも参照してください 列モデルをcreatignされ、これまで私はどこでこれを追加するには、PHPで

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

jsfiddleであなたのために作成したsoltion multiselectsここ

に役立つリンクされていますあなた

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

と似ている Here that Oleg createdにおけるソリューション

はその後の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);         
} 

機能multiselectvalueにそれらを置く（elemは、OP、V）{

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