Print Page - Treegrid calculation

I have a treegrid in which I have 2 numberbox editors. I would like to multiply the 2 values, when the values have changed, to create the total in a 3rd column, which I don't want to have an editor.

Code:

$('#tt').treegrid({
    url:'java servlet',
    idField:'id',
    treeField:'name',
    columns:[[
        {field:'name',title:'Person',width:180},
        {field:'hours',title:'Hours',width:60, editor:'numberbox', options:{onChange:{total = hours * amount}}},
        {field:'amount',title:'Amount',width:80, editor:'numberbox', options:{onChange:{total = hours * amount}}},
        {field:'total',title:'Total',width:80}
    ]]
});

The onChange code is what I'm unsure of. At the very least, if I were to need to set the total column to have an editor, I would just need to know how to set the field as readonly or disabled so that the user can't change the value.

Any help is appreciated.
Thank you.

Please try the code below, be sure to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip and include it to your page.

Code:

<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.patch.js"></script>
<script>
$(function(){
$('#tg').treegrid({
    onEndEdit: function(row){
        var hours = $(this).treegrid('getEditor', {id:row.id,field:'hours'});
        var amount = $(this).treegrid('getEditor', {id:row.id,field:'amount'});
        row.total = $(hours.target).numberbox('getValue')*$(amount.target).numberbox('getValue');
    }
})
});
</script>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: bduguay on February 06, 2015, 01:27:17 PM