[HttpGet]
public List getValue(int id)
{
var dataList = nodeList().Where(x => x.parentID == 0).ToList();
List nList = new List();
foreach (var item in dataList)
{
node i = new node();
i.name = item.name;
FillChild(i, item.ID);
nList.Add(i);
}
return nList;
}
public static List nodeList()
{
var nodeList = new List();
var node1 = new nodeDB();
node1.ID = 1;
node1.name = "node1";
node1.parentID = 0;
nodeList.Add(node1);
var node2 = new nodeDB();
node2.ID = 2;
node2.name = "node2";
node2.parentID = 1;
nodeList.Add(node2);
var node3 = new nodeDB();
node3.ID = 3;
node3.name = "node3";
node3.parentID = 2;
nodeList.Add(node3);
var node4 = new nodeDB();
node4.ID = 4;
node4.name = "node4";
node4.parentID = 0;
nodeList.Add(node4);
var node5 = new nodeDB();
node5.ID = 5;
node5.name = "node5";
node5.parentID = 4;
nodeList.Add(node5);
return nodeList;
}
public int FillChild(node parent, int ID)
{
var data = nodeList().Where(x => x.parentID == ID).ToList();
if (data.Count > 0)
{
foreach (var item in data)
{
node child = new node();
child.name = item.name;
int tempID = item.ID;
parent.nodes.Add(child);
FillChild(child, tempID);
}
return 0;
}
else
{
return 0;
}
}
Monday, January 5, 2015
Tree View Structure From DataBase
Saturday, January 3, 2015
AngularJs Bootstrap TreeView
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="http://ci.angularjs.org/job/angularui-bootstrap/ws/dist/ui-bootstrap-tpls-0.1.1-SNAPSHOT.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" />
@*<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">*@
<script src="~/Script/app/Home/DialogDeomoCtrl.js"></script>
<link href="~/CSS/stytree.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="DialogDemoCtrl" >
<div class="span5 article-tree">
<div ng-style="{'overflow': 'auto'}" >
<script type="text/ng-template" id="tree_item_renderer" >
<span ng-click="nodeClicked(data)" >
<i class="{{ switcher( isLeaf(data), '', 'icon-minus-sign' )}}"></i>
{{showNode(data)}}
</span>
<a href="">{{data.name + ' Edit'}}</a>
<ul class="some" ng-show="data.show">
<li ng-repeat="data in data.nodes" class="parent_li" ng-include="'tree_item_renderer'" tree-node></li>
</ul>
</script>
<div class="tree well">
<ul>
<li ng-repeat="data in displayTree" ng-include="'tree_item_renderer'" data-ng-click="loadconfig()"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('plunker', ['ui.bootstrap', 'ngResource']);
function DialogDemoCtrl($scope, $dialog, $resource) {
//$scope.isExecuted = false;
//buildEmptyTree();
$scope.title = "visible";
$scope.count = 0;
$scope.loadconfig = function () {
if ($scope.count == 0)
{
treeConfig();
$scope.count = 1;
}
console.log('load: ' + new Date().getMilliseconds());
}
read('getvalue', { id: 123 });
$scope.selectedNode = "";
$scope.showNode = function (data) {
//console.log(data);
return data.name;
};
$scope.isClient = function (selectedNode) {
if (selectedNode == undefined) {
return false;
}
if (selectedNode.device_name != undefined) {
return true;
}
return false;
};
function read(action, params) {
console.log('read: ' + new Date().getMilliseconds());
var resource = $resource('api/Home/' + action, params, { action: { method: 'GET', isArray: true } });
resource.action(params).$promise.then(function (d) {
$scope.displayTree = d;
});
};
}
function treeConfig() {
var title = $('.tree li:has(ul)').find('.parent_li').find(' > span').attr('title');
if (title == undefined) {
// alert(title + " out");
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
}
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
var title = $(this).attr('title');
// alert(title + " visible");
if (title == "Collapse this branch") {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
}
} else if (children.is(":hidden")) {
var title = $(this).attr('title');
// alert(title + " hidden");
if (title == "Expand this branch") {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
}
e.stopPropagation();
});
}
.tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#fbfbfb;
border:1px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
list-style-type:none;
margin:0;
padding:10px 5px 0 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}
.tree li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:25px
}
.tree li span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-radius:5px;
display:inline-block;
padding:3px 8px;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
Subscribe to:
Posts (Atom)