Форматирование дерева таблицей

248

08 января 2020, 03:30

Есть дерево такого типа

.tree { 
  float:left; 
  width: 200px; 
  background-color: #eaeaff; 
} 
.level { 
  margin-left: 15px; 
} 
 
.value { 
  font-weight: bold; 
}

<div class="tree"> 
  <div class="level"> 
    <div class="node"> 
      <span class="name">Name 1</span> 
      <span class="value">Value</span> 
    </div> 
    <div class="level"> 
      <div class="node"> 
        <span class="name">Name 1.1</span> 
        <span class="value">Value</span> 
      </div> 
      <div class="level"> 
        <div class="node"> 
          <span class="name">Name 1.1.1</span> 
          <span class="value">Value</span> 
        </div> 
        <div class="level"> 
          <div class="node"> 
            <span class="name">Long long long name</span> 
            <span class="value">Value</span> 
          </div> 
        </div> 
      </div> 
      <div class="level"> 
        <div class="node"> 
          <span class="name">Name 1.1.2</span> 
          <span class="value">Value</span> 
        </div> 
        <div class="level"> 
          <div class="node"> 
            <span class="name">Long long long name</span> 
            <span class="value">Value</span> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Я хочу, чтобы в дереве все <span class="value"> отображались в столбик справа, а длинные <span class="name"> переносились на несколько строк.

Т.е. хочется вот так

Name 1               Value
  Name 1.1           Value
    Name 1.1.1       Value
      Long long long Value
      name
    Name 1.1.2       Value
      Long long long Value
      name

При этом разметкой и стилями дерева я не управляю и мне они неизвестны.

Я могу модифицировать только класс tree и стили и наполнение элементов <div class="node">. Собственно эти элементы я создаю сам. А все дерево - сторонняя библиотека

Update

@Vladimir Rodichev подсказал решение, но к сожалению justify-content: space-between; не помогает. Т.к., как оказалось, библиотека вставляет блоки в узлы с display: inline-block;. Если переопределить у себя

.anchor {
  display: inline;
}

то плывет отрисовка узлов

Update 2

Т.к. все советы не работают для моей задачи, то привожу конкретную задачу.

Дерево отрисовывается при помощи библиотеки jstree

Эта библиотека добавляет свои узлы со своими стилями

jQuery(function($) { 
  $("#tree").jstree(); 
  $("#tree").jstree("open_all"); 
});

.tree { 
  float: left; 
  width: 250px; 
  background-color: #eaeaff; 
} 
 
.node { 
  display: inline; 
} 
.value { 
  font-weight: bold; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script> 
<div id="tree" class="tree"> 
  <ul> 
    <li> 
      <div class="node"> 
        <span class="name">Name 1</span> 
        <span class="value">Value</span> 
      </div> 
      <ul> 
        <li> 
          <div class="node"> 
            <span class="name">Name 1.1</span> 
            <span class="value">Value</span> 
          </div> 
          <ul> 
            <li> 
              <div class="node"> 
                <span class="name">Name 1.1.1</span> 
                <span class="value">Value</span> 
              </div> 
              <ul> 
                <li> 
                  <div class="node"> 
                    <span class="name">Long long long name</span> 
                    <span class="value">Value</span> 
                  </div> 
                </li> 
              </ul> 
            </li> 
            <li> 
              <div class="node"> 
                <span class="name">Name 1.1.1</span> 
                <span class="value">Value</span> 
              </div> 
              <ul> 
                <li> 
                  <div class="node"> 
                    <span class="name">Long long long name</span> 
                    <span class="value">Value</span> 
                  </div> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </li> 
  </ul> 
</div>

Или полностью рантайм

jQuery(function($) { 
  const data = { 
    text: '<div class="node"><span class="name">Name 1</span><span class="value">Value</span></div>', 
    children: [{ 
      text: '<div class="node"><span class="name">Name 1.1</span><span class="value">Value</span></div>', 
      children: [{ 
        text: '<div class="node"><span class="name">Name 1.1.1</span><span class="value">Value</span></div>', 
        children: [{ 
          text: '<div class="node"><span class="name">Name Long Long Name</span><span class="value">Value</span></div>', 
        }, { 
          text: '<div class="node"><span class="name">Name 1.2.1</span><span class="value">Value</span></div>', 
          children: [{ 
            text: '<div class="node"><span class="name">Name Long Long Name</span><span class="value">Value</span></div>', 
          }] 
        }] 
      }] 
    }] 
  }; 
 
  $("#tree").on("load_node.jstree", function() { 
    $("#tree").jstree("open_all"); 
  }).jstree({ 
    core: { 
      data: data 
    } 
  }); 
});

.tree { 
  float: left; 
  width: 250px; 
  background-color: #eaeaff; 
} 
 
.node { 
  display: inline; 
} 
 
.value { 
  font-weight: bold; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script> 
<div id="tree" class="tree"></div>

Answer 1

Вариант 2:

jQuery(function($) { 
  const data = { 
    text: '<div class="node"><span class="name">Name 1</span><span class="value">Value</span></div>', 
    children: [{ 
      text: '<div class="node"><span class="name">Name 1.1</span><span class="value">Value</span></div>', 
      children: [{ 
        text: '<div class="node"><span class="name">Name 1.1.1</span><span class="value">Value</span></div>', 
        children: [{ 
          text: '<div class="node"><span class="name">Name Long Long Name</span><span class="value">Value</span></div>', 
        }, { 
          text: '<div class="node"><span class="name">Name 1.2.1</span><span class="value">Value</span></div>', 
          children: [{ 
            text: '<div class="node"><span class="name">Name Long Long Name</span><span class="value">Value</span></div>', 
          }] 
        }] 
      }] 
    }] 
  }; 
 
  $("#tree").on("load_node.jstree", function() { 
    $("#tree").jstree("open_all"); 
  }).jstree({ 
    core: { 
      data: data 
    } 
  }); 
});

.tree { 
  float: left; 
  width: 250px; 
  background-color: #eaeaff; 
} 
 
.node { 
  display: inline; 
} 
 
.value { 
  font-weight: bold; 
} 
 
 
.name { 
    white-space: normal; 
} 
.node { 
    display: inline-flex; 
    justify-content: space-between; 
    width: 100%; 
    /* width: calc(100% - 51px); */ 
} 
a.jstree-anchor { 
    width: calc(100% - 24px); 
    height: auto !important; 
    /* width: 100%; */ 
    white-space: normal; 
    display: inline-flex; 
    box-sizing: border-box; 
} 
.jstree-default .jstree-hovered { 
    background: #90caf9 !important; 
} 
.jstree-default .jstree-clicked { 
    background: #2196f3 !important; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script> 
<div id="tree" class="tree"></div>

Answer 2

Добавь в CSS:

.node {
    display: flex;
    justify-content: space-between;
}
.anchor {
    display: inline-block;
    width: 100%;
}

Или принудительно меняем свойство:

.anchor {
    display: block !important;
}

.tree { 
  float: left; 
  width: 200px; 
  background-color: #eaeaff; 
} 
 
.level { 
  margin-left: 15px; 
} 
 
.value { 
  font-weight: bold; 
} 
 
.anchor { 
    display: inline-block; 
    width: 100%; 
} 
.node { 
  display: flex; 
  justify-content: space-between; 
}

<div class="tree"> 
  <div class="level"> 
    <a class="anchor"> 
      <div class="node"> 
        <span class="name">Name 1</span> 
        <span class="value">Value</span> 
      </div> 
    </a> 
    <div class="level"> 
      <a class="anchor"> 
        <div class="node"> 
          <span class="name">Name 1.1</span> 
          <span class="value">Value</span> 
        </div> 
      </a> 
      <div class="level"> 
        <a class="anchor"> 
          <div class="node"> 
            <span class="name">Name 1.1.1</span> 
            <span class="value">Value</span> 
          </div> 
        </a> 
        <div class="level"> 
          <a class="anchor"> 
            <div class="node"> 
              <span class="name">Long long long name</span> 
              <span class="value">Value</span> 
            </div> 
          </a> 
        </div> 
      </div> 
      <div class="level"> 
        <a class="anchor"> 
          <div class="node"> 
            <span class="name">Name 1.1.2</span> 
            <span class="value">Value</span> 
          </div> 
        </a> 
        <div class="level"> 
          <a class="anchor"> 
            <div class="node"> 
              <span class="name">Long long long name</span> 
              <span class="value">Value</span> 
            </div> 
          </a> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>