easyui中datagrid添加單元格編輯事件

1.easyui中datagrid添加單元格編輯事件

這部分代碼實現兩個功能

(1)在進行選擇行的時候在頁腳統計已選數據需要計算字段的和

(2)有一個字段可以進行編輯，在編輯完成後也要在頁腳完成對該字段的統計

根據昨天的內容，可以完成不編輯字段的統計，今天的重點是需要編輯字段的統計。

代碼如下：

$('#whxdg').datagrid({

fit:true,

singleSelect:false,

toolbar: '#whxtb',

showFooter:'true',

url:getRootPath()+'/handverify/findDfInfo.do?customer='+code+'&pk_org='+pk_org+'&status=2',

columns:[[

{field:'ck',checkbox:true},

{field:'BILLNO',title:'單據號',width:200,align:'center'},

{field:'BILLTYPE',title:'單據類型',width:200,align:'center'},

{field:'JINE',title:'金額',width:200,align:'center'},

{field:'YHXJE',title:'已核銷金額',width:200,align:'center'},

{field:'MONEY_CR',title:'未核銷金額',width:200,align:'center'},

{field:'XGHXJE',title:'修改核銷金額',width:200,align:'center',editor:{type:'numberbox',options:{precision:0},min:0}},

{field:'BILLDATE',title:'單據日期',width:200,align:'center'},

{field:'HEADID',title:'單據日期',width:200,align:'center',hidden:true},

{field:'BODYID',title:'單據日期',width:200,align:'center',hidden:true}

]],

//添加單擊事件，

onClickCell: function(index,field,value){

if(field == 'XGHXJE'){

$(this).datagrid('beginEdit', index);

var ed = $(this).datagrid('getEditor', {index:index,field:'XGHXJE'});

$(ed.target).focus();

}else{

$(this).datagrid('endEdit', index);

}

},

onSelect:function (index,row){

$(this).datagrid('endEdit',index);

var rows = $('#whxdg').datagrid('getFooterRows'); //獲取底部頁腳信息

var foot_row = rows[0];

var XGHXJE = row.XGHXJE;

if(XGHXJE == ""){

XGHXJE = 0;

}

rows[0]['JINE'] = (parseFloat(row.JINE)+parseFloat(rows[0].JINE)).toFixed(2);

rows[0]['YHXJE'] = (parseFloat(row.YHXJE)+parseFloat(rows[0].YHXJE)).toFixed(2);

rows[0]['MONEY_CR'] = (parseFloat(row.MONEY_CR)+parseFloat(rows[0].MONEY_CR)).toFixed(2);

rows[0]['XGHXJE'] = (parseFloat(XGHXJE)+parseFloat(rows[0].XGHXJE)).toFixed(2);

$('#whxdg').datagrid('reloadFooter');

},

onUnselect:function (index,row){

var rows = $('#whxdg').datagrid('getFooterRows');

//alert(row.HXJETZ);

var row_XGHXJE = 0;

var foot_row = rows[0];

if(row.XGHXJE != ""){

row_XGHXJE = row.XGHXJE;

}

rows[0]['JINE'] = (parseFloat(rows[0].JINE) - parseFloat(row.JINE)).toFixed(2);

rows[0]['YHXJE'] = (parseFloat(rows[0].YHXJE) - parseFloat(row.YHXJE)).toFixed(2);

rows[0]['MONEY_CR'] = (parseFloat(rows[0].MONEY_CR) - parseFloat(row.MONEY_CR)).toFixed(2);

rows[0]['XGHXJE'] = (parseFloat(rows[0].XGHXJE) - parseFloat(row.XGHXJE)).toFixed(2);

$('#whxdg').datagrid('reloadFooter');

},

onSelectAll:function (rows){

var foot_JINE = 0;

var foot_YHXJE = 0;

var foot_MONEY_CR = 0;

var foot_XGHXJE = 0;

for(var i = 0;i < rows.length;i++){

var XGHXJE = rows[i].XGHXJE;

if(XGHXJE == ""){

XGHXJE = 0;

}

$(this).datagrid('endEdit', i);

foot_JINE = (parseFloat(foot_JINE) + parseFloat(rows[i].JINE)).toFixed(2);

foot_YHXJE = (parseFloat(foot_YHXJE) + parseFloat(rows[i].YHXJE)).toFixed(2);

foot_MONEY_CR = (parseFloat(foot_MONEY_CR) + parseFloat(rows[i].MONEY_CR)).toFixed(2);

foot_XGHXJE = (parseFloat(foot_XGHXJE) + parseFloat(XGHXJE)).toFixed(2);

}

var foot_rows = $('#whxdg').datagrid('getFooterRows');

foot_rows[0]['JINE'] = foot_JINE;

foot_rows[0]['YHXJE'] = foot_YHXJE;

foot_rows[0]['MONEY_CR'] = foot_MONEY_CR;

foot_rows[0]['XGHXJE'] = foot_XGHXJE;

$('#whxdg').datagrid('reloadFooter');

},

onUnselectAll:function (rows){

var foot_rows = $('#whxdg').datagrid('getFooterRows');

foot_rows[0]['JINE'] = "0";

foot_rows[0]['YHXJE'] = "0";

foot_rows[0]['MONEY_CR'] = "0";

foot_rows[0]['XGHXJE'] = "0";

$('#whxdg').datagrid('reloadFooter');

}

});

通過js加載datagrid代碼如上所示，通過onSelect，onUnselect，onSelectAll和onUnselectAll四個方法完成對頁腳數據的統計。方法中重要代碼：

(1)var foot_rows = $('#whxdg').datagrid('getFooterRows'):獲取底部頁腳行信息；

(2)foot_rows[0]['JINE'] = foot_JINE;以該格式對不同的字段進行賦值

(3)$('#whxdg').datagrid('reloadFooter');重新加載頁腳行數據

除此之外，通過單擊事件獲取需要編輯的字段：思路入下：

(1)只有單擊需要編輯的字段時，該字段才進入編輯狀態，同時，該行數據為onUnselect(取消選中)狀態，這樣做為了便於統計。主要代碼：

$(this).datagrid('beginEdit', index);//開啟該行數據的編輯狀態

var ed = $(this).datagrid('getEditor', {index:index,field:'XGHXJE'});//獲取需要編輯的字段

$(ed.target).focus();//設置該字段為焦點(即把光標移到該字段上)

(2)單擊該行其他單元格時，該行退出編輯，同時，該行數據為onSelect(選中)狀態，這樣做同樣是為了便於統計。

$(this).datagrid('endEdit', index);//結束該行數據編輯

(3)如果沒有單擊其他單元格，直接勾選行首的選中單元格或者進行全選操作，同樣結束行數據的編輯狀態，並進行統計。

$(this).datagrid('endEdit', index);//結束該行數據編輯，需要寫入到onSelect和onSelectAll中。

2.通過js和html共同完成上述功能

(1)html代碼

<table>

data-options="iconCls:'icon-edit'"

toolbar="#yhxtb"fit="true" showFooter="true">

<thead>

主鍵

本方單據號

本方單據類型

對方單據號

對方單據類型

核銷金額

應核銷金額

總核銷金額

未核銷金額

核銷金額調整

/<thead>

/<table>

(2)js代碼

$(function(){

$('#yhxdg').datagrid({

//添加單擊事件，

onClickCell: function(index,field,value){

if(field == 'HXJETZ'){

$(this).datagrid('beginEdit', index);

var ed = $(this).datagrid('getEditor', {index:index,field:'HXJETZ'});

$(ed.target).focus();

}else{

$(this).datagrid('endEdit', index);

}

},

//核銷明細選擇事件

onCheck:function (index,row){

$(this).datagrid('endEdit',index);

var rows = $('#yhxdg').datagrid('getFooterRows');

//alert(row.HXJETZ);

var row_HXJETZ = 0;

var foot_row = rows[0];

if(row.HXJETZ != ""){

row_HXJETZ = row.HXJETZ;

}

rows[0]['YHXJE'] = (parseFloat(row.YHXJE)+parseFloat(rows[0].YHXJE)).toFixed(2);

rows[0]['HXJE'] = (parseFloat(row.HXJE)+parseFloat(rows[0].HXJE)).toFixed(2);

rows[0]['ZHXJE'] = (parseFloat(row.ZHXJE)+parseFloat(rows[0].ZHXJE)).toFixed(2);

rows[0]['ZWHXJE'] = (parseFloat(row.ZWHXJE)+parseFloat(rows[0].ZWHXJE)).toFixed(2);

rows[0]['HXJETZ'] = (parseFloat(row_HXJETZ)+parseFloat(rows[0].HXJETZ)).toFixed(2);

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

},

onUncheck:function (index,row){

var rows = $('#yhxdg').datagrid('getFooterRows');

//alert(row.HXJETZ);

var row_HXJETZ = 0;

var foot_row = rows[0];

if(row.HXJETZ != ""){

row_HXJETZ = row.HXJETZ;

}

rows[0]['YHXJE'] = (parseFloat(rows[0].YHXJE) - parseFloat(row.YHXJE)).toFixed(2);

rows[0]['HXJE'] = (parseFloat(rows[0].HXJE) - parseFloat(row.HXJE)).toFixed(2);

rows[0]['ZHXJE'] = (parseFloat(rows[0].ZHXJE) - parseFloat(row.ZHXJE)).toFixed(2);

rows[0]['ZWHXJE'] = (parseFloat(rows[0].ZWHXJE) - parseFloat(row.ZWHXJE)).toFixed(2);

rows[0]['HXJETZ'] = (parseFloat(rows[0].HXJETZ) - parseFloat(row_HXJETZ)).toFixed(2);

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

},

onCheckAll:function (rows){

var foot_YHXJE = 0;

var foot_HXJE = 0;

var foot_ZHXJE = 0;

var foot_ZWHXJE = 0;

var foot_HXJETZ = 0;

for(var i = 0;i < rows.length;i++){

var HXJETZ = 0;

if(rows[i].HXJETZ != ""){

HXJETZ = rows[i].HXJETZ;

}

$(this).datagrid('endEdit',i);

foot_YHXJE = (parseFloat(foot_YHXJE) + parseFloat(rows[i].YHXJE)).toFixed(2);

foot_HXJE = (parseFloat(foot_HXJE) + parseFloat(rows[i].HXJE)).toFixed(2);

foot_ZHXJE = (parseFloat(foot_ZHXJE) + parseFloat(rows[i].ZHXJE)).toFixed(2);

foot_ZWHXJE = (parseFloat(foot_ZWHXJE) + parseFloat(rows[i].ZWHXJE)).toFixed(2);

foot_HXJETZ = (parseFloat(foot_HXJETZ) + parseFloat(HXJETZ)).toFixed(2);

}

var foot_rows = $('#yhxdg').datagrid('getFooterRows');

foot_rows[0]['YHXJE'] = foot_YHXJE;

foot_rows[0]['HXJE'] = foot_HXJE;

foot_rows[0]['ZHXJE'] = foot_ZHXJE;

foot_rows[0]['ZWHXJE'] = foot_ZWHXJE;

foot_rows[0]['HXJETZ'] = foot_HXJETZ;

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

},

onUncheckAll:function (rows){

var foot_rows = $('#yhxdg').datagrid('getFooterRows');

foot_rows[0]['YHXJE'] = "0";

foot_rows[0]['HXJE'] = "0";

foot_rows[0]['ZHXJE'] = "0";

foot_rows[0]['ZWHXJE'] = "0";

foot_rows[0]['HXJETZ'] = "0";

//rows[0]['salary'] = 60000;

$('#yhxdg').datagrid('reloadFooter');

}

});

})

功能和主要實現代碼如上。

前端相關文章鏈接：

Oracle相關文章鏈接

MySQL相關文章鏈接