一、ueditor子表控件
成都創(chuàng)新互聯(lián)公司科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供中國電信云錦天府，高防主機(jī)，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。
如下圖：
編輯器中其html代碼如下：
產(chǎn)品信息
添加
產(chǎn)品型號
產(chǎn)品料號
數(shù)量
單價(jià)
總價(jià)
|
|
|
|
|
合計(jì)金額
示例中的子表最后一列為合計(jì)列，每一列其合計(jì)=單價(jià)*數(shù)量，金額總計(jì)=各行合計(jì)之和；
頁面效果展示及html代碼如下
html
js代碼如下：
function bindTableChange(){
$("input[name='s:cpxx:cpsl']," +
"input[name='s:cpxx:cpdj']").bind('click change blur', function(){
//計(jì)算金額事件
calcSubTableMoney(this);
});
}
function calcSubTableMoney(self){
var blocktable = $(self).parent().parent().parent();
var itdj = $.trim($("input[name='s:cpxx:cpdj']", $(blocktable)).val());//IT單價(jià)
var sl = $.trim($("input[name='s:cpxx:cpsl']", $(blocktable)).val());//數(shù)量
if($.isNumeric(itdj)&&$.isNumeric(sl)){
var dxhj=itdj*sl;
dxhj=parseFloat(dxhj).toFixed(2);
$("input[name='s:cpxx:cpzj']", $(blocktable)).val(dxhj);
sumHj();
}
}
//匯總合計(jì)
function sumHj(){
var zhj=0;
var dxhjArray= document.getElementsByName("s:cpxx:cpzj");
for(var i=0;i為單價(jià)和數(shù)量兩個(gè)input均添加chang\blur\click事件，事件觸發(fā)后會更新合計(jì)和總計(jì)值；
$后有兩個(gè)參數(shù)，第一個(gè)為操作對象，第二個(gè)定義操作對象所在的范圍；由html可以看出單價(jià)或數(shù)量的parent.parent.parent即為tr，這樣就限定了按行計(jì)算；
parseFloat和toFixed為js的兩個(gè)函數(shù)，分別為轉(zhuǎn)換為float和四舍五入小數(shù)點(diǎn)后兩位；
isNumeric和trim為jQuery的兩個(gè)函數(shù)，分別為判斷是否為數(shù)字和去掉空格；
二、擴(kuò)展和優(yōu)化
由于子表控件支持點(diǎn)擊添加行，而在點(diǎn)擊添加后由于新增的input并未注冊事件，故無法使用算數(shù)計(jì)算合計(jì)和總計(jì)。我們采用一種為子表”添加“按鈕添加exefunc，為新增行input增加注冊事件，代碼如下
function bindExtFunction(){
$(".toolBar").attr("extfunc", "toolbarExtFunction");
}
/** 工具條擴(kuò)展方法 */
function toolbarExtFunction(){
//子表序列號
//calcTableSerino();
//子表下拉框、輸入框事件綁定
bindTableChange();
} toolBar為添加按鈕的父對象，根據(jù)JQuery的傳播機(jī)制，事件的注冊會以捕獲機(jī)制由父及子，再以冒泡機(jī)制以子及父，所以點(diǎn)擊添加按鈕后，會先運(yùn)行父對象的相應(yīng)函數(shù)，添加按鈕后，會再次運(yùn)行父對象從而為新增行注冊事件。
名稱欄目：ueditor子表控件綁定事件的擴(kuò)展優(yōu)化
當(dāng)前路徑：http://weahome.cn/article/pjshei.html
重慶分公司
重慶分公司
