2012-03-14 6 views
0

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

インライン編集で必要ですか? –

+0

[the demo project](http://www.ok-soft-gmbh.com/jqGrid/jqGridDemoVS2010_withAutocomplete.zip)を含む[the answer](http://stackoverflow.com/a/7392816/315935)を見てください。これをダウンロードすることができます。オートコンプリートは、検索または編集のいずれかでセンスがあります。インライン編集の場合、グリッドのセルに表示されます。あなたには何が必要ですか? – Oleg

+0

グリッドのセルには、オートコンプリートを表示できるコントロールがありません。あなたの状況をより明確に説明できますか?カスタムフォーマッタを使用して入力フィールドを持つセルを作成するか、1行でインライン編集を使用するか、その他の状況がありますか?ローカルの 'datatype'を使用しているのか、サーバーからデータを取得する必要がありますか?どんな意味でも、より多くの情報が必要です。現在使用しているJavaScriptコードで質問を追加できます。 – Oleg

答えて

0

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

onSelectRow:function(){ 


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

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

は私が

+0

'' selector''とは何ですか? – Yola

+0

これはjQueryの要素セレクタです。グリッドのセルを$( '[name = note]')のように選択する必要があります。あなたのケースではdatepicker。 –

+0

これはloadComplete –

1

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

+0

+1に入れて、セルオート編集でも機能します。オートコンプリートを計算しました。現在、セル内のグリッド上で作業しています。それは非常に洗練されていても、不可能でさえあるかもしれません(( – Yola