JqG​​rid和自定义单元格。单元格中的自动完成和网格。可能吗。怎么样？

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自动填充，则可以按照the answer中的代码进行操作。它显示了自动完成与搜索数据的用法，但同样适用于数据编辑的情况。您应该使用editoptions代替searchoptions。如果您有其他数据来源可用于填写自动填充source，则可以完全相同的方式执行此操作。

Answer 2

尝试使用它，也许它有帮助

onSelectRow:function(){


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

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

我在内联编辑中使用它