easyui 怎么动态生成左侧菜单

easyui 怎么动态生成左侧菜单,第1张

我不太明白楼主所说的“动态”所指的是什么状态,一般来讲遇到过比较初级的人感觉“动态”一词仅是指可动的动画效果,这个的话还比较好说,但是如果楼主希望导航栏根据不同的访问者和访问条件变成不同的结构或内容,这个就不是js范畴好控制的了(当然也不是不行)

首先,是“可动的动画效果”,这个上来说easyUI并没有直接提同导航栏的控件或者样式,但是两种easyui提供的样式可以提供参考和辅助,一个是eaysui-menu类(参考Easyui官方帮助文档9页-创建简单菜单),另一个是panel面板(参考Easyui官方帮助文档15页-创建折叠面板)。具体要求可以追问

如果说动态的改变导航栏的结构和内容,那么多数请款下“动态”一次就不是指的js范畴了,这一般来讲是动态后台语言(如,asp,jsp,php等)的工作内容。当然js本身也可以达到类似的效果,但是只能是效仿。提供一个种简单的思路吧,有不明白可以追问。将所有可能的导航栏选项,都以静态形式上传到本地,然后在用户进行会改变导航栏的 *** 作的时候,由js从新生成页面内节点。当然如果需要刷新的页面的话,就在本地创建cookie,存储一些参数,然后再页面加载的过程中,根据cookie的参数,生成页面。

//添加新的手风琴风格菜单   

        function addMenu(data, sysName) {

            var menuList = ""

            //回圈全部模组菜单讯息

            $.each(data, function (i, objOne) {

                menuList = "<ul class='easyui-datalist' style='height:100%' >"

                //回圈某个模组下所有菜单讯息

                $.each(objOne.MenuInfo, function (j, objTwo) {

                    if (objTwo.PackageUrl != "") {

                        menuList += " <li><a href='#' onclick=\"addTab('" + objTwo.MenuName + "','" + objTwo.PackageUrl + "')\">" + objTwo.MenuName + "</a></li>"

                    }

                    else {

                        menuList += " <li>" + objTwo.MenuName + "</li>"

                    }

                })

                menuList += " </ul>"

                $('#divMenuDetail').accordion('add', {

                    title: <a href='#' onclick=\"addTab('" + objOne.MenuModelName + "','" + objOne.PackageUrl + "')\">" + objOne.MenuModelName + "</a>", //菜单模组名称

                    content: menuList, //本模组菜单清单

                    selected: false

                })

            })

            var pp = $('#divMenuDetail').accordion('panels')

            var t = pp[0].panel('options').title

            $('#divMenuDetail').accordion('select', t)

        }

这是我自己用的easyUI动态生成两层菜单前台JS方法

你需要用ajax去后台抓出两层菜单传到前台,objOne是第一层,objTwo是第二层,参考一下

做好下拉框的样式以及基本的属性,调用loadData()方法,往里面写值就行了啊。

$('#cc').combobox({

valueField:'id',

textField:'text'

})

var data = "[{id:'1', value:'1'},{id:'2', value:'2'}]"

// 1和2用逗号分隔

$('#cc').combobox("loadData", data)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11897911.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存