Question

我需要这样的自定义KoGrid Cell模板：

此模型：

          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/

Answer 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>'

请参阅fiddle updated

KoGrid定制细胞模板

1 个答案: