2

次のようなカスタム KoGrid セル テンプレートが必要です。 ここに画像の説明を入力

このモデルの場合:

          var model = [
    { Color: { Hex: "#5EB95E", Name: "green" }, 
    AvailablePatterns: { SelectedId:"", 
       Patterns:[{Title:"test1", Id:1},{Title:"test3", Id:2}]}},
    { Color: { Hex: "#FAA732", Name:"orange" }, 
    AvailablePatterns: { SelectedId:"", 
       Patterns:[{Title:"test2", Id:3},{Title:"test4", Id:4}]}}];

セルでフィールド Color および AvailablePatterns を使用するにはどうすればよいですか? $parent.getProperty メソッドでこのフィールドを取得しようとしましたが、うまくいきません

     columnDefs: [
             {
            field: 'Color', 
            displayName: 'Color', 
            cellTemplate: '<span class="status" data-bind="style: { backgroundColor : $parent.getProperty("Color.Hex") }"></span>' +
                '<span data-bind="text: $parent.getProperty("Color.Name")"></span>'
        },
          {
              field: 'AvailablePatterns', 
              displayName: 'Pattern', cellTemplate: "<select class=\"pattern\" \
                   data-bind=\" options: $parent.getProperty('AvailablePatterns.Patterns'), \
                   optionsValue: '$parent.getProperty('Id')', \
                   optionsText: '$parent.getProperty('Title')',\
                   value: '$parent.getProperty('AvailablePatterns.SelectedId')' \"> \
                     </select>"
          }
      ]

https://jsfiddle.net/akvm9qgy/

4

1 に答える 1

1

次のエラーがあります。詳細についてはお気軽にお問い合わせください:

  • セル テンプレートは 1 つの html 要素である必要があります。
cellTemplate: '<div><div class="status" data-bind="style: { backgroundColor : $parent.entity.Color.Hex }"></div><span data-bind="text: $parent.entity.Color.Name"></span></div>'
  • $parent.entityプロパティへのアクセスについては、代わりに私はより快適です$parent.getProperty（実際、この方法はこれまで見たことがありませんでした）
  • optionValue と optionText は、プロパティ名のプレーン文字列である必要があります
cellTemplate: '<select class=\"pattern\" \
               data-bind=" options: $parent.entity.AvailablePatterns.Patterns, \
               optionsValue: \'Id\', \
               optionsText: \'Title\',\
               value: $parent.entity.AvailablePatterns.SelectedId"> \
                     </select>'

フィドルが更新されたことを確認してください

于 2016-03-23T22:45:12.350 に答える