今天工作中EasyUI 頁面用到的知識點,總結一下:

如下圖:

需求: 設置考核價為不可編輯狀態,包括考核價的交易幣種符號合考核價的金額

考核價的幣種和金額從合同價和考核費率數據中獲取

考核價的幣種同合同價幣種一樣,考核價金額=合同價金額*考核費率

通過設置disabled屬性為true設置考核價幣種下拉列表 和 考核價金額文本框 為不可編輯狀態

設置考核價幣種下拉列表不可編輯:

<select id="asseCurrencyID" name="asseCurrency" class="ipt easyui-xcombobox" style="width: 40px;"
data-options="dataDict:dataDict,field:‘currency‘,value:‘${(baseInfo.contCurrency)!‘rmb‘ }‘,disabled:true"

設置考核價金額文本框不可編輯:

<input id="jsAssePrice" value="${(baseInfo.assePrice)!‘‘}" prompt="已簽訂需填寫考核價" name="assePrice"

type="text" class="ipt easyui-numberbox" style="width: 110px;"

data-options="min:0,precision:2,required:true,missingMessage:‘考核價不能為空‘" disabled=‘disabled‘ />萬元

通過設置合同價幣種下拉列表的改變,設置考核價幣種的改變:

設置合同價幣種下拉列表改變事件:

<select id="contractCoin" class="ipt easyui-xcombobox"

data-options="required:true,dataDict:dataDict,field:‘currency‘,value:‘${(baseInfo.contCurrency)!‘rmb‘}‘,

onChange:contractChange" style="width: 40px;">

合同價下拉列表改變事件修改考核價下拉列表的值:(js代碼如下)

contractChange:function(newValue,oldValue){

setTimeout(function(){

$("#asseCurrencyID").combobox("setValue",newValue);

}, 300);

}

PS: 此處修改的時候可能頁面未加載完,無法獲取到考核價的id,使用setTimeout延遲設置考核價幣種的值

通過設置合同價金額文本框的改變,設置考核價金額的改變:

設置合同價金額文本框改變事件:

合同價金額文本框頁面代碼:

<input id="contPrice" name="contPrice" value="${(baseInfo.contPrice)!‘‘}" type="text" class="ipt

easyui-numberbox" data-options="min:0,precision:2,required:true,missingMessage:‘合同價不能為空‘"/>萬元

合同價金額改變的js事件:

$(‘#contPrice‘).numberbox({

onChange:function(newValue,oldValue){

countAssePrice();

}

});

通過設置考核費率文本框的改變,設置考核價金額的改變:

考核費率文本框頁面代碼:

<input id="jsAsseRate" value="${(baseInfo.asseRate)!‘‘}" name="asseRate" type="text" class="ipt

easyui-numberbox" style="width: 110px;" data-options="min:0,precision:2,required:true,missingMessage:‘考核費率不能為空‘"/>

考核費率文本框改變的js事件:

$(‘#jsAsseRate‘).numberbox({

onChange:function(newValue,oldValue){

countAssePrice();

}

});

//計算考核價方法

function countAssePrice(){

//設置考核價=合同價*考核費率

var _contPrice= $(‘#contPrice‘).val();

var _jsAsseRate= $(‘#jsAsseRate‘).val();

var _jsAssePrice =_contPrice * _jsAsseRate/100;

$(‘#jsAssePrice‘).numberbox("setValue",_jsAssePrice);

}

EasyUI combobox 與 numberbox 屬性不可編輯與設置值的使用