JqGridとカスタムセル。セル内のオートコンプリートとグリッド。出来ますか。どうやって？

Question

jqGridのセル内にオートコンプリートとグリッドを使用する必要があります。出来ますか。今のところ、私はセル内でテキストの書式を設定する方法しか知りません。

EDITED： 私がnumまたはnoteにオートコンプリートを必要とするものとしましょう。

<table id="phoneList"><tr><td/></tr></table> 
<div id="pagerPhone"></div> 

<script language=javascript> 
var lastPhoneId; 
var lastPhoneSel; 
var phoneGrid = "#phoneList"; 
var phonePager = "#pagerPhone"; 
jQuery(document).ready(function(){ 
    jQuery(phoneGrid).jqGrid({ 
    datatype: 'local', 
    editurl:'clientArray', 
    colNames:['num','note'], 
    colModel :[ 
     {name:'num', index:'num', editable: true, width:200, sortable:false}, 
     {name:'note', index:'note', editable: true, width:300, sortable:false, edittype: 'text', editoptions: { 
     dataInit: 
     function (elem) { 
      $(elem).autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]); 
     } 
    }} 
    ], 
    pager: phonePager, 
    onSelectRow: function(id){ 
      if(id && id!==lastPhoneSel){ 
       jQuery(phoneGrid).restoreRow(lastPhoneSel); 
       lastPhoneSel=id; 
      } 
      jQuery(phoneGrid).editRow(id, true); 
     } 
    }); 
    var myphonedata = [ 
      {num:"80636247704", note:""} 
    ]; 
    for(lastPhoneId=0;lastPhoneId<myphonedata.length;lastPhoneId++) 
     jQuery(phoneGrid).addRowData(lastPhoneId, myphonedata[lastPhoneId]); 
    jQuery(phoneGrid).jqGrid('navGrid',phonePager,{edit:false,add:false,del:false,search:false}) 
     .jqGrid('navButtonAdd',phonePager,{ 
     caption:"", 
     buttonicon :'ui-icon-circle-minus', 
      onClickButton:function(id){ 
       jQuery(phoneGrid).delRowData(lastPhoneSel); 
      }, 
      title:"", 
      position:"first" 
     }) 
     .jqGrid('navButtonAdd',phonePager,{ 
      caption:"", 
      buttonicon :'ui-icon-circle-plus', 
      onClickButton:function(id){ 
       jQuery(phoneGrid).addRowData(lastPhoneId++, {num:"", note:""}); 
      }, 
      title:"", 
      position:"first" 
     }); 


}); 
</script> 

Answer 1

多分それはあなたが完全なローカルデータを持っており、データのインライン編集中のjQuery UIオートコンプリートを作成する必要がある場合は

onSelectRow:function(){ 


    $(selector).autocomplete("your_url", { 
     width: 200, 
     selectFirst: true 
    }); 

    $(selector).datepicker({ 
     dateFormat: 'yy-mm-dd', 
     autoSize: true, 
     changeYear: true 
    }); 
} 

は私が

Answer 2

を編集インラインでの使用に役立つ、これを使用してみてくださいthe answerのコードに従うことができます。データの検索でオートコンプリートを使用する方法を示していますが、データの編集にも同じ機能があります。 searchoptionsの代わりにeditoptionsを使用してください。オートコンプリートsourceの記入に使用できる別のデータソースがある場合は、まったく同じ方法でこれを行うことができます。