Карта дерева - HierarchicalDataSource - Шаблон - PullRequest
Новая
       5

Карта дерева - HierarchicalDataSource - Шаблон

0 голосов
/ 11 июня 2019

Я использую древовидную карту пользовательского интерфейса кендо с иерархическим источником данных. Я попытался изменить цвета квадрата, используя конфигурацию colorField, но он не изменил цвет.

Поэтому я решил, что попытаюсь использовать шаблон не только для выравнивания некоторого текста, но и для установки background-color на основе поля в источнике данных. Однако затем я столкнулся с проблемой, когда в консоли указывалось, что мое поле Color не определено, поэтому я попытался удалить только эту ссылку и ссылаться только на поле Name (это то, что я устанавливаю в конфигурации textField), но произошла та же ошибка.

Странно то, что, если я удаляю шаблон, он правильно отображает текст, но не отображает правильный цвет фона.

Вот что я пытаюсь использовать: 

$(document).ready(function() {
  var data = [
    {
      "Name": "CEO",
      "Color": "#e6a800",
      "Children": [
        {
          "Name": "CFO",
          "Level": 3,
          "Color": "#9dddf2",
          "Children": [
            {
              "Name": "Comptroller",
              "Level": 2,
              "Color": "#4db85f",
              "Children": [
                {
                  "Name": "Lead Accountant",
                  "Level": 1,
                  "Color": "#d64d4d",
                  "Children": [
                    {
                      "Name": "Accountant",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    },
                    {
                      "Name": "Clerk",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    }
                  ]
                }
              ]
            },
            {
              "Name": "Senior Auditor",
              "Level": 1,
              "color": "#4db85f",
              "Children": [
                {
                  "Name": "Auditor",
                  "Level": 0,
                  "Color": "#c8ccdb"
                }
              ]
            }
          ]
        },
        {
          "Name": "COO",
          "Level": 3,
          "Color": "#9dddf2",
          "Children": [
            {
              "Name": "VP Of Operations",
              "Level": 2,
              "Color": "#4db85f",
              "Children": [
                {
                  "Name": "Field Manager",
                  "Level": 1,
                  "Color": "#4d69d6",
                  "Children": [
                    {
                      "Name": "Field Adjuster",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    }
                  ]
                },
                {
                  "Name": "Home Office Manager",
                  "Level": 1,
                  "Color": "#4d69d6",
                  "Children": [
                    {
                      "Name": "Desk Adjuster",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ];
  $("#treeMap").kendoTreeMap({
    dataSource: new kendo.data.HierarchicalDataSource({
      data: data,
      schema: {
        model: {
          children: "Children",
          hasChildren: "Children"
        }
      }
    }),
    colorField: "Color",
    valueField: "Level",
    textField: "Name",
    type: 'Vertical',
    //template: kendo.template($('#organizationalHierarchyTemplate').html())
  });
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

<body>
  <div id="example">
    <div id="treeMap"></div>
  </div>
</body>
<script id="organizationalHierarchyTemplate" type="text/x-kendo-template">
  <div style="height: auto; background-color: #= Color #;">
    <p style="text-align: center;">#: Name #</p>
  </div>
</script>

Fiddle: Демонстрация в реальном времени

1 Ответ

1 голос
/ 11 июня 2019

Ваши уровни используются для определения площади каждого квадрата, и они должны складываться по мере продвижения вверх по иерархии. например, 

    var data = [
      {
        "Name": "CEO",
        "Color": "#e6a800",
        "Level": 17,
        "Children": [
          {
            "Name": "CFO",
            "Color": "#9dddf2",
            "Level": 11,
            "Children": [
              {
                "Name": "Comptroller",
                "Color": "#4db85f",
                "Level": 3,
                "Children": [
                  {
                    "Name": "Lead Accountant",
                    "Color": "#d64d4d",
                    "Level": 3,
                    "Children": [
                      {
                        "Name": "Accountant",
                        "Level": 2,
                        "Color": "#c8ccdb"
                      },
                      {
                        "Name": "Clerk",
                        "Level": 1,
                        "Color": "#cdefdc"
                      }
                    ]
                  }
                ]
              },
              {
                "Name": "Senior Auditor",
                "color": "#4db85f",
                "Level": 8,
                "Children": [
                  {
                    "Name": "Auditor",
                    "Level": 8,
                    "Color": "#c8ccdb"
                  }
                ]
              }
            ]
          },
          {
            "Name": "COO",
            "Color": "#9dddf2",
            "Level": 6,
            "Children": [
              {
                "Name": "VP Of Operations",
                "Color": "#4db85f",
                "Level": 6,
                "Children": [
                  {
                    "Name": "Field Manager",
                    "Color": "#4d69d6",
                    "Level": 2,
                    "Children": [
                      {
                        "Name": "Field Adjuster",
                        "Level": 2,
                        "Color": "#c8ccdb"
                      }
                    ]
                  },
                  {
                    "Name": "Home Office Manager",
                    "Color": "#4d69d6",
                    "Level": 4,
                    "Children": [
                      {
                        "Name": "Desk Adjuster",
                        "Level": 4,
                        "Color": "#c8ccdb"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ];

В шаблоне вы получаете поля из объекта dataItem 

  <script id="organizationalHierarchyTemplate" type="text/x-kendo-template">
    <div style="height: auto; background-color: #= dataItem.Color #;">
        <p style="text-align: center;">#: dataItem.Name #</p>
    </div>
  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...