Springboot+Easyui ——选项卡的实现

一、显示效果

二、前端代码

　　　　data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，可以对easyui组件的实例化，也可以完全写入到html中。在easyui tree组件中node都有自己单独的属性（如：id,text,iconCls,checked,state,attribute,target）。而之前的获取这个几个属性做法就要通过html的方式赋值实例化，是不能完全做到的。也因为attribute属性必须json的方式才能赋值。这也给开发带来了不便。而如今有了data-options这个属性，一切问题都迎刃而解了

<body class="easyui-layout">
    <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
        <ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
             <li>
                 <span>商品管理</span>
                 <ul>
                     <li data-options="attributes:{'url':'/page/item-add'}">新增商品</li>
                     <li data-options="attributes:{'url':'/page/item-list'}">查询商品</li>
                     <li data-options="attributes:{'url':'/page/item-param-list'}">规格参数</li>
                 </ul>
             </li>
             <li>
                 <span>网站内容管理</span>
                 <ul>
                     <li data-options="attributes:{'url':'/page/content-category'}">内容分类管理</li>
                     <li data-options="attributes:{'url':'/page/content'}">内容管理</li>
                 </ul>
             </li>
         </ul>
    </div>
    <div data-options="region:'center',title:''">
        <div id="tabs" class="easyui-tabs">
            <div title="首页" style="padding:20px;">
                    
            </div>
        </div>
    </div>

三、js代码

$(function(){
        $('#menu').tree({
            onClick: function(node){
                if($('#menu').tree("isLeaf",node.target)){
                    var tabs = $("#tabs");
                    var tab = tabs.tabs("getTab",node.text);
                    if(tab){
                        tabs.tabs("select",node.text);
                    }else{
                        //title: 选项卡标题
                        //content : 选项卡中展现的页面信息
                        //closable: 选项卡是否可以关闭.
                        tabs.tabs('add',{
                            title:node.text,
                           href: node.attributes.url,
                            closable:true,
                          bodyCls:"content"
                        });
                    }
                }
            }
        });
    });

四，通过访问后端服务器,之后跳转到指定的页面中

@Controller
public class IndexController {
    /*     /page/item-add'            item-add.jsp
     *    /page/item-list            item-list.jsp
     *        /page/item-param-list'    item-param-list.jsp
     *   利用一个方法实现通用的页面跳转
　　　*利用/方式进行参数分割， 2、利用{}括号的形式动态接受参数， 3、利用@PathVariable 动态接受参数
     */

  
  @RequestMapping("/page/{modelName}")
     //@PathVariable注解：来获得请求url中的动态参数的，并且支持动态url访问，可以从url中直接提取参数

    public String itemadd(@PathVariable String modelName){

        return modelName;
    }
}

摘要来源于：https://harrylyj.blog.csdn.net/article/details/114358433?spm=1001.2014.3001.5502

posted @ 2022-05-06 18:02 年华只余一地悲凉阅读(352) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Springboot+Easyui ——选项卡的实现

公告