首先吐槽一下需求人員給了我一個很坑的需求:WdatePicker日歷控件里面選擇的最小時間(minDate)的值是級聯動態改變的,而且這個值要從數據庫獲取,這樣子只能使用 ajax 來發起請求獲取minDate屬性值。
先看代碼:
<div class="control-group">
<label class="control-label">報讀月份:</label>
<div class="controls">
<input name="readMonth" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate required"
value="${launchReadMeter.readMonth}" onclick="checkClick(this);"/>
<span class="help-inline"><font color="red">*</font> </span>
</div>
</div>
<script type="text/javascript">
function checkClick(obj) {
$(obj).attr("value","");
var officeId = $("#officeId").val();
var meterType = $("#meterType").val();
if(officeId!="" && meterType!="") {
$.ajax({
url:'${ctx}/launchreadmeter/launchReadMeter/getReadMeter',
type:'post',
dataType:'json',
async:false,
data:{
officeId:officeId+"",
meterType:meterType+""
},
success:function(data){
WdatePicker({minDate:data.readMonth,maxDate:'%y-%M',dateFmt:'yyyy-MM',isShowClear:false});
}
});
} else {
top.$.jBox.tip("請先選擇小區和儀表類型!");
}
}
</script>
圖解:
注意:ajax 方法必須設置同步(async:false),不然 WdatePicker 時間控件 就失效了,因為異步執行就會導致一個問題,onclick="checkClick(this);" 監聽方法會先執行完了,盡管還是會進入success function 但已經不會再彈出時間選擇控件了。
推薦閱讀:http://www.cnblogs.com/yuhanzhong/archive/2011/08/10/2133276.html
http://www.cnblogs.com/southwind/articles/4170292.html
關注公眾號,分享干貨,討論技術
