JqGrid и пользовательские ячейки. Автозаполнение и сетка в ячейке. Является ли это возможным. Как? - PullRequest
0 голосов
/ 14 марта 2012

Необходимо использовать автозаполнение и сетку внутри ячейки jqGrid. Является ли это возможным. Пока я знаю только, как форматировать текст внутри ячейки.

Редакция: Давайте предположим, что мне нужно автозаполнение для 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>

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Если у вас есть полные локальные данные и вам нужно создать автозаполнение jQuery UI во время встроенного редактирования данных, вы можете следовать коду из ответа . Он показывает использование автозаполнения при поиске данных, но то же самое будет работать и в случае редактирования данных. Вы должны просто использовать editoptions вместо searchoptions . Если у вас есть другой источник данных, который вы можете использовать для заполнения автозаполнения source, вы можете сделать это точно так же.

0 голосов
/ 14 марта 2012

Попробуйте использовать это, может быть, это поможет

onSelectRow:function(){


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

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

Я использую его во встроенном редактировании

...