用ligerUId的树形表格做菜单管理

这里只说前端对数据的处理，后台可以参考： 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;" onclick="getParent()">获取父节点</a>
     <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="hasChildren()">是否有子节点</a>
     <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="isLeaf()">是否叶节点节点</a>
    <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getSelected()">获取选中的值(选择行)</a>
     <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getData()">获取当前的值</a>
     
     <div class="l-clear"></div>
     
    <div id="maingrid" ></div>       // 这个div的id必须个 manager = $("#maingrid").ligerGrid的$()中的值一样

</div>

效果图