javascript - Tree table with angularJS and adapt-strap. Columns are "squeezed" -
here simple example tree table using adapt-strap. have problem during adding new columns. tried add column uppercase name:
jsfiddle:
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 border & header ===== --> <p>with border & 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 script:
// ========== initialize documentation app module ========== // angular.module('adaptv.adaptstrapdocs', [ 'ngsanitize', 'adaptv.adaptstrap' ]) // ========== controllers ========== // .controller('treebrowserctrl', ['$scope', function ($scope) { $scope.root = { children: [ { name: 'bmw', pricerange: '30k 200k' }, { name: 'bmw', pricerange: '30k 200k', children: [ { name: '328i', pricerange: '30k 40k' }, { name: '335i', pricerange: '35k 47k' }, { name: '535i', pricerange: '40k 50k' } ] }, { name: 'audi', pricerange: '30k 200k', children: [ { name: 'a4', pricerange: '30k 55k', children: [ { name: 'quattro premium plus', pricerange: '35k 49k' }, { name: 'quattro prestige', pricerange: '45k 55k' }, { name: 'fwd', pricerange: '35k 40k' } ] }, { name: 'a6', pricerange: '45k 60k' }, { name: 'a8', pricerange: '60k 80k' } ] }, { name: 'honda', pricerange: '15k 50k', children: [ { name: 'civic', pricerange: '15k 20k' }, { name: 'accord', pricerange: '25k 35k' }, { name: 'crv', pricerange: '25k 35k' } ] } ] }; $scope.open = function(data){ alert(data.name); } } ]); how correctly define template table header , rows? (i add more 1 new column)
more information adapt-strap , tree browser: http://adaptv.github.io/adapt-strap/##treebrowser
tree complex ui structure deal with.
in order support multiple use cases, tree browser doesn't deal spacing , margins of cells. apply classes cell , apply spacing/margins on own.
here updated fiddle: http://jsfiddle.net/t2qafj81/3/
<!-- in 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> 
Comments
Post a Comment