2
私はangularjsでツリービューを作ろうとしています。率直に言って、私はスタイリングでは非常に悪いです。今私はツリー項目の縦線と横線を整列しようとしているところで問題に悩まされています。anglejsツリービューのCSS垂直線
私はCodepenを作成しました。
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Drag and drop angular tree</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<style>
div[data-tree-model] ul {
margin: 0;
list-style: none;
border: none;
overflow: hidden;
position: relative;
list-style: none;
padding-left: 12px;
}
div[data-tree-model] li {
position: relative;
padding: 0 0 0 0px;
line-height: 20px;
position: relative;
}
div[data-tree-model] li .expanded {
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
background-repeat: no-repeat;
}
div[data-tree-model] li .collapsed {
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
background-repeat: no-repeat;
}
div[data-tree-model] li .normal {
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
background-repeat: no-repeat;
}
div[data-tree-model] li i, div[data-tree-model] li span {
cursor: pointer;
}
div[data-tree-model] li .selected {
background-color: #aaddff;
font-weight: bold;
padding: 1px 5px;
}
div[data-tree-model] li::before, div[data-tree-model] li::after {
content: "";
position: absolute;
left: -12px;
}
div[data-tree-model] li::before {
border-top: 2px solid black;
top: 9px;
width: 4px;
height: 0;
padding-left: 4px;
margin-left: 6px;
}
div[data-tree-model] li::after {
border-left: 2px solid black;
height: 100%;
width: 0px;
top: 0px;
margin-left: 5px;
}
div[data-tree-model] ul > li:last-child::after {
height: 8px;
}
div[data-tree-model] li:fisrt-child::after {
height: 0px;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<!-- <div>{{roleList}}</div></br> -->
<div class="clt"
data-angular-treeview="true"
data-tree-id="mytree"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children" >
</div>
</div>
</div>
</body>
<script>
(function(){
//angular module
var myApp = angular.module('myApp', ['angularTreeview', 'ui.sortable']);
//test controller
myApp.controller('myController', function($scope){
//test tree model 1
$scope.roleList1 = [
{ "roleName" : "User", "roleId" : "role1", "children" : [
{ "roleName" : "subUser1", "roleId" : "role11", "children" : [] },
{ "roleName" : "subUser2", "roleId" : "role12", "children" : [
{ "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
{ "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Admin", "roleId" : "role2", "id":"01", "children" : [] },
{ "roleName" : "Guest", "roleId" : "role3", "id":"02", "children" : [] }
];
//test tree model 2
$scope.roleList2 = [
{ "roleName" : "User", "roleId" : "role1", "children" : [
{ "roleName" : "subUser1", "roleId" : "role11", "collapsed" : true, "children" : [] },
{ "roleName" : "subUser2", "roleId" : "role12", "collapsed" : true, "children" : [
{ "roleName" : "subUser2-1", "roleId" : "role121", "children" : [
{ "roleName" : "subUser2-1-1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "subUser2-1-2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Admin", "roleId" : "role2", "children" : [
{ "roleName" : "subAdmin1", "roleId" : "role11", "collapsed" : true, "children" : [] },
{ "roleName" : "subAdmin2", "roleId" : "role12", "children" : [
{ "roleName" : "subAdmin2-1", "roleId" : "role121", "children" : [
{ "roleName" : "subAdmin2-1-1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "subAdmin2-1-2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Guest", "roleId" : "role3", "children" : [
{ "roleName" : "subGuest1", "roleId" : "role11", "children" : [] },
{ "roleName" : "subGuest2", "roleId" : "role12", "collapsed" : true, "children" : [
{ "roleName" : "Banned Area", "roleId" : "role121", "children" : [
{ "roleName" : "subGuest2-1-1", "roleId" : "role1211", "Parent":"Banned Area" ,"children" : [] },
{ "roleName" : "subGuest2-1-2", "roleId" : "role1212", "Parent":"Banned Area", "children" : [] }
]}
]}
]}
];
//roleList1 to treeview
$scope.roleList = $scope.roleList2;
});
})();
(function (angular) {
'use strict';
angular.module('angularTreeview', []).directive('treeModel', ['$compile', function($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//children
var nodeChildren = attrs.nodeChildren || 'children';
scope.sortableOptions = {
connectWith: ".apps-container",
update: function(event, ui) {
var index = ui.item.sortable.index;
var dropindex = ui.item.sortable.dropindex;
var dropTargetModel = ui.item.sortable.droptargetModel;
var dragModel = ui.item.sortable.model;
//debugger
}
};
//tree template
var template =
'<ul ui-sortable="sortableOptions" class="apps-container" ng-model="'+ treeModel+'">' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="collapsed" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="expanded" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="normal" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
'<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
'</li>' +
'</ul>';
//check tree id, tree model
if(treeId && treeModel) {
//root node
if(attrs.angularTreeview) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function(selectedNode){
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
};
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function(selectedNode){
//remove highlight from previous node
if(scope[treeId].currentNode && scope[treeId].currentNode.selected) {
scope[treeId].currentNode.selected = undefined;
}
//set highlight to selected node
selectedNode.selected = 'selected';
//set currentNode
scope[treeId].currentNode = selectedNode;
};
}
//Rendering template.
element.html('').append($compile(template)(scope));
}
}
};
}]);
})(angular);
</script>
</html>
私が最初に開閉画像をフォルダに触れると隅にする必要があり、垂直線を揃えるしようとしています。第二に、最初の子供にはオープンエンドがあります。私はこれを達成することができます
助けてください、どのように私は、それが好きなようにしたいです。どんな提案も喜んで受け入れられるだろう。 おかげ
これは私が期待したものです。ありがとう。あなたが写真で与えられているように、拳の子供（ユーザー）のためのコーナー設定を得るのを助けてくれたら、私は非常に感謝します。また、垂直線は、フォルダの開閉画像に触れる必要があります。 – sand