w.k*_*w.k 3 javascript forms jquery
我尝试构建项目的表单,我可以在其中放置不同的公式来计算某些字段.
主要问题:我想让公式双向工作,例如
price,表格应sum根据price(price*qty)计算.sum,表单应price根据sum(sum/ qty)计算项目.我找到了Calcx - 用于构建计算表单的强大而强大的jQuery插件,并根据我的需要修改了其中一个示例,但是没有想到有可能以某种方式让它像上面的描述中那样工作.
还有一些其他问题我找不到解决方案:
readonly: false应该是可编辑的.我的示例中的字段.sum仍然不可编辑.为什么？+和-按钮周围qty已场内,以增量/ DECR功能,但让他们正常工作,我不得不分离Calcx功能,并再次装即可.是否有更简单的方法来实现这一目标？ 免责声明我的问题的解决方案也可能涉及除Calcx之外的其他技术.也许某些插件或框架有更好的工具来满足我的需求.
对于历史记录,我也在这里添加了代码示例,但是使用它可能更适合查看JSfiddle
<!DOCTYPE html>
<html>
<head>
<title>testc calcx</title>
<meta charset=utf-8>
<meta name=description content="testime">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-calx-1.1.9.js"></script>
<style type="text/css">
.plusminus {
font-weight: bold;
font-family: monospace;
font-size: 1.3em;
border: 1px green solid;
padding: 0px 5px;
}
</style>
<script>
$(document).ready(function(){
$('#itemlist').calx();
$('.sum').calx({
readonly: false
});
$('.plusminus').click(
function () {
$('#itemlist').calx('detach');
var operation = $( this ).text();
var row = $( this ).attr('id').split('_').slice(1);
var qty = $( '#qty_' + row ).val();
if ( operation == '+' ) {
$( '#qty_' + row ).val( ++qty );
} else if ( operation == '-' ) {
$( '#qty_' + row ).val( --qty );
} else {
alert( "Something wrong! " + $( this ).attr('id') );
}
$('#itemlist').calx();
$('#itemlist').calx('refresh');
}
);
});
</script>
</head>
<body>
<form id="itemlist">
<input type="text" placeholder="Item" id="A1" size="20" value="HDD Baracuda Black 2TB" />
<span id="min_1" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="qty_1" value="1" size="2" data-format="0" />
<span id="plus_1" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="C1" size="5" data-format="$ 0,0[.]00" />
<input type="text" placeholder="Disc." id="D1" size="3" data-format="0[.]00 %" />
<input type="text" placeholder="Sum" id="E1" size="6" class="sum" data-formula="($qty_1*$C1)*(1-$D1)" data-format="$ 0,0[.]00" />
<br />
<input type="text" placeholder="Item" id="A2" size="20" value="Motherboard ASus XYZ" />
<span id="min_2" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="qty_2" value="1" size="2" data-format="0" />
<span id="plus_2" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="C2" size="5" data-format="$ 0,0[.]00" />
<input type="text" placeholder="Disc." id="D2" size="3" data-format="0[.]00 %" />
<input type="text" placeholder="Sum" id="E2" size="6" class="sum" data-formula="($qty_2*$C2)*(1-$D2)" data-format="$ 0,0[.]00" />
<br />
<input type="text" placeholder="Item" id="A3" size="20" value="Memory Kingston DDR3 4GB" />
<span id="min_3" class="plusminus">-</span>
<input type="text" placeholder="Qty" id="qty_3" value="1" size="2" data-format="0" />
<span id="plus_3" class="plusminus" >+</span>
<input type="text" placeholder="Price" id="C3" size="5" data-format="$ 0,0[.]00" />
<input type="text" placeholder="Disc." id="D3" size="3" data-format="0[.]00 %" />
<input type="text" placeholder="Sum" id="E3" size="6" class="sum" data-formula="($qty_3*$C3)*(1-$D3)" data-format="$ 0,0[.]00" />
<br />
<input type="text" placeholder="" id="total_1" data-formula="SUM($E1,$E3)" data-format="$ 0,0[.]00" />
</form>
</body>
</html>
我建议你使用库ractive.js.看看它的双向数据绑定是多么简单和自动:http://learn.ractivejs.org/two-way-binding/1/
<label>Enter your name: <input value='{{name}}'></label>
<p>Hello, {{name}}!</p>
所以你可以这样做:
<label>Price: <input value='{{price}}'></label>
<label>Quantity: <input value='{{quantity}}'></label>
<label>Sum: <input value='{{price * quantity}}'></label>
通过这种简单的方式,您可以使用{{price*quantity}}等表达式并保存大量代码.http://learn.ractivejs.org/expressions/2/
您可以在{{}}和事件之间添加js函数:
http://learn.ractivejs.org/event-proxies/1/
您可以在60秒内知道如何设置ractive:http://www.ractivejs.org/60-second-setup
并在它的互动教程中轻松学习:http://learn.ractivejs.org/hello-world/1/
编辑1:
我添加了这个jsfiddle作为例子.
| 归档时间： |
|
| 查看次数： |
1417 次 |
| 最近记录： |