jqueryEasyUI+ztree遇到的不能加载 tabs的问题

来源：互联网发布：iphone7如何删除软件编辑：程序博客网时间：2024/05/19 23:57

原本的左侧代码快

是这样的

<div data-options="region:'center'">
       <div class="easyui-tabs" id="ss" style="width:1250px;height:750px;">
           <div title="Main" style="padding-top: 50px;padding-left: 50px;">
               <font color="red" size="10" >RNG牛逼！！！</font>
           </div>
       </div>
   </div>

后来发现左侧的代码外边不能嵌套 div 很简单的问题困扰了两天
正确的应该是

下面附上我ztree+easyui动态加载的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>
<%@include file="contextjs.jsp"%>
<link rel="stylesheet" href="<%=path%>/jquery-easyui-1.3.3/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<script type="text/javascript" src="<%=path%>/jquery-easyui-1.3.3/zTree/js/jquery.ztree.core.js"></script>
</head>

<body class="easyui-layout">

   
   <div region="north" style="height: 80px;background-color: #E0EDFF">
       <div align="left" style="width: 80%;float: left"><img src="images/main.jpg"></div>
       <div style="padding-top: 50px;padding-right: 20px;">当前用户： <font color="red" ></font></div>
   </div>
   
   <div data-options="region:'west'" title="菜单" style="width:150px;overflow:visible;">
               <ul id="tt" class="ztree"></ul>
    </div>
   
   <div data-options="region:'center'">
       <div class="easyui-tabs" id="ss" style="width:1250px;height:750px;">
           <div title="Main" style="padding-top: 50px;padding-left: 50px;">
               <font color="red" size="10" >RNG牛逼！！！</font>
           </div>
       </div>
   </div>
</body>
<script type="text/javascript">
   //增加选项卡
     function addPanel(name,url){
       //alert("跳转中。。。");

         var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
         $('#ss').tabs('add',{
             id: name,
             title: name,
             //href:'./'+pageName, //使用href是用过ajax请求方式，将请求页面内容加载到本页面中。   缺点：js引入不好控制
             content:content,      //使用content的iframe方式：将整个页面嵌入到tab页内。缺点：js重复加载
             closable: true
         });

   }



   function ztreeclick(treeId,treeNode,clickFlag){
       //alert("treeId:"+treeId+", treeNode:"+treeNode.url+" ,clickFlag:"+clickFlag);
       addPanel(treeNode.name,treeNode.action);
       alert("treeId:"+treeId+", treeNode:"+treeNode.url+" ,clickFlag:"+clickFlag);

   };
   var setting = {
           view: {
               dblClickExpand: false,
               showLine: true,//是否显示线
               showIcon : true,//是否显示图标
           },
           data: {
               simpleData: {//简单模式
                   enable:true,//是否使用
                   idKey: "id",//id
                   pIdKey: "pId",//父ID
                   rootPId: "null",//根ID
               }
           },
           callback: {//回调时间
                        beforeClick: ztreeclick//点击之前
                    }
   };
   $.ajax({
       url:"menu_UserRoleZtree.action",
       success:function(data){
           $.fn.zTree.init($("#tt"), setting, JSON.parse(data));
       }
   });

</script>
</html>

阅读全文

0 0