I generated menulist using c#.
Html :
<div style="border: solid 1px #e5e5e5; padding: 10px; background-color: #FAFAFA; width: 100%; >
<label>
<input type="checkbox" class="checkbox-inline" id="select_all"> Select All
</label>
<div class="treeview">
@if (Model != null && Model.Count() > 0)
{
<ul>
@GetTreeView(Model, (int) Model.FirstOrDefault().ParentMenuId)
</ul>
}
</div>
</div>
Helper method:
@helper GetTreeView(List<Menu> siteMenu, int parentId)
{
foreach (var i in siteMenu.Where(a => a.ParentMenuId.Equals(parentId)))
{
<li>
@{
var submenu = siteMenu.Where(a => a.ParentMenuId.Equals(i.MenuId)).Count();
}
<input type="checkbox" id=@i.MenuId class="checkbox-inline" parentmenuid=@i.ParentMenuId menuid=@i.MenuId method=@i.MethodName controller=@i.ControllerName><a class="col"> @i.MenuName </a>
@if (submenu > 0)
{
<ul>
@GetTreeView(siteMenu, i.MenuId)
</ul>
}
</li>
}
}
|
CSS:
<style>
/*Here We will add some css for style our treeview*/
.col {
width: 15px;
background-repeat: no-repeat;
background-position: -36px -17px;
display: inline-block;
cursor: pointer;
}
.treeview ul {
font: 14px Arial, Sans-Serif;
margin: 0px;
padding-left: 20px;
list-style: none;
}
.treeview > li > a {
font-weight: bold;
}
.treeview li {
}
.treeview li a {
padding: 4px;
font-size: 12px;
display: inline-block;
text-decoration: none;
width: auto;
}
</style>
|
Jquery:
$(document).ready(function () {
$(".col").toggleClass("collapse expand");
});
$('#select_all').on('click', function () {
if (this.checked) {
$('.checkbox-inline').each(function () {
this.checked = true;
});
} else {
$('.checkbox-inline').each(function () {
this.checked = false;
});
}
});
$('li :checkbox').on('click', function () {
debugger;
var $chk = $(this),
$li = $chk.closest('li'),
$ul, $parent;
if ($li.has('ul')) {
$li.find(':checkbox').not(this).prop('checked', this.checked)
}
do {
$ul = $li.parent();
$parent = $ul.siblings(':checkbox');
if ($chk.is(':checked')) {
$parent.prop('checked', true)
} else {
if ($ul.has(':checked').length == 0) {
$parent.prop('checked', false)
}
}
$chk = $parent;
$li = $chk.closest('li');
} while ($ul.is(':not(.treeview)'));
});
|
Comments
Post a Comment