我为项目创建了自己的数据网格(而不是使用ProcessMaker的Dynaform Datagrid)。
关于我的DataGrid代码的所有内容都有效,我只能从面板内容中设置我的processmaker变量的值。
这是我的面板组件的html和dynaform的jquery:
var frmt = {format: 'DD/MM/YYYY', viewMode: 'days'};
$('.dateP').datetimepicker( frmt );
// duplicate the row
$('.dupli').on( 'click', function(e){
if( $('.cpy').last().find('input').first().val() != ''
&& $('.cpy').last().find('input').last().val() != '' ){
var dup = $('.cpy').first().clone();
$('.table').append( dup );
$('.dateP').datetimepicker();
calc(); // on creation of new row do the calc
}
});
// remove the row
$(document).on( 'click', '.remove', function(el){
if( $('.cpy').length > 1 ){
$(this).parent().parent().remove();
calc();
}
});
// function for calc
function calc(){
var kp = $('.price').val(); // price
var sum = 0;
$('.km').each( function(ix){
sum += $(this).val() * kp;
});
$('.fin').val( sum );
}
// on input update the total
$(document).on( 'change input', '.km', calc );
$('.price').on( 'change input', calc );

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<div class="form-inline col-md-6">
<div class="form-group">
Price per Km: <input type='text' class="form-control price" value="0.36"/></div>
</div>
<table class="table table-striped">
<tr>
<th>Date:</th>
<th>From:</th>
<th>To:</th>
<th>Km Nr:</th>
<td><button type="submit" class="btn btn-default dupli">+</button></td>
</tr>
<tr class="cpy">
<td>
<div class='input-group dateP'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
<td>
<input type="text" class="form-control" >
</td>
<td>
<input type="text" class="form-control" >
</td>
<td>
<input type="number" class="form-control km" step="0.01" min="1">
</td>
<td>
<i class="fa fa-trash remove" aria-hidden="true"></i>
</td>
</tr>
</table>
<p class="form-inline">Total expenses: <input type='text' class="form-control fin"/></p>
&#13;
以下是我的Dynaform的屏幕截图: https://image.ibb.co/nApj3F/Capture.png
我需要什么? 我想参与输入&#34; Expenses Total&#34; (#ExpensesTotal)总和: &#34;停车+工具&#34; (#ExpenseParkTolls)+&#34;用餐&#34; (#ExpenseMeals)+&#34;其他&#34; (#ExpenseOther)+ .fin类值(来自面板)。
非常感谢。