Древовидная таблица с angularJS и адаптацией. Столбцы сжаты

Вот простой пример таблицы дерева с использованием адаптивного ремешка. У меня проблема при добавлении новых столбцов. Я попытался добавить столбец с именем в верхнем регистре:

jsfiddle:

http://jsfiddle.net/t2qafj81/

HTML:

<div ng-app="adaptv.adaptStrapDocs" ng-controller="treebrowserCtrl">
    <!-- ===== template files ===== -->
    <script type="text/ng-template" id="src/treebrowser/docs/treeHeader.html">
        <div>
            <span class="pull-left">Name</span>
            <span class="pull-left">Name uppercase</span>
            <span class="pull-right margin-right-lg">Price Range</span>
        </div>
    </script>
    <script type="text/ng-template" id="src/treebrowser/docs/treeNode.html">
        <div>
            <span class="pull-left">{{ item.name }}</span>
            <span class="pull-left">{{ item.name | uppercase }}</span>
            <span class="pull-right margin-right-lg">  <a href ng-click="open(item)">  
                {{ item.priceRange }}
                </a> </span>
        </div>
    </script>

    <!-- ===== Usage with border & header ===== -->
    <p>With Border &amp; header</p>
    <ad-tree-browser class="ad-border-default"
                     tree-name="treeDemoBordered"
                     row-ng-class="{added:item._selected}"
                     tree-root="root"
                     child-node="children"
                     children-padding="10"
                     bordered="true"
                     node-header-url="src/treebrowser/docs/treeHeader.html"
                     node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
    <hr>
    <!-- ===== Usage ===== -->
    <p>Simple tree without border</p>
    <ad-tree-browser class="ad-border-default"
         tree-name="treeDemo"
         row-ng-class="{added:item._selected}"
         tree-root="root"
         child-node="children"
         children-padding="15"
         node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
</div>

Java-скрипт:

// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
  'ngSanitize',
  'adaptv.adaptStrap'
])

// ========== controllers ========== //
.controller('treebrowserCtrl', ['$scope', function ($scope) {
    $scope.root = {
      children: [
           {
          name: 'Bmw',
          priceRange: '30k to 200k'
           },
        {
          name: 'Bmw',
          priceRange: '30k to 200k',
          children: [
            {
              name: '328i',
              priceRange: '30k to 40k'
            },
            {
              name: '335i',
              priceRange: '35k to 47k'
            },
            {
              name: '535i',
              priceRange: '40k to 50k'
            }
          ]
        },
        {
          name: 'Audi',
          priceRange: '30k to 200k',
          children: [
            {
              name: 'A4',
              priceRange: '30k to 55k',
              children: [
                {
                  name: 'Quattro premium plus',
                  priceRange: '35k to 49k'
                },
                {
                  name: 'Quattro Prestige',
                  priceRange: '45k to 55k'
                },
                {
                  name: 'FWD',
                  priceRange: '35k to 40k'
                }
              ]
            },
            {
              name: 'A6',
              priceRange: '45k to 60k'
            },
            {
              name: 'A8',
              priceRange: '60k to 80k'
            }
          ]
        },
        {
          name: 'Honda',
          priceRange: '15k to 50k',
          children: [
            {
              name: 'Civic',
              priceRange: '15k to 20k'
            },
            {
              name: 'Accord',
              priceRange: '25k to 35k'
            },
            {
              name: 'CRV',
              priceRange: '25k to 35k'
            }
          ]
        }
      ]
    };

    $scope.open = function(data){
        alert(data.name);
    }
  }
]);

Как правильно определить мой шаблон для заголовка и строк таблицы? (Я хотел бы добавить более 1 нового столбца)

Дополнительная информация об адаптивном ремешке и древовидном браузере: http://adaptv.github.io/adapt-strap/##treebrowser


javascript angularjs twitter-bootstrap treetable
person It'sMe    schedule 18.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Дерево — это сложная структура пользовательского интерфейса, с которой нужно иметь дело.

Чтобы поддерживать несколько вариантов использования, древовидный браузер не имеет дело с интервалами и полями ваших ячеек. Вы просто применяете классы к своей ячейке и самостоятельно применяете интервалы/поля.

Вот обновленная скрипта: http://jsfiddle.net/t2qafj81/3/

<!-- in your css file -->
<style>
    .name-cell {
        width: 100px;
    }
    .upper-case-cell {
        margin-left: 30px;
    }
</style>

<!-- ===== template files ===== --> 
<script type="text/ng-template" id="src/treebrowser/docs/treeHeader.html">
    <div>
        <span class="pull-left name-cell">Name</span>
        <span class="pull-left upper-case-cell">Name uppercase</span>
        <span class="pull-right margin-right-lg">Price Range</span>
    </div>
</script>
<script type="text/ng-template" id="src/treebrowser/docs/treeNode.html">
    <div>
        <span class="pull-left name-cell">{{ item.name }}</span>
        <span class="pull-left upper-case-cell">{{ item.name | uppercase }}</span>
        <span class="pull-right margin-right-lg">  <a href ng-click="open(item)">  
            {{ item.priceRange }}
            </a> </span>
    </div>
</script>
person kashyaphp    schedule 18.08.2014
comment
Большое спасибо, это было легко :) Еще один небольшой вопрос по древовидному браузеру: есть ли возможность развернуть все уровни одним кликом? - person It'sMe; 19.08.2014
comment
Это хорошее предложение. Я добавлю его в качестве улучшения для следующего выпуска. - person kashyaphp; 06.09.2014