easy ui tree+tabs实现菜单

最新推荐文章于 2020-11-06 15:07:41 发布

tnblog技术分享～

最新推荐文章于 2020-11-06 15:07:41 发布

阅读量3.1k

点赞数

分类专栏： easy ui

本文链接：https://blog.csdn.net/aojiancc2/article/details/25395925

版权

easy ui 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一：前端

<script>

        $(function () {

            //处理树型菜单点击事件
            $('#tt').tree({
                url: '/Main/GetMenu',
                onClick: function (node) {
                    addtab(node.text, node.attributes.url);
                }
            });

            var addtab = function (title, url) {

                if ($('#mytabs').tabs('exists', title)) {
                    $('#mytabs').tabs('select', title);
                } else {
                    $('#mytabs').tabs('add', {
                        title: title,
                        closable: true,
                        content: createFrame(url),
                        //href: url,
                    });
                }
            }

            function createFrame(url) {
                var s = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>';
                return s;
            }

        });
    </script>

html

<body class="easyui-layout">
    
     <div region="north"  split="true" style="height:100px;">
         
         welcome come to lm
     </div>  
    <div data-options="region:'west',title:'West',split:true" style="width:150px;">
          <ul id="tt" class="easyui-tree">
         </ul>
    </div>

    <div  data-options="region:'center'">
       <div id="mytabs" class="easyui-tabs" fit="true" border="false">
       </div>
    </div>

</body>

二：后端

private List<TreeModel> ProcMenu(List<Permission_Functions> _pf) 
        {
            List<TreeModel> litm = new List<TreeModel>();
            var parent = _pf.Where(a=>a.ParentId == null);
            foreach (var item in parent) 
            {
                TreeModel mf = new TreeModel();
                mf.id = item.Id.ToString();
                mf.text = item.Name;

                //子菜单
                var clidren = _pf.Where(a => a.ParentId == item.Id);
                List<TreeChildrenModel> li = new List<TreeChildrenModel>();
                foreach (var citem in clidren) 
                {                    
                    TreeChildrenModel tcm = new TreeChildrenModel();
                    tcm.id = "";
                    tcm.text = citem.Name;
                    tcm.attributes = new Attributes() { url = citem.Url };
                    li.Add(tcm);
                }
                mf.children = li;
                litm.Add(mf);
            }
            return litm;
        }

        public JsonResult GetMenu() 
        {
            List<Permission_Functions> pf = ipd.GetAllPressionByUser("");
            return Json(ProcMenu(pf));
        }

注意：tabs 使用 href方式只会加载body部分如果页面的js没有在父页面引用就会出现问题，

href与content区别http://www.bhcode.net/article/20120327/22424.html

三：easy ui tree得到父级选择的节点

var nodes = $('#tt').tree('getChecked');//这样只能得到选择的父级得不到

var nodes = $('#tt').tree('getChecked', ['checked', 'indeterminate']);

tnblog技术分享～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
easy ui tree+tabs实现菜单

一：前端 $(function () { //处理树型菜单点击事件 $('#tt').tree({ url: '/Main/GetMenu', onClick: function (node) { addtab
复制链接

扫一扫