最终效果图:
首先我们需要修改一下主从结构的源码dwz.database.js,如下:
function tdHtml(field){ var html='',suffix=''; if(field.name.endsWith("[#index#]"))suffix="[#index#]"; else if(field.name.endsWith("[]"))suffix="[]"; var suffixFrag=suffix?' suffix="'+suffix+'" ':''; switch(field.type){ case 'del': html='<a href="#" onclick="calculate(this, 1);" class="btnDel '+field.fieldClass+'">刪除</a>'; break; case 'lookup': var suggestFrag=''; if(field.suggestFields){ suggestFrag='autocomplete="off" lookupGroup="'+field.lookupGroup+'"'+suffixFrag+' suggestUrl="'+field.suggestUrl+'" suggestFields="'+field.suggestFields+'"'+' postField="'+field.postField+'"';} html='<input type="hidden" name="'+field.lookupGroup+'.'+field.lookupPk+suffix+'"/>'+'<input type="text" name="'+field.name+'"'+suggestFrag+' lookupPk="'+field.lookupPk+'" size="'+field.size+'" class="'+field.fieldClass+'" '+field.readOnly+' />'+'<a class="btnLook" href="'+field.lookupUrl+'" lookupGroup="'+field.lookupGroup+'" '+suggestFrag+' lookupPk="'+field.lookupPk+'" title="查找帶回">查找?回</a>'; break; case 'attach': html='<input type="hidden" name="'+field.lookupGroup+'.'+field.lookupPk+suffix+'"/>'+'<input type="text" name="'+field.name+'" size="'+field.size+'" class="'+field.fieldClass+'" '+field.readOnly+' />'+'<a class="btnAttach" href="'+field.lookupUrl+'" lookupGroup="'+field.lookupGroup+'" '+suggestFrag+' lookupPk="'+field.lookupPk+'" width="560" height="300" title="查找?回">查找?回</a>'; break; case 'enum': $.ajax({ type:"POST",dataType:"html",async:false, url:field.enumUrl, data:{inputName:field.name}, success:function(response){ html=response;}}); break; case 'date': html='<input type="text" name="'+field.name+'" value="'+field.defaultVal+'" class="date '+field.fieldClass+'" format="'+field.patternDate+'" size="'+field.size+'" '+field.readOnly+' />'+'<a class="inputDateButton" href="javascript:void(0)">??</a>'; break; case 'lab': html='<label>' + field.defaultVal + '</label>'; break; case 'calculate': html = '<input type="text" name="' + field.name + '" value="' + field.defaultVal + '" size="' + field.size + '" onkeyup="calculate(this, 0);" class="' + field.fieldClass + '" '+field.readOnly+' />'; break; default: html='<input type="text" name="'+field.name+'" value="'+field.defaultVal+'" size="'+field.size+'" class="'+field.fieldClass+'" '+field.readOnly+' />'; break;} return '<td nowrap="nowrap">'+html+'</td>'; }
上面增加了一个calculate的文本类型,它加入onkeyup事件。
以下为Html部分代码:
<script type="text/javascript"> <!-- var total_amount = $("input[name=total_amount]"); var trade_amount = $("input[name=trade_amount]"); var odd_amount = $("input[name=odd_amount]"); var total_nums = $("input[name=total_nums]"); $(function(){ // 初始化應收金額和實收金額 total_amount.val((0).toFixed(2)); trade_amount.val((0).toFixed(2)); total_nums.val(0); // 扣除零頭 odd_amount.keyup(function(){ trade_amount.val((total_amount.val() - $(this).val()).toFixed(2)); }); }); function calculate(t, del){ var tbody = $(t).parents('tbody'); var total = 0; var totalnums = 0; var fix = 0; var fixnums=0;// 刪除的話應該忽略本行 if (del == 1){ //alert(0); $(t).parents("tr:first").each(function(){ var orgCount = 0; var orgPrice = 0; var orgDiscount = 1; var orgTotal = 0; $(this).find('input').each(function(){ if (this.name == 'items.orgCount[]') orgCount = this.value == '' ? 0 : this.value; if (this.name == 'items.orgPrice[]') orgPrice = this.value == '' ? 0 : this.value; if (this.name == 'items.orgDiscount[]') orgDiscount = this.value == '' ? 1 : (1 - this.value/100); if (this.name == 'items.orgTotal[]'){ orgTotal = orgCount*orgPrice*orgDiscount; if (orgTotal == 0){ this.value = ''; } else { this.value = orgTotal.toFixed(2); } } }); fix = orgTotal; fixnums =orgCount; }); } $(tbody).find('tr').each(function(){ var orgCount = 0; var orgPrice = 0; var orgDiscount = 1; var orgTotal = 0; $(this).find('input').each(function(){ if (this.name == 'items.orgCount[]') orgCount = this.value == '' ? 0 : 1*this.value; if (this.name == 'items.orgPrice[]') orgPrice = this.value == '' ? 0 : this.value; if (this.name == 'items.orgDiscount[]') orgDiscount = this.value == '' ? 1 : (1 - this.value/100); if (this.name == 'items.orgTotal[]'){ orgTotal = orgCount*orgPrice*orgDiscount; if (orgTotal == 0){ this.value = ''; } else { this.value = orgTotal.toFixed(2); } } }); total += orgTotal; totalnums +=orgCount; }); if (fix != 0){ total -= fix; totalnums -= fixnums; } total_nums.val(totalnums); total_amount.val(total.toFixed(2)); trade_amount.val((total - odd_amount.val()).toFixed(2)); } //--> </script> <h2 class="contentTitle">进货单(JH)</h2> <form class="pageForm required-validate" action="__URL__/addOrders/navTabId/__MODULE__" method="post" onsubmit="return validateCallback(this, dialogAjaxDone)"> <div class="pageContent"> <div class="pageFormContent" layoutH="97"> <fieldset> <table style="white-space: nowrap;"> <tr> <td>单据编号:</td> <td><input class="required" name="ordernumber" readonly="true" size="30" type="text" value="{$newCode}" /></td> <td>单据日期:</td> <td><input class="date required" name="ordertime" type="text" value="{$dtime}" /><a class="inputDateButton" href="javascript:;">选择</a></td> </tr> <tr> <td>供货单位:</td> <td> <input id="sendName" name="sendName.id" value="" type="hidden"/> <input class="required" name="sendName.orgName" type="text" postField="keyword" suggestFields="id" size="50" readonly="true" /> <a class="btnLook" href="__APP__/Public/ckBackContacts/tpy/2" lookupGroup="sendName" width="1000" height="450">查找带回</a> </td> <td>经 办 人:</td> <td> <input id="orderUser" name="orderUser.id" value="" type="hidden"/> <input class="required" name="orderUser.orgName" type="text" postField="keyword" suggestFields="id" readonly="true" /> <a class="btnLook" href="__APP__/Public/ckBackUser/" lookupGroup="orderUser">查找带回</a> </td> </tr> <tr> <td>收货仓库:</td> <td> <input id="warehouse" name="warehouse.id" value="" type="hidden"/> <input class="required" name="warehouse.orgName" type="text" postField="keyword" suggestFields="id" size="30" readonly="true" /> <a class="btnLook" href="__APP__/Public/ckBackWarehouse/" lookupGroup="warehouse">查找带回</a> </td> <td>發票號碼:</td> <td><input name="invoices" size="30" type="text" /></td> </tr> <tr> <td>单据摘要:</td> <td colspan="3"><input name="remarks" size="120" type="text" /></td> </tr> </table> </fieldset> <fieldset> <table class="list nowrap itemDetail" addButton="添加商品行數" width="100%"> <thead> <tr> <th type="text" name="items.proid[]" fieldClass="readonly" readOnly size="2">編 號</th> <th type="lookup" name="items.partnumber[]" lookupGroup="items" lookupUrl="__APP__/Public/ckBackProducts/flag/JH" suggestFields="partnumber" size="12" fieldClass="required">料 号</th> <th type="text" name="items.prodname[]" fieldClass="readonly" size="22" readOnly>名 称</th> <th type="text" name="items.prodsize[]" fieldClass="readonly" readOnly>規 格</th> <th type="text" name="items.partmodel[]" fieldClass="readonly" readOnly>型 号</th> <th type="text" name="items.pmaterial[]" fieldClass="readonly" readOnly>材 质</th> <th type="text" name="items.unit[]" fieldClass="readonly" readOnly size="2">單 位</th> <th type="calculate" name="items.orgCount[]" fieldClass="required" size="4">數 量</th> <th type="calculate" name="items.orgPrice[]" size="5">单 价(¥)</th> <th type="calculate" name="items.orgDiscount[]" size="2">折 扣(%)</th> <th type="text" name="items.orgTotal[]" size="8" readOnly>金 额(¥)</th> <th type="text" name="items.orgMark[]" size="15">备 注</th> <th onclick="calculate(this,1)" type="del" fieldClass="refreshAmount">删行</th> </tr> </thead> <tbody></tbody> </table> </fieldset> </div> <div class="formBar"> <label style="float:left">累计数量:<input name="total_nums" size="3" type="text" readonly="readonly" /></label> <label style="float:left"> 折扣金额:<input name="odd_amount" size="5" type="text" /></label> <label style="float:left"> 应付金额:<input name="total_amount" size="8" type="text" readonly="readonly" /></label> <label style="float:left"> 实付金额:<input name="trade_amount" size="8" type="text" /></label> <label style="float:left"> 制单人:<input name="createMan" value="{$Think.session.loginUserName}" size="10" type="text" readonly="true" /></label> <label style="float: left;"> 入库:<input type="checkbox" id="goStock" name="goStock" value="1" checked="checked" /></label> <label style="float: left;"> 付款:<input type="checkbox" id="goFunds" name="goFunds" value="1" checked="checked" /></label> <label style="float:left"> 付款账户: <SELECT name="bankid"> <volist id="vu" name="listBank"> <option value="{$vu.id}">{$vu.bankname}</option> </volist> </SELECT> </label> <ul> <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交单据</button></div></div></li> <li><div class="button"><div class="buttonContent"><button class="close" type="button">关闭退出</button></div></div></li> </ul> </div> </div> </form>