TreeGrid. Как сделать на несколько строчек?

466

24 ноября 2016, 10:04

Установил компонент https://github.com/maxazan/jquery-treegrid

Он основан на table. Работает.

Но если я в одном td захочу сделать в несколько строчек c помощью br, то строчка сдвигается до конца влево. Как сделать, чтобы и 2-ая строчка выравнилась?

Answer 1

Составил код на основе примера.

Проблема в том, что стрелочки вниз и отступы сделаны инлайн-блоками 16 на 16 пикселей:

.treegrid-indent {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
}

У второй строки такого квадратика нет и она "проваливается" влево.

Можно решить, завернув содержимое первых ячеек в дополнительные инлайн-блоки. Заодно выровняем ячейки по верхней границе:

$(document).ready(function() { 
  $('.tree').treegrid(); 
});

.tree td, 
.treegrid-expander, 
.treegrid-indent { 
  vertical-align: top; 
} 
.tree td > div { 
  display: inline-block; 
  margin-right: 12px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://maxazan.github.io/jquery-treegrid/css/jquery.treegrid.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://maxazan.github.io/jquery-treegrid/js/jquery.treegrid.min.js"></script> 
<script type="text/javascript" src="http://maxazan.github.io/jquery-treegrid/js/jquery.treegrid.bootstrap3.js"></script> 
 
<table class="tree"> 
  <tr class="treegrid-1"> 
    <td><div>Root node<br>Second line</div></td><td>Additional info</td> 
  </tr> 
  <tr class="treegrid-2 treegrid-parent-1"> 
    <td><div>Node 1-1</div></td><td>Additional info<br>Second line</td> 
  </tr> 
  <tr class="treegrid-3 treegrid-parent-1"> 
    <td><div>Node 1-2</div></td><td>Additional info</td> 
  </tr> 
  <tr class="treegrid-4 treegrid-parent-3"> 
    <td><div>Node 1-2-1<br>Second line</div></td><td>Additional info<br>Second line</td> 
  </tr> 
</table>