javascript - 带有 AngularJS 和 Adapt-Strap 的树表。列是 "squeezed"

Question

这是使用 Adapt-strap 的简单示例树表。我在添加新列时遇到问题。我尝试添加具有大写名称的列:

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 个新列)

有关 Adapt-strap 和树浏览器的更多信息:http://adaptv.github.io/adapt-strap/##treebrowser

Answer 1

树是一个需要处理的复杂的 UI 结构。

为了支持多个用例，树浏览器不处理单元格的间距和边距。您只需将类应用到单元格并自行应用间距/边距。

这是更新后的 fiddle :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>