jquery.treetable.js 插件使用记录
@Styles.Render("~/Content/plugins/jquery-treetable/css/jquery.treetable.css")
@Styles.Render("~/Content/plugins/jquery-treetable/css/jquery.treetable.theme.default.css")
@Scripts.Render("~/Content/plugins/jquery-treetable/jquery.treetable.js")
<table id="treeTable" class="table table-striped table-bordered treetable">
<thead>
<tr>
<th>菜单名称</th>
<th>菜单URL</th>
<th>排序</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Where(p => p.ParentID == 0))
{
<tr data-tt-id="@item.Id">
<td>@item.MenuName</td>
<td>@item.MenuPath</td>
<td>@item.OrderBy</td>
<td>
<button type="button" class="btn btn-info btn-xs" onclick="loadMenu(@item.Id)">编辑</button>
@if (Model.Where(p => p.ParentID == @item.Id).Count() == 0)
{
<button type="button" class="btn btn-danger btn-xs" onclick="delMenu(@item.Id)">删除</button>
}
<button type="button" class="btn btn-primary btn-xs" onclick="showAddModal(@item.Id)">新增</button>
</td>
</tr>
foreach (var entity in Model.Where(p => p.ParentID == @item.Id)){
<tr data-tt-id="@entity.Id" data-tt-parent-id="@item.Id">
<td>@entity.MenuName</td>
<td>@entity.MenuPath</td>
<td>@entity.OrderBy</td>
<td>
<button type="button" class="btn btn-info btn-xs" onclick="loadMenu(@entity.Id)">编辑</button>
<button type="button" class="btn btn-danger btn-xs" onclick="delMenu(@entity.Id)">删除</button>
</td>
</tr>
}
}
</tbody>
</table>
<script>
$(document).ready(function () {
$("#treeTable").treetable({
expandable: true,
initialState: "expanded",
//expandable : true
clickableNodeNames: true,//点击节点名称也打开子节点.
indent: 30//每个分支缩进的像素数。
});
});
</script>