12.MVC关系（Tab+iframe）容器/iframe
url被树形菜单拿到，放到easyui里面。怎么看了，系统日志：左键审查元素。easyui就像个容器，存在里面了。其实使用了easyui创建的控件都存入了easyui容器里面。
==================easyui tab容器使用== ==============================================
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { $("#btnTest").click(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); } }); }); }); </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"></div>//easyui tab容器 </div> </body> </html>
运行效果：下图
=====tab容器上要加 data-options="fit:true" 就会铺面容器==================
fit:true[设置为true时，选项卡的大小将铺满它所在的容器。]
border：false[设置为true时，显示选项卡容器边框。]
<div id="tt" class="easyui-tabs" data-options="fit:true,border:false"></div>
=============1.树菜形菜单添加击事件===============================================
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
参照easyui帮助文档
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { alert(node.id + "," + node.text + "," + node.attributes); // 在用户点击的时候提示//node节点 } }); }); </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"></div> </div> </body> </html>
单击效果：如点系统版本，就会显示treeNode权限id,和text文本(自己)
=========================2.树菜形菜单添加击事件==========================================
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
node.id + "," + node.text + "," + node.attributes.url
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 } }); }); </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"></div> </div> </body> </html>
===============================3.单击树形菜单显示不同的tab,创建Tab=================
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
参照easyui ，布局中tab文档。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { $("#tbs").tabs('add', { title: treeNode.text, content: 'Tab Body', closable: true,//可关闭 tools: [{ iconCls: 'icon-mini-refresh', handler: function () { alert('refresh'); } }] }); } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"></div> </div> </body> </html>
运行效果：
单击菜单：实现不同的tab。
===============================4.单击树形菜单显示不同的tab,创建Tab============
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
一直点都会打开新的tab容器，所以需要判断下。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { if ($("#tbs").tabs("exists", treeNode.text))//如果存在，什么都不做 { } else{ //不存在就创建一个，tab $("#tbs").tabs('add', { title: treeNode.text, content: 'Tab Body', closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"></div> </div> </body> </html>
运行效果：
下面只有7个菜单项，就能打开7个tab,如果tab项打开了，就不会重复打开。
===============================5.单击树形菜单显示不同的tab,不能重复打开，点哪个光标就会选中哪个tab============
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
参照easyui文档。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) {/// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果tab存在，设置为选中 { $tbs.tabs("select", treeNode.text);//选中tab容器 } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text,//标题 content: 'Tab Body', closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"></div> </div> </body> </html>
效果图：
点击菜单：1.如果tab没有打开，就打开后选中；2.如果tab容器已经打开，就选中。
======================6.单击树形菜单显示不同的tab中显示时间======================
***getMenuData方法在加载树形菜单时，已经把treeNode节点存入easyui容器。所以就在function newTab(treeNode)方法中就可以拿到node节点。
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果存在，设置为选中 { $tbs.tabs("select", treeNode.text);//就设置为选中tab容器 } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text, content: 'Tab Body'+new Date(),//时间 closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"></div> </div> </body> </html>
运行效果：
==========================1.iframe嵌套架构=======================================
1.iframe相当于电视的画中画的功能；也就是看一个页面的同时可以看另外一个页面。
另外一个页面可以在iframe中看。
2.iframe也可以叫嵌入式框架；
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果存在，设置为选中 { $tbs.tabs("select", treeNode.text); } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text, content: 'Tab Body'+new Date(),//时间 closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } function NewIframe(url) { var $ifr = $("<iframe></iframe>"); } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;">
//tab暂时注释掉
@*<div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"> </div*@> <iframe style="width:300px;height:200px;border:1px solid #000"></iframe>@*入式框架*@ </div> </body> </html>
运行效果
3.iframe相当于div,不是div,相当于开了个小的浏览器。
==========================2.iframe嵌套架构=======================================
在easyui右边容器中添加iframe嵌套,然后在iframe添加登录；
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果存在，设置为选中 { $tbs.tabs("select", treeNode.text); } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text, content: 'Tab Body'+new Date(),//时间 closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } function NewIframe(url) { //var $ifr = $("<iframe></iframe>");//没必要转成对象 var $ifr = $("<iframe ></iframe>");//转成字符串就可以了 } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> @*<div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"> </div*@> <iframe src="/Admin/Admin/Login" style="width:300px;height:200px;border:1px solid #000"></iframe>@*入式框架*@ </div> </body> </html>
效果：在easyui右边容器中显示登录
相当于画中画。
可以打开游览器，审查元素，iframe下面生成dom元素，所以可以理解成小的浏览器。
=====================================3.iframe嵌套架构==========
产生一个tab时候，tab里显示一个iframe.
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 //tab中添加iframe架构 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果存在，设置为选中 { $tbs.tabs("select", treeNode.text); } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text, content: NewIframe(url),//调用iframe小浏览器方法 closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } } function NewIframe(url) { //var $ifr = $("<iframe></iframe>");//没必要转成对象，html显示就可以了【iframe中用单引号，不能用双引号】 var IfrStr = "<iframe src='/Admin/Admin/Login' style='width:300px;height:200px;border:1px solid #000'></iframe>";//转成字符串就可以了 return IfrStr; } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"> </div> </div> </body> </html>
运行效果：
======================7.单击树形菜单显示不同的tab中显示时间======================
1.iframe中的src路径地址改成url;因为权限树项中已经是一个url路径。
现在页面会出错，因为页面没有内容
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/EasyUI/themes/icon.css" rel="stylesheet" /> <link href="~/EasyUI/themes/default/easyui.css" rel="stylesheet" /> @Scripts.Render("~/easyUIJS") <script type="text/javascript"> $(function () { //1.加载菜单树 $("#menuTree").tree({ url: '/admin/admin/getMenuData', onLoadSuccess: function (node, data) { // //调用方法 统一处理 Ajax获取的 json数据！ $.procAjaxData(data); //alert(data[0].Msg); // alert(node+","+ data.Msg); }, onClick: function (node) { /// alert(node.id + "," + node.text + "," + node.attributes.url); // 在用户点击的时候提示 newTab(node);//加载tab } }); }); //新建tab方法 function newTab(treeNode) { var $tbs = $("#tbs");//获取tbs的id； if ($tbs.tabs("exists", treeNode.text))//如果存在，设置为选中 { $tbs.tabs("select", treeNode.text); } else{ //不存在就创建一个，tab $tbs.tabs('add', { title: treeNode.text, content: NewIframe(),//时间 closable: true,//可关闭 //tools: [{ // iconCls: 'icon-mini-refresh', // handler: function () { // alert('refresh'); // } //}] }); } }
/*返回一个iframe标签*/ function NewIframe(url) { //var $ifr = $("<iframe></iframe>");//没必要转成对象
//iframe中的src路径地址改成url;权限树项中已经是一个url路径
var IfrStr = "<iframe src='"+url+"' style='width:300px;height:200px;border:1px solid #000'></iframe>";//转成字符串就可以了 return IfrStr; } </script> </head> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;font-size:70px;"> OA权限管理系统 </div> <div data-options="region:'west',title:'菜单导航',split:true" style="width:240px;"> <ul id="menuTree"></ul> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tbs" class="easyui-tabs" data-options="fit:true,border:false"> </div> </div> </body> </html>
2.iframe中的src路径地址改成url;因为权限树项中已经是一个url路径。
现在页面会出错，因为页面没有内容
