easyui datagrid 編輯器添加事件

easyui的龐大功能使我們實現web頁面的一些複雜功能變得簡單快捷,下面我來總結一下我今天用到的datagrid的編輯器事件:

有時我們想讓datagrid中的data處於動態編輯,當觸發datagrid的onCheck事件時選擇的行處於編輯狀態,當編輯結束時觸發一個處理編輯數據的事件,datagrid getEditor提供的target.bind可以很方便的實現事件的綁定,從而實現事件處理。

本人現在實現的是當編輯結束時獲取編輯後的值並進行運算後賦給input,代碼如下:

//結束所有的編輯狀態

function endEdit(){
var rows = $('#companyList').datagrid('getRows');
for ( var i = 0; i < rows.length; i++) {
$('#companyList').datagrid('endEdit', i);
}
}

//觸發選擇框事件

onCheck:function(rowIndex,rowData){
endEdit();//結束所有編輯
$('#companyList').datagrid('beginEdit', rowIndex);//開始編輯選擇的行
var ed = $('#companyList').datagrid('getEditor', {index:rowIndex,field:'purchaseBudget'});//獲取當前的編輯器
ed.target.bind('blur', function () {//綁定失去焦點事件
$('#companyList').datagrid('endEdit', rowIndex);//結束編輯
var budget = rowData.purchaseBudget;//獲取勾選行填寫的值
if(budget == null || budget == "" || budget == '0' || budget == undefined){
$.messager.alert('提示', '請覈對採購預算填寫項!', 'warning');
$('#companyList').datagrid('uncheckRow', rowIndex);
return;
}
var purBudget = $('#purchase_budget').html();//獲取採購總預算的值
if(purBudget == null || purBudget ==undefined || purBudget == ""){
purBudget = 0;
}
var totalBudget = parseFloat(purBudget) + parseFloat(budget);//將採購總預算和選擇的值相加
$('#purchase_budget').html(totalBudget);
});
},

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章