1

ユーザーが選択または入力した値を受け取り、それをトリガー入力に入れる関数をオーバーライドするにはどうすればよいですか?

たとえば、私のデータソースは次のとおりです。

[
    {
        id: 1,
        name: "Tim"
    },
    {
        id: 2,
        name: "Bob"
    }
]

オートコンプリートが返されるようにしたい:

<span class="my-class">Tim</span>

ただの代わりにTim

これを KendoUI Grid のセルのエディターとして使用しているため、セルが編集されなくなったら、その HTML は次のようになります。

<td role="gridcell"><span class="my-class">Tim</span></td>

グリッド列のエディターは次のとおりです。

function partNumberScanner(container, options)
{
  partId = options.model.id;
  var autoC = $('<input class="k-input data-value-field="id" k-textbox part-sniffer" data-bind="value:' + options.field + '"/>')
  autoC.appendTo(container);
  autoC.kendoAutoComplete({
    dataTextField: "idealForm",
    dataValueField: "id",
    delay: 50,
    dataSource: {
      serverFiltering: true,
      transport: {
        read: {
          url: ROOT+"part/fetch-parts",
          type: "POST",
          dataType: "json"
        }
      },
      error: function(e) {
        alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
      },
      schema: {
        id: "id",
        idealForm: "idealForm",
        manufacturer: "manufacturer"
      }
    },
    minLength: 5,
    filter: "contains",
    placeholder: "Start typing...",
    //template: '#= "<li class=\'k-item\' role=\'option\' data-manufacturer=\'"+manufacturer+"\'>"+idealForm+"</li>" #',
    select: function(e)
    {
      matchedPartData = this.dataItem(e.item.index());
      manufacturer = matchedPartData.manufacturer;
    },
    change: function(e) {
     // selectedPart = this.value();
      $.each(partData, function(i, v){
        if(partId == v.id)
        {
          targetId = i ;
          return false
        }
      })
      partData[targetId].manufacturer = manufacturer;
      grid.dataSource.sync();


    }
  });
}

問題はchange、セルがまだ編集モードにあるときにコールバックが呼び出されることです。そのため、 から返される値を変更する必要がありますchange。

ユーザーが部品番号を入力するものを作成しています。ユーザーが入力したものから始まる部品が見つかった場合、それらはオートコンプリートに表示され、選択できるようになります。

値が入力され、グリッド セルが編集モードを終了したら、現在セルにある値にブートストラップ ポップオーバーを配置する必要があります。

十分に説明できたことを願っています。

私は以前にそのようなことを試みましたが、それでも機能させることができませんでした。私は持っている：

template: "<span data-content=''>#= partNumber #</span>"

私がする必要があるのは、選択が行われると、セルのデータコンテンツ属性に入れられるデータを戻すAJAX呼び出しが行われることです。

change: function(e) {
...
options.model.set(options.field, '<span class="part-intel">'+this.value()+'</span>');
grid.dataSource.sync();
$.ajax({
          url: ROOT+'part/partAnalysis',
          async: false,
          success: function(data)
          {
            element = container.find('span.part-intel');
            /*element.popover({
            html: true,
            content: data
          })*/
            alert(element.html()) // Shows undefined
           // element.popover('show');
          }
        })
})
4

1 に答える 1

0

値を設定するには、value関数を使用する必要があります。changeイベント ハンドラー内から実行する方法は次のとおりです。

change: function(e) {
    e.sender.value("New Value");
}

編集あなたのケースでは、エディター機能partNumberScannerでそれを受け取るので行モデルにアクセスできるので、次のようにoptions簡単に実行できます。

change: function(e) {
    options.model.set(options.field, "New Value");
}
于 2013-03-25T12:34:52.840 に答える