我正在尝试使用mvc.net和bootstrap将数据绑定到treeview。根据parentdata的级别（示例中的表名），它应该将数据绑定到treeview，示例目的我在下面提供了数据查询。
我使用bootstrap使用mvc.net进行此树视图。
要求： - 从父表中，所有“级别”列1都是父级，1个直接级别为1，直到下一个1。
示例： -
我想以下面的格式在树视图中显示数据。
-1002（parent） - 表parentdata中的级别1
->1110(child for 1002) level 2
-1211（父级）级别1
->1222(Child for 1211) level 2
->1224(child for 1211) level 3
->1224 (child for 1211) level 4
-1332（父级）级别1
->1334 (child for 1332 ) level 1
等...
Sql Query： -
create table parentdata(
[parentdataid] int,
[datavalue] int,
[level] int
)
GO
insert into parentdata
select 1001,10,1 UNION
select 1001,11,1 UNION
select 1001,13,1 UNION
select 1002,1222,1 UNION
select 1222,1223,2 UNION
select 1223,1224,3 UNION
select 1224,1225,4 UNION
select 1332,1334,1 UNION
select 1334,1335,2 UNION
select 1335,1336,3 UNION
select 1900,1800,1 UNION
select 1800,1801,2 UNION
select 1801,1802,3 UNION
select 1803,1804,4 UNION
select 1804,1805,5 UNION
select 1805,1806,6 UNION
select 1806,1807,7 UNION
select 1450,1212,1 UNION
select 1211,1050,1 UNION
select 10220,10234,1 UNION
select 10235,10239,2 UNION
select 10239,10221,3 UNION
select 10221,10232,4 UNION
select 10232,10292,5 UNION
select 10110,1110,1 UNION
select 1110,11109,2 UNION
select 11109,11121,3
GO
select * from parentdata
所以数据是以parentdata表格式，使用这个parentdata表我需要将数据绑定到树视图，下面是我想要使用的代码
CSS代码： -
<style>
.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;
}
</style>
查看代码（例如用途）： -
<div class="tree well">
<ul>
<li>
<span><i class="icon-folder-open"></i> Parent</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-minus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span><i class="icon-folder-open"></i> Parent2</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</div>
查看页面中使用的脚本： -
<script>
$(function () {
$('.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")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
</script>
使用上面的代码如何以树形格式将父数据表中的数据与级别绑定。
感谢