这里只说前端对数据的处理,后台可以参考: https://www.cnblogs.com/eleven258/p/7800851.html
需要引入的css和js
<link href="/../scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="/../scripts/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/../scripts/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/../scripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/../scripts/ligerUI/js/core/base.js"></script>
<script type="text/javascript" src="/../scripts/ligerUI/js/plugins/ligerGrid.js"></script>
<script type="text/javascript" src="/../scripts/ligerUI/js/plugins/ligerResizable.js"></script>
<script type="text/javascript" src="/../scripts/ligerUI/js/plugins/ligerDrag.js"></script>
<script type="text/javascript" src="/../scripts/ligerUI/js/plugins/ligerDialog.js"></script>
<script type="text/javascript" src="/../scripts/ligerUI/js/plugins/ligerTab.js"></script>
<script type="text/javascript">
var manager;
var menuData;
// 用ajax拿数据,数据格式一定要正确
jQuery.ajax({
type:"post",
url:'你的url',
dataType:'json',
async:false,
success:function(data) {
menuData = data;
var menuLevelOne = data.Rows; // 得到Rows中的数据
for(i = 0,len=menuLevelOne.length; i < len; i++) {
var menuLevelTwo = menuLevelOne[i].children; // 遍历得到二级菜单的数据
for(j = 0,lens=menuLevelTwo.length; j < lens; j++) {
delete menuLevelTwo[j].children; // 删除二级菜单的children属性,这样二级菜单前不会有那个减号
}
}
}
});
// 页面显示
$(function (){
manager = $("#maingrid").ligerGrid({
columns: [
{ display: '编号', name: 'id', id: 'id', width: '15%'},
{ display: '数目', name: 'amount', id: 'amount', width: '30%'}
], width: '100%',
data: menuData, alternatingRow: true, usePager : false, // usePager : false,不显示分页
tree: {
columnId: 'id'
}
});
});
// 一些获取节点数据的方法
function getParent()
{
var row = manager.getParent(manager.getSelectedRow());
alert(JSON.stringify(row));
}
function getSelected()
{
var row = manager.getSelectedRow();
if (!row) { alert('请选择行'); return; }
alert(JSON.stringify(row));
}
function getData()
{
var data = manager.getData();
alert(JSON.stringify(data));
}
function hasChildren()
{
var row = manager.getSelectedRowObj();
alert(manager.hasChildren(row));
}
function isLeaf()
{
var row = manager.getSelectedRowObj();
alert(manager.isLeaf(row));
}
</script>
<div>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" οnclick="getParent()">获取父节点</a>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" οnclick="hasChildren()">是否有子节点</a>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" οnclick="isLeaf()">是否叶节点节点</a>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" οnclick="getSelected()">获取选中的值(选择行)</a>
<a class="l-button" style="width:120px;float:left; margin-left:10px;" οnclick="getData()">获取当前的值</a>
<div class="l-clear"></div>
<div id="maingrid" ></div> // 这个div的id必须个 manager = $("#maingrid").ligerGrid的$()中的值一样
</div>
效果图