1、LinkButton
使用css的方式
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超連結的樣式</a>
結果
2、Layout布局
<div id="cc" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',title:'CRM管理系統',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'系統菜單',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'資料區域'" style="padding:5px;background:#eee;"></div>
3、Accordion分類
<div id="aa" class="easyui-accordion"
style="width: 300px; height: 200px;">
<div title="客戶管理" data-options="iconCls:'icon-save'"
style="overflow: auto; padding: 10px;">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >客戶管理</a>
</div>
<div title="聯系人管理" data-options="iconCls:'icon-reload',selected:true"
style="padding: 10px;">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >聯系人管理</a>
</div>
<div title="評價管理">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >評價管理</a>
</div>
</div>
4、彈出Tabs頁籤并去重
<script type="text/javascript">
$(function() {
$('#a').click(function() {
if($('#tt').tabs('exists','客戶管理')){
$('#tt').tabs('select','客戶管理');
}else{
$('#tt').tabs('add',{
title:'客戶管理',
content:'Tab Body',
closable:true,
});
}
});
});
</script>
<a id="a" class="easyui-linkbutton" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >通過點選彈出頁籤</a>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab2" data-options="closable:true,selected:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
</div>
5、DataGrid表格顯示Json資料
$(function(){
$('#dg').datagrid({
//json資料所在的位置
url:'datagrid_data1.json',
columns:[[
{field:'productid',title:'商品編号',width:100},
{field:'productname',title:'商品名稱',width:100},
{field:'unitcost',title:'商品賣出時間',width:100,align:'right'},
{field:'xxxxx',title:'操作',width:100,align:'left',formatter: function(value,row,index){
return "<a href ='#'>修改</a> | <a href = '#'>删除</a>";
}
}
]],
//顯示各行換色
striped:'true',
//顯示分頁工具欄
pagination:'true',
pageList:[10,20,30,40,50],
});
});
<body>
<table id="dg"></table>
</body>
6、彈出視窗，用來新增和更新資料
$(function(){
$('#win').window({
width:600,
height:400,
modal:true,
});
});
<body>
<div id="win"></div>
</body>
核心代碼
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="./themes/icon.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<style>
.westname
{
text-decoration:none;
}
</style>
<script type="text/javascript">
$(function(){
$('.westname').click(function(){
var name = this.innerHTML;
var url = this.href;
//通過擷取的名字建立頁籤
crateTabs(name,url);
//讓超連結不跳轉
return false;
});
});
//建立tabs的函數
function crateTabs(name,url){
if($('#tt').tabs('exists',name)){
$('#tt').tabs('select',name);
}else{
$('#tt').tabs('add',{
title:name,
content:createUrl(url),
closable:true
});
}
}
//使用iframe轉化裡面的資料使之傳回的是url裡面的資料
function createUrl(url){
return "<iframe src='"+url+"' style='border:0px;width:100%;height:95%;'></iframe>";
}
</script>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north',title:'CRM管理系統',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'系統菜單',split:true" style="width:100px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="客戶管理" data-options="iconCls:'icon-reload',selected:true" style="overflow: auto; padding: 10px;">
<a href="customer.html" target="_blank" rel="external nofollow" class="westname" >客戶管理</a>
</div>
<div title="聯系人管理" data-options="iconCls:'icon-reload'" style="padding: 10px;">
<a href="linkMen.html" target="_blank" rel="external nofollow" class="westname">聯系人管理</a>
</div>
<div title="商品管理" data-options="iconCls:'icon-reload'" style="padding: 10px;">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="westname">商品管理</a>
</div>
<div title="訂單管理" data-options="iconCls:'icon-reload'" style="padding: 10px;">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="westname">訂單管理</a>
</div>
<div title="位址管理" data-options="iconCls:'icon-reload'" style="padding: 10px;">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="westname">位址管理</a>
</div>
</div>
</div>
<div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="資料資料" data-options="closable:true" style="overflow: auto; padding: 20px; display: none;">這是資料資料</div>
</div>
</div>
</div>
</body>
</html>
customer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./themes/default/easyui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="./themes/icon.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
url:'customer_findAll.action',
columns:[[
{field:'cust_name',title:'客戶名稱',width:100},
{field:'cust_source',title:'客戶來源',width:100},
{field:'cust-level',title:'客戶水準',width:100},
{field:'cust-industry',title:'客戶行業',width:100},
{field:'cust-phone',title:'客戶的固定電話',width:100},
{field:'cust-mobile',title:'客戶的行動電話',width:100}
]] ,
striped:'true',
pagination:'true',
pagePosition:'bottom',
pageNumber:1,
pageSize:3,
pageList: [1,2,3],toolbar: [{
iconCls: 'icon-add',
handler: function(){$('#winAdd').window('open');}
}]
});
});
function save(){
//送出表單資料
$('#formAdd').form('submit', {
url:"customer_save.action",
success:function(data){
//data是字元串類型
//把字元串轉成Json,使用Js的全局函數eval()把一個字元串當成json格式來使用
var jsondata = eval("("+data+")");
$.messager.show({
title:'提示消息',
msg:jsondata.msg,
timeout:5000,
showType:'slide'
});
//關閉視窗
$("#winAdd").window("close");
//表格重新加載
$("#dg").datagrid("reload");
}
});
}
</script>
</head>
<body>
<table id="dg"></table>
<!-- 添加客戶的表單，預設是隐藏的 -->
<div id="winAdd" class="easyui-window" title="添加客戶" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true,closed:true">
<form id="formAdd" method="post">
<TABLE cellSpacing=0 cellPadding=5 border=0>
<TR>
<td>客戶名稱：</td>
<td>
<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_name">
</td>
<td>客戶級别 ：</td>
<td>
<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_level">
</td>
</TR>
<TR>
<td>資訊來源 ：</td>
<td>
<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_source">
</td>
<td>客戶行業：</td>
<td>
<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_industry">
</td>
</TR>
<TR>
<td>固定電話 ：</td>
<td>
<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_phone">
</td>
<td>行動電話 ：</td>
<td>
<INPUT class=textbox id=sChannel2 style="WIDTH: 180px" maxLength=50 name="cust_mobile">
</td>
</TR>
<tr>
<td rowspan=2>
<button id="customerBtn" type="button" onclick="save()">儲存</button>
</td>
</tr>
</TABLE>
</form>
</div>
</body>
</html>