<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CRM.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRM界面</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery.easyui.min.js"></script>
<link href="Scripts/themes/default/easyui.css" rel="stylesheet" />
<link href="Scripts/icon.css" rel="stylesheet" />
<script src="Scripts/locale/easyui-lang-zh_CN.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CRM界面</title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery.easyui.min.js"></script>
<link href="Scripts/themes/default/easyui.css" rel="stylesheet" />
<link href="Scripts/icon.css" rel="stylesheet" />
<script src="Scripts/locale/easyui-lang-zh_CN.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
#a1 {
background-image: url('Images/Top/logo_bg.jpg');
}
background-image: url('Images/Top/logo_bg.jpg');
}
#a2 {
background-image: url('Images/Top/CRM.jpg');
height: 50px;
width: 100%;
background-repeat: no-repeat;
background-size: 125px;
}
background-image: url('Images/Top/CRM.jpg');
height: 50px;
width: 100%;
background-repeat: no-repeat;
background-size: 125px;
}
#aa ul li {
border: 1px solid #c7c7c7;
background-color: #ede7e7;
}
border: 1px solid #c7c7c7;
background-color: #ede7e7;
}
#aa ul li a {
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function () {
//第一个节点
var date = [{
"id": "1",
"text": "销售机会管理",
"attributes": { "url": "sal_change.html" }
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function () {
//第一个节点
var date = [{
"id": "1",
"text": "销售机会管理",
"attributes": { "url": "sal_change.html" }
}, {
"id": "2",
"text": "客服开发计划",
"attributes": { "url": "" }
}];
function addmenu() {
$("#a").tree({
data: date,
onClick: function (node) {
"id": "2",
"text": "客服开发计划",
"attributes": { "url": "" }
}];
function addmenu() {
$("#a").tree({
data: date,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
addpanel(node);
}
}
});
};
//第二个节点
var dat = [{
"id": "3",
"text": "客服信息管理",
"attributes": { "url": "" }
var dat = [{
"id": "3",
"text": "客服信息管理",
"attributes": { "url": "" }
}, {
"id": "4",
"text": "客服流失管理",
"attributes": { "url": "" }
}];
function addmen() {
$("#b").tree({
data: dat,
onClick: function (node) {
"id": "4",
"text": "客服流失管理",
"attributes": { "url": "" }
}];
function addmen() {
$("#b").tree({
data: dat,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
addpanel(node);
}
}
});
};
//第三个节点
var datq = [{
"id": "5",
"text": "服务创建",
"attributes": { "url": "" }
var datq = [{
"id": "5",
"text": "服务创建",
"attributes": { "url": "" }
}, {
"id": "6",
"text": "服务分配",
"attributes": { "url": "" }
}, {
"id": "7",
"text": "服务处理",
"attributes": { "url": "" }
"id": "6",
"text": "服务分配",
"attributes": { "url": "" }
}, {
"id": "7",
"text": "服务处理",
"attributes": { "url": "" }
}, {
"id": "8",
"text": "服务归档",
"attributes": { "url": "" }
}];
function addmenq() {
$("#c").tree({
data: datq,
onClick: function (node) {
"id": "8",
"text": "服务归档",
"attributes": { "url": "" }
}];
function addmenq() {
$("#c").tree({
data: datq,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
addpanel(node);
}
}
});
};
//第四个节点
var datw = [{
"id": "9",
"text": "客服贡献分析",
"attributes": { "url": "" }
var datw = [{
"id": "9",
"text": "客服贡献分析",
"attributes": { "url": "" }
}, {
"id": "10",
"text": "客服构成分析",
"attributes": { "url": "" }
}];
function addmenw() {
$("#d").tree({
data: datw,
onClick: function (node) {
"id": "10",
"text": "客服构成分析",
"attributes": { "url": "" }
}];
function addmenw() {
$("#d").tree({
data: datw,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
addpanel(node);
}
}
});
};
//第五个节点
var datf = [{
"id": "11",
"text": "数据词典管理",
"attributes": { "url": "" }
var datf = [{
"id": "11",
"text": "数据词典管理",
"attributes": { "url": "" }
}, {
"id": "12",
"text": "客服构成管理",
"attributes": { "url": "" }
}];
function addmene() {
$("#e").tree({
data: datf,
onClick: function (node) {
"id": "12",
"text": "客服构成管理",
"attributes": { "url": "" }
}];
function addmene() {
$("#e").tree({
data: datf,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
addpanel(node);
}
}
});
};
//第六个节点
var datr = [{
"id": "13",
"text": "用户管理",
"attributes": { "url": "" }
}, {
"id": "14",
"text": "角色管理",
"attributes": { "url": "" }
}];
function addmenr() {
$("#f").tree({
data: datr,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
"id": "14",
"text": "角色管理",
"attributes": { "url": "" }
}];
function addmenr() {
$("#f").tree({
data: datr,
onClick: function (node) {
if (node.attributes != null) {
addpanel(node);
}
}
});
};
function addpanel(treenode) {
console.info(treenode);
$("#tt").tabs("add", {
title: treenode.text,
href: treenode.attributes.url,
loadingMessage: "数据加载中",
closable: true
});
}
console.info(treenode);
$("#tt").tabs("add", {
title: treenode.text,
href: treenode.attributes.url,
loadingMessage: "数据加载中",
closable: true
});
}
addmenw();
addmene();
addmenr();
addmenq();
addmen();
addmenu();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="cc" class="easyui-layout" style="width: 600px; height: 750px;" data-options="fit:true">
<div data-options="region:'north'" style="height: 70px;" id="a1">
<div id="a2">
<p style="margin: 20px 130px; font-size: 30px; color: #2e5d9d; float: left;">美斯坦福客户关系管理系统</p>
</div>
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"></div>
<div data-options="region:'west'" style="width: 250px;">
<div class="easyui-accordion" style="width: 248px; height: 579px;">
<div id="a" title="营销管理" data-options="iconCls:'icon-save'" style="overflow: auto;"> </div>
<div id="b" title="客户管理" data-options="iconCls:'icon-reload'">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="c" title="服务管理" data-options="iconCls:'icon-reload'">
</div>
<div id="d" title="统计报表" data-options="iconCls:'icon-reload'">
</div>
<div id="e" title="基础数据" data-options="iconCls:'icon-reload'">
</div>
<div id="f" title="权限管理" data-options="iconCls:'icon-reload'">
</div>
</div>
</div>
<div id="tt" data-options="region:'center',fit:true" class="easyui-tabs" style=" background: #eee; background-image: url('Images/Shared/welcome.gif');">
<div title="Tab1" style="padding: 20px; display: none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow: auto; padding: 20px; display: none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding: 20px; display: none;">
tab3
</div>
</div>
</div>
</div>
</form>
</body>
</html>
addmene();
addmenr();
addmenq();
addmen();
addmenu();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="cc" class="easyui-layout" style="width: 600px; height: 750px;" data-options="fit:true">
<div data-options="region:'north'" style="height: 70px;" id="a1">
<div id="a2">
<p style="margin: 20px 130px; font-size: 30px; color: #2e5d9d; float: left;">美斯坦福客户关系管理系统</p>
</div>
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"></div>
<div data-options="region:'west'" style="width: 250px;">
<div class="easyui-accordion" style="width: 248px; height: 579px;">
<div id="a" title="营销管理" data-options="iconCls:'icon-save'" style="overflow: auto;"> </div>
<div id="b" title="客户管理" data-options="iconCls:'icon-reload'">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div id="c" title="服务管理" data-options="iconCls:'icon-reload'">
</div>
<div id="d" title="统计报表" data-options="iconCls:'icon-reload'">
</div>
<div id="e" title="基础数据" data-options="iconCls:'icon-reload'">
</div>
<div id="f" title="权限管理" data-options="iconCls:'icon-reload'">
</div>
</div>
</div>
<div id="tt" data-options="region:'center',fit:true" class="easyui-tabs" style=" background: #eee; background-image: url('Images/Shared/welcome.gif');">
<div title="Tab1" style="padding: 20px; display: none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow: auto; padding: 20px; display: none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding: 20px; display: none;">
tab3
</div>
</div>
</div>
</div>
</form>
</body>
</html>
当你的datagrid从另一个页面嵌进来时出现塌陷 须在id="tt"这里将 fit:true修改为fit:false
完美显示