1.從載入EasyUI開始
讀者需要到EasyUI官網中下載包含原文件和demo的壓縮包，并解壓到之前編寫的代碼目錄下即可，文件路徑請參考下方源代碼。參考鏈接：Download jQuery EasyUI 1.5.2,下載其中的Freeware Edition。
這部分教程的內容集中在如何用EasyUI編寫房貸計算器。如果讀者學習并實現過前兩部分HTML和jQuery的教程，那么學習這一部分的難度會大大降低，只需要關注純粹的EasyUI內容即可；如果讀者沒有學習過前兩部分內容，也可以直接學習這一部分內容，對房貸計算器內容和交互部分，可以先運行最后給出的完整代碼來理解。
源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房貸計算器</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/color.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
</head>
<body>
<h2>房貸計算器</h2>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="fd_easyui.js"></script>
</body>
</html>
先修知識：
1.<link> 標簽最常見的用途是鏈接樣式表,源代碼中鏈接了常用的4個EasyUI樣式，參考鏈接：HTML <link> 標簽。
2.讀者需要對CSS樣式有簡單的了解，只需要知道CSS 可以改變HTML外觀即可，
參考鏈接：CSS 簡介。
代碼中鏈接了4個常用EasyUI樣式和3個JavaScript文件，并將自己編寫的JavaScript代碼放在相同目錄的fd_easyui.js 文件中。
2.如何學習EasyUI
讀者可以按照以下5個步驟，學習和使用EasyUI:
- 了解EasyUI有哪些插件，以及這些插件的效果，選擇合適的插件來實現想要的功能，參考鏈接：EasyUI Demo 在線實例。
- 了解插件的屬性，思考自己會用到哪些屬性，以及如何編寫這些屬性。
- 了解插件的事件，思考自己會用到哪些事件，以及如何編寫這些事件。
- 了解插件的方法，思考自己會用到哪些方法，以及如何編寫這些方法。
- 參考EasyUI插件文檔中對于插件屬性、事件和方法的詳細說明，運行我們下載并解壓的官方文檔
jquery-easyui-1.5.2\demo目錄下的demo，每一個插件都有幾個參考樣例，其中basic.html演示了插件基本功能，其余樣例演示了設置不同的屬性、事件和方法后，插件的效果有何變化。
3.頁面布局
功能：
把所有的輸入輸出文本框都顯示在一列，顯得過于冗長，我們需要把用戶輸入的房貸信息和房貸詳情的計算結果分成兩列顯示。使用EasyUI的Layout插件可以實現頁面布局功能，布局（layout）是有五個區域（北區 north、南區 south、東區 east、西區 west 和中區 center）的容器。中間的區域面板是必需的，邊緣區域面板是可選的。每個邊緣區域面板可通過拖拽邊框調整尺寸，也可以通過點擊折疊觸發器來折疊面板。我們將用戶的輸入信息放在，中區，將計算結果信息放在東區。
效果截圖：
源代碼：
<div class="easyui-layout" style="width:801px;height:570px;">
<div data-options="region:'center',title:'房貸詳情'" style="padding:10px;" >
</div>
<div data-options="region:'east',title:'計算結果',collapsible:false" style="width:400px;">
</div>
</div>
先修知識：
- 在HTML標簽中加入
class="easyui-layout"，表示這是一個EasyUI插件。 - 教程中用使用
style設置標簽的寬（width）、高（height）、內邊距（padding）和外邊距（margin），這些數值都是調整好之后的，讀者可以先不設置這些值，把整個頁面編寫完之后，再自行調整，參考鏈接：HTML style 屬性，CSS width 屬性，CSS height 屬性，CSS padding 屬性，CSS margin 屬性。 - 簡單了解
Layout插件的效果和功能，參考鏈接：EasyUI Layout 布局,參考demo：jquery-easyui-1.5.2\demo\layout\basic.html。 - EasyUI插件的屬性，可以在標簽中用
data-options屬性來設置，例如：data-options="region:'center',title:'房貸詳情'"。 -
Layout插件的region屬性定義布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center；title屬性表示布局面板（layout panel）的標題文本；collapsible屬性定義是否顯示可折疊按鈕。參考鏈接：EasyUI Layout 布局,參考demo：jquery-easyui-1.5.2\demo\layout\nocollapsible.html。
4.選擇貸款類別
我們將用戶選擇貸款類型和自動修改貸款利率這兩個緊密關聯的功能，放在一個小面板中。
效果截圖：
源代碼：
- HTML源代碼：
<div style="width:380px;height:100px; margin-bottom: 10px ">
<div class="easyui-panel" title="貸款類別" style="width:380px;height:100px; padding:10px; " >
<div>
<input id="cc" style="width:250px;">
</div>
<div id="sp">
<div style="line-height:22px;background:#fafafa;padding:5px;">請選擇貸款類別</div>
<div style="padding:10px">
<input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked ="checked" ><span>公積金貸款</span><br/>
<input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan"><span>商業貸款</span>
</div>
</div>
<div>
<input id="id_dai_kuan_li_lv" class="easyui-textbox" type="text" name="dai_kuan_li_lv" value="3.25" label="貸款利率:" labelPosition="left" style="width:250px;"> %
</div>
</div>
</div>
- JavaScript源代碼：
$('#cc').combo({
editable:false,
label:'選擇貸款類型:',
labelPosition:'left'
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
$("#sp input").change(function () {
if ( $("input:radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
{
$("#id_dai_kuan_li_lv").textbox('setValue',"4.90");
} else
{
$("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
}
});
先修知識：
- EasyUI的面板用Panel插件實現，參考鏈接：EasyUI Panel 面板,參考demo：
jquery-easyui-1.5.2/demo/panel/basic.html。 - EasyUI中沒有與
radio樣式直接對應的插件，我們使用功能類似的Combo組合代替。參考demo：jquery-easyui-1.5.2/demo/combo/basic.html中用Combo插件實現了radio單選按鈕的功能，我們只需要在這個demo上稍作修改，就可以實現我們需要的功能。需要注意的是組合（combo）可以使用 javascript 從 <select> 或 <input> 元素進行創建。請注意，從標記創建組合（combo）是無效的，參考鏈接：EasyUI Combo 組合。 - 用JavaScript設置EasyUI插件的屬性的流程如下，以
combo為例：
$('#cc').combo({
editable:false,
label:'選擇貸款類型:',
labelPosition:'left'
});
首先只能使用jQuery的id選擇器來選擇元素，然后說明插件的類型（本例中是combo），然后在大括號中設置屬性的值。
-
combo插件的editable屬性定義用戶是否可以往文本域中直接輸入文字。EasyUI插件可以使用label和labelPosition屬性定義標記和標記的位置，功能與HTML的label標簽相同，參考鏈接：EasyUI Combo 組合，HTML <label> 標簽。 - 通過 jQuery，可以把動作/方法鏈接起來。即允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。語句
$('#sp').appendTo($('#cc').combo('panel'));就是在同一個元素上運行了兩個方法，參考鏈接：jQuery - Chaining。 - jQuery的
appendTo()方法在被選元素的結尾（仍然在內部）插入指定內容，參考鏈接：appendTo() 方法。 - 用JavaScript調用EasyUI插件的方法的流程如下，以combo為例：
無參數：
$('#cc').combo('panel');
有參數：
$('#cc').combo('setValue', "gong_ji_jin_dai_kuan");
其中combo代表插件名稱， 'setValue'和'panel'代表插件插件的方法名， "gong_ji_jin_dai_kuan"是傳入參數的值。
-
combo插件的panel方法用來返回下拉面板對象，setValue方法用來設置組件的值，setText方法用來設置文本值，hidePanel方法用來隱藏下拉面板，參考鏈接：EasyUI Combo 組合。 - jQuery可以通過
this關鍵字選擇被選中的元素，參考鏈接：jQuery 核心 - jQuery() 方法中的用法 2 ：使用 DOM 元素部分。 -
<span>標簽被用來組合文檔中的行內元素，參考鏈接：HTML <span> 標簽。 - jQuery的
text()方法用來設置或返回被選元素的文本內容，參考鏈接：jQuery 文檔操作 - text() 方法。 - EasyUI的
textbox插件用來實現文本框。textbox的setValue方法用來設置文本框的值；textbox的getValue方法用來設置文本框的值。參考鏈接：TextBox，參考demo：jquery-easyui-1.5.2/demo/textbox/basic.html。
5.選擇計算方式
采用EasyUI標簽頁插件實現用戶選擇計算方式的功能，取代之前使用單選按鈕加隱藏輸入框的方式。采用EasyUI組合框插件實現用戶選擇首付比例的功能，取代之前使用的下拉列表。
效果截圖：
源代碼：
<div style="width:380px;height:130px; margin-bottom: 10px ">
<div id="id_ji_suan_fang_shi" class="easyui-tabs" style="width:380px;height:130px">
<div title="根據面積、單價、首付比例計算" style="padding:10px">
<div>
<input id="id_dan_jia" class="easyui-textbox" type="text" name="dan_jia" label="單價:" labelPosition="left" style="width:250px;"> 元/平方米
</div>
<div>
<input id="id_mian_ji" class="easyui-textbox" type="text" name="mian_ji" label="面積:" labelPosition="left" style="width:250px;"> 平方米
</div>
<div >
<select id ="id_shou_fu_bi_li" class="easyui-combobox" name="shou_fu_bi_li" label="首付比例:" labelPosition="left" style="width:250px;">
<option value="0">無</option>
<option value="0.1">1成</option>
<option value="0.2">2成</option>
<option value="0.3" selected = "selected">3成</option>
<option value="0.4">4成</option>
<option value="0.5">5成</option>
<option value="0.6">6成</option>
<option value="0.7">7成</option>
<option value="0.8">8成</option>
<option value="0.9">9成</option>
</select>
</div>
</div>
<div title="根據貸款總額計算" style="padding:10px">
<div>
<input id="id_dai_kuan_zong_e" class="easyui-textbox" type="text" name="dai_kuan_zong_e" label="貸款總額:" labelPosition="left" style="width:250px;"> 元
</div>
</div>
</div>
</div>
先修知識：
1.EasyUI用tabs創建選項卡插件，參考鏈接：EasyUI Tabs 標簽頁/選項卡，參考demo：jquery-easyui-1.5.2/demo/tabs/basic.html。
2.EasyUI用combobox創建組合框，參考鏈接：EasyUI Combobox 組合框，參考demo：jquery-easyui-1.5.2/demo/combobox/basic.html。
6.選擇貸款年數
采用EasyUI組合框插件實現用戶選擇貸款年數的功能，取代之前使用的下拉列表，并將這個組合框放在單獨的一個面板中。
效果截圖：
源代碼：
<div style="width:380px;height:100px; margin-bottom: 10px ">
<div class="easyui-panel" title="貸款年數" style="width:380px;height:100px; padding:10px;">
<div >
<select id="id_dai_kuan_nian_shu" class="easyui-combobox" name="dai_kuan_nian_shu" style="width:250px;" label="選擇貸款年數:" labelPosition="left">
<option value="72">6年(72期)</option>
<option value="84">7年(84期)</option>
<option value="96">8年(96期)</option>
<option value="108">9年(108期)</option>
<option value="120">10年(120期)</option>
<option value="132">11年(132期)</option>
<option value="144">12年(144期)</option>
<option value="156">13年(156期)</option>
<option value="168">14年(168期)</option>
<option value="180">15年(180期)</option>
<option value="192">16年(192期)</option>
<option value="204">17年(204期)</option>
<option value="216">18年(216期)</option>
<option value="228">19年(228期)</option>
<option value="240">20年(240期)</option>
<option value="252">21年(252期)</option>
<option value="264">22年(264期)</option>
<option value="276">23年(276期)</option>
<option value="288">24年(288期)</option>
<option value="300">25年(300期)</option>
<option value="312">26年(312期)</option>
<option value="324">27年(324期)</option>
<option value="336">28年(336期)</option>
<option value="348">29年(348期)</option>
<option value="360" selected = "selected" >30年(360期)</option>
</select>
</div>
</div>
</div>
7.顯示計算結果
在布局的東區顯示計算結果。
效果截圖：
源代碼：
<div style="width:370px;height:500px; margin-bottom: 10px ;padding:10px">
<div>
<input id="id_jie_guo_fang_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guofang_kuan_zong_e" label="房款總額:" labelPosition="left" style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_shou_fu_shu_e" class="easyui-textbox" type="text" name="jie_guo_shou_fu_shu_e" label="首付數額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_dai_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_zong_e" label="貸款總額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_huan_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_huan_kuan_zong_e" label="還款總額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_li_xi_zong_e" class="easyui-textbox" type="text" name="jie_guo_li_xi_zong_e" label="利息總額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_dai_kuan_yue_shu" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_yue_shu" label="貸款月數:" labelPosition="left"style="width:250px;"> 元
</div>
<div id="id_div_jie_guo_mei_yue_huan_kuan">
<input id="id_jie_guo_mei_yue_huan_kuan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan" label="每月還款:" labelPosition="left"style="width:250px;"> 元
</div>
<div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
<input id="id_jie_guo_mei_yue_huan_kuan_qing_dan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan_qing_dan" label="每月還款:" labelPosition="left" multiline="true" style="width:250px;height:200px">
</div>
</div>
</div>
先修知識：
1.EasyUI中將textbox插件的multiline屬性設置為true即可實現多行文本框，參考鏈接：Multiline TextBox，參考demo：jquery-easyui-1.5.2/demo/textbox/multiline.html。
8.實現選擇還款方式
采用EasyUI的combo插件實現選擇還款方式的功能，取代之前的單選按鈕。用戶選擇單選按鈕的同時，顯示對應的每月還款單行文本框或多行文本框。
效果截圖：
源代碼：
- HTML源代碼：
<div style="width:380px;height:80px; margin-bottom: 10px ">
<div class="easyui-panel" title="還款方式" style="width:380px;height:80px; padding:10px;">
<div>
<input id="cc2" style="width:250px;">
</div>
<div id="sp2">
<div style="line-height:22px;background:#fafafa;padding:5px;">請選擇還款方式</div>
<div style="padding:10px">
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked ="checked" ><span>等額本息</span><br/>
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin"><span>等額本金</span>
</div>
</div>
</div>
</div>
- JavaScript源代碼：
$('#cc2').combo({
required:true,
editable:false,
label:'選擇還款方式:',
labelPosition:'left'
});
$('#sp2').appendTo($('#cc2').combo('panel'));
$('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
$('#sp2 input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc2').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
$("input:radio[name=huan_kuan_fang_shi]").change(function () {
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi")
{
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
} else
{
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan").hide();
}
});
9.計算、重置按鈕
采用EasyUI的Linkbutton插件實現按鈕功能，并添加按鈕顏色，取代之前的button按鈕。用戶點擊計算按鈕時，顯示計算結果；用戶點擊重置按鈕時，將頁面上所有插件的值設置為初始值。
效果截圖：
源代碼：
- HTML源代碼：
<div style="width:280px;height:30px; margin-bottom: 10px ; padding-left: 100px ">
<a href="#" id = "ji_suan" class="easyui-linkbutton c6" style="width:80px" >計算</a>
<a href="#" id = "chong_zhi" class="easyui-linkbutton c2" style="width:80px">重置</a>
</div>
- JavaScript源代碼：
$('#ji_suan').linkbutton({
onClick:function(){
if( $('#id_ji_suan_fang_shi').tabs('getTabIndex', $('#id_ji_suan_fang_shi').tabs('getSelected'))== 0)
{
if ( $("#id_dan_jia").textbox('getValue') == 0)
{
alert("請填寫單價");
}
if ($("#id_mian_ji").textbox('getValue') == 0)
{
alert("請填寫面積");
}
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue');
var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',fang_kuan_zong_e);
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li);
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e);
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2));
$("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2));
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
}else
{
var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue');
var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
for (var i = 1; i <= yue_shu; i++)
{
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue', fang_kuan_zong_e );
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li );
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").textbox('setValue',(huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
}
}else
{
if ( $("#id_dai_kuan_zong_e").textbox('getValue') == 0)
{
alert("請填寫貸款總額");
}
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略');
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
}else
{
var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
for (var i = 1; i <= yue_shu; i++)
{
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略');
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").textbox('setValue', (huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
}
}
}
});
$('#chong_zhi').linkbutton({
onClick:function(){
$(":radio[name=dai_kuan_lei_bie][value=gong_ji_jin_dai_kuan]").prop("checked",true);
$('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
$("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
$('#id_ji_suan_fang_shi').tabs("select", 0);
$("#id_dan_jia").textbox('setValue',"");
$("#id_mian_ji").textbox('setValue',"");
$("#id_shou_fu_bi_li").combobox('setValue',"0.3");
$("#id_dai_kuan_zong_e").textbox('setValue',"");
$("#id_dai_kuan_nian_shu").combobox('setValue',"360");
$(":radio[name=huan_kuan_fang_shi][value=deng_e_ben_xi]").prop("checked",true);
$('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',"");
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue',"");
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue',"");
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue',"");
$("#id_jie_guo_li_xi_zong_e").textbox('setValue',"");
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue',"");
$("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue',"");
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue',"");
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
}
});
先修知識：
- EasyUI用
linkbutton創建鏈接按鈕插件，用一個<a>標簽表示，在class屬性中添加c1到c8可以設置按鈕顏色，參考鏈接：EasyUI Linkbutton 鏈接按鈕，參考demo：jquery-easyui-1.5.2/demo/linkbutton/basic.html、jquery-easyui-1.5.2/demo/linkbutton/style.html。 - 用JavaScript設置EasyUI插件事件的流程如下，以
linkbutton的onClick事件為例：
$('#ji_suan').linkbutton({
onClick:function(){
//函數代碼放在這里
}
});
-
tabs插件的getSelected方法表示獲取選中的標簽頁面板，getTabIndex方法表示獲取指定的標簽頁面板索引（第一個面板的索引是0），select方法表示選擇一個標簽頁面板， 參數可以是標簽頁面板的標題（title）或索引（index），參考鏈接：EasyUI Tabs 標簽頁/選項卡，參考demo：jquery-easyui-1.5.2/demo/tabs/tabstools.html，/jquery-easyui-1.5.2/demo/tabs/dropdown.html。 -
combobox插件的getValue方法表示獲取組合框的值，參考demo：jquery-easyui-1.5.2/demo/combobox/actions.html。
10.房貸計算器EasyUI部分的源代碼
- HTML源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房貸計算器</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/color.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
</head>
<body>
<h2>房貸計算器</h2>
<div class="easyui-layout" style="width:801px;height:570px;">
<div data-options="region:'center',title:'房貸詳情'" style="padding:10px;" >
<div style="width:380px;height:100px; margin-bottom: 10px ">
<div class="easyui-panel" title="貸款類別" style="width:380px;height:100px; padding:10px; " >
<div>
<input id="cc" style="width:250px;">
</div>
<div id="sp">
<div style="line-height:22px;background:#fafafa;padding:5px;">請選擇貸款類別</div>
<div style="padding:10px">
<input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked ="checked" ><span>公積金貸款</span><br/>
<input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan"><span>商業貸款</span>
</div>
</div>
<div>
<input id="id_dai_kuan_li_lv" class="easyui-textbox" type="text" name="dai_kuan_li_lv" value="3.25" label="貸款利率:" labelPosition="left" style="width:250px;"> %
</div>
</div>
</div>
<div style="width:380px;height:130px; margin-bottom: 10px ">
<div id="id_ji_suan_fang_shi" class="easyui-tabs" style="width:380px;height:130px">
<div title="根據面積、單價、首付比例計算" style="padding:10px">
<div>
<input id="id_dan_jia" class="easyui-textbox" type="text" name="dan_jia" label="單價:" labelPosition="left" style="width:250px;"> 元/平方米
</div>
<div>
<input id="id_mian_ji" class="easyui-textbox" type="text" name="mian_ji" label="面積:" labelPosition="left" style="width:250px;"> 平方米
</div>
<div >
<select id ="id_shou_fu_bi_li" class="easyui-combobox" name="shou_fu_bi_li" label="首付比例:" labelPosition="left" style="width:250px;">
<option value="0">無</option>
<option value="0.1">1成</option>
<option value="0.2">2成</option>
<option value="0.3" selected = "selected">3成</option>
<option value="0.4">4成</option>
<option value="0.5">5成</option>
<option value="0.6">6成</option>
<option value="0.7">7成</option>
<option value="0.8">8成</option>
<option value="0.9">9成</option>
</select>
</div>
</div>
<div title="根據貸款總額計算" style="padding:10px">
<div>
<input id="id_dai_kuan_zong_e" class="easyui-textbox" type="text" name="dai_kuan_zong_e" label="貸款總額:" labelPosition="left" style="width:250px;"> 元
</div>
</div>
</div>
</div>
<div style="width:380px;height:100px; margin-bottom: 10px ">
<div class="easyui-panel" title="貸款年數" style="width:380px;height:100px; padding:10px;">
<div >
<select id="id_dai_kuan_nian_shu" class="easyui-combobox" name="dai_kuan_nian_shu" style="width:250px;" label="選擇貸款年數:" labelPosition="left">
<option value="72">6年(72期)</option>
<option value="84">7年(84期)</option>
<option value="96">8年(96期)</option>
<option value="108">9年(108期)</option>
<option value="120">10年(120期)</option>
<option value="132">11年(132期)</option>
<option value="144">12年(144期)</option>
<option value="156">13年(156期)</option>
<option value="168">14年(168期)</option>
<option value="180">15年(180期)</option>
<option value="192">16年(192期)</option>
<option value="204">17年(204期)</option>
<option value="216">18年(216期)</option>
<option value="228">19年(228期)</option>
<option value="240">20年(240期)</option>
<option value="252">21年(252期)</option>
<option value="264">22年(264期)</option>
<option value="276">23年(276期)</option>
<option value="288">24年(288期)</option>
<option value="300">25年(300期)</option>
<option value="312">26年(312期)</option>
<option value="324">27年(324期)</option>
<option value="336">28年(336期)</option>
<option value="348">29年(348期)</option>
<option value="360" selected = "selected" >30年(360期)</option>
</select>
</div>
</div>
</div>
<div style="width:380px;height:80px; margin-bottom: 10px ">
<div class="easyui-panel" title="還款方式" style="width:380px;height:80px; padding:10px;">
<div>
<input id="cc2" style="width:250px;">
</div>
<div id="sp2">
<div style="line-height:22px;background:#fafafa;padding:5px;">請選擇還款方式</div>
<div style="padding:10px">
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked ="checked" ><span>等額本息</span><br/>
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin"><span>等額本金</span>
</div>
</div>
</div>
</div>
<div style="width:280px;height:30px; margin-bottom: 10px ; padding-left: 100px ">
<a href="#" id = "ji_suan" class="easyui-linkbutton c6" style="width:80px" >計算</a>
<a href="#" id = "chong_zhi" class="easyui-linkbutton c2" style="width:80px">重置</a>
</div>
</div>
<div data-options="region:'east',title:'計算結果',collapsible:false" style="width:400px;">
<div style="width:370px;height:500px; margin-bottom: 10px ;padding:10px">
<div>
<input id="id_jie_guo_fang_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guofang_kuan_zong_e" label="房款總額:" labelPosition="left" style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_shou_fu_shu_e" class="easyui-textbox" type="text" name="jie_guo_shou_fu_shu_e" label="首付數額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_dai_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_zong_e" label="貸款總額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_huan_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_huan_kuan_zong_e" label="還款總額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_li_xi_zong_e" class="easyui-textbox" type="text" name="jie_guo_li_xi_zong_e" label="利息總額:" labelPosition="left"style="width:250px;"> 元
</div>
<div>
<input id="id_jie_guo_dai_kuan_yue_shu" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_yue_shu" label="貸款月數:" labelPosition="left"style="width:250px;"> 元
</div>
<div id="id_div_jie_guo_mei_yue_huan_kuan">
<input id="id_jie_guo_mei_yue_huan_kuan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan" label="每月還款:" labelPosition="left"style="width:250px;"> 元
</div>
<div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
<input id="id_jie_guo_mei_yue_huan_kuan_qing_dan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan_qing_dan" label="每月還款:" labelPosition="left" multiline="true" style="width:250px;height:200px">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="fd_easyui.js"></script>
</body>
</html>
- JavaScript源代碼：
$(document).ready(function(){
$('#cc').combo({
editable:false,
label:'選擇貸款類型:',
labelPosition:'left'
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
$("#sp input").change(function () {
if ( $("input:radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
{
$("#id_dai_kuan_li_lv").textbox('setValue',"4.90");
} else
{
$("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
}
});
$('#cc2').combo({
required:true,
editable:false,
label:'選擇還款方式:',
labelPosition:'left'
});
$('#sp2').appendTo($('#cc2').combo('panel'));
$('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
$('#sp2 input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc2').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
$("input:radio[name=huan_kuan_fang_shi]").change(function () {
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi")
{
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
} else
{
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan").hide();
}
});
$('#ji_suan').linkbutton({
onClick:function(){
if( $('#id_ji_suan_fang_shi').tabs('getTabIndex', $('#id_ji_suan_fang_shi').tabs('getSelected'))== 0)
{
if ( $("#id_dan_jia").textbox('getValue') == 0)
{
alert("請填寫單價");
}
if ($("#id_mian_ji").textbox('getValue') == 0)
{
alert("請填寫面積");
}
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue');
var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',fang_kuan_zong_e);
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li);
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e);
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2));
$("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2));
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
}else
{
var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue');
var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
for (var i = 1; i <= yue_shu; i++)
{
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue', fang_kuan_zong_e );
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li );
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").textbox('setValue',(huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
}
}else
{
if ( $("#id_dai_kuan_zong_e").textbox('getValue') == 0)
{
alert("請填寫貸款總額");
}
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略');
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
}else
{
var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
for (var i = 1; i <= yue_shu; i++)
{
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略');
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").textbox('setValue', (huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
}
}
}
});
$('#chong_zhi').linkbutton({
onClick:function(){
$(":radio[name=dai_kuan_lei_bie][value=gong_ji_jin_dai_kuan]").prop("checked",true);
$('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
$("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
$('#id_ji_suan_fang_shi').tabs("select", 0);
$("#id_dan_jia").textbox('setValue',"");
$("#id_mian_ji").textbox('setValue',"");
$("#id_shou_fu_bi_li").combobox('setValue',"0.3");
$("#id_dai_kuan_zong_e").textbox('setValue',"");
$("#id_dai_kuan_nian_shu").combobox('setValue',"360");
$(":radio[name=huan_kuan_fang_shi][value=deng_e_ben_xi]").prop("checked",true);
$('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
$("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',"");
$("#id_jie_guo_shou_fu_shu_e").textbox('setValue',"");
$("#id_jie_guo_dai_kuan_zong_e").textbox('setValue',"");
$("#id_jie_guo_huan_kuan_zong_e").textbox('setValue',"");
$("#id_jie_guo_li_xi_zong_e").textbox('setValue',"");
$("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue',"");
$("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue',"");
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue',"");
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
}
});
});
11.房貸計算器EasyUI部分最終效果截圖
