EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: dies_felices on August 11, 2015, 09:38:46 AM



Title: cell-editing: how to get the new value, field and key value [Resolved]
Post by: dies_felices on August 11, 2015, 09:38:46 AM
Hi,

My datagrid is formed in the manner as below.  Using the cell editing extension I'm trying to get the new values of changed cells, their field names and the primary key value.  The primary key is provided by the get-table.php but is not displayed in the datagrid.


Code:
    var dgrid = $('#table');
    dgrid.datagrid({
        title: 'Datagrid',
        singleSelect: true,
        width: '80%',
        url: get-table.php,
        columns:[[
            {field:'itemid',title:'Item ID',width:'15%',
                editor:{
                    type:'combobox',
                    options:{
                        valueField:'Vol',
                        textField:'Vol',
                        data: items,
                        required: true
                    }
                }
            },
            {field:'productid',title:'Product',width:'15%',align:'center',editor:'text'},
            {field:'listprice',title:'ListPrice',width:'15%',align:'center',editor:'numberbox'}
        ]]
    });

 dgrid.datagrid('enableCellEditing').datagrid('gotoCell', {
                index: 0,
                field: 'productid'
            });
      }


Title: Re: cell-editing: how to get the new value, field and key value
Post by: dies_felices on August 12, 2015, 01:09:23 PM
Hi,

I've managed to cobble together a solution which meets my needs.

Code:

// var dgdata is defined outside of this code block and represents all the data in
// the datagrid.  For more details see: http://www.jeasyui.com/forum/index.php?topic=5124.0

// Set up a variable to hold editable state
var scCell = function(){
this.index
this.field
this.value
}

//create the editable state variable
var Clickc = new scCell

dgrid.datagrid({onCellEdit:function(index,field,value){
            var ed = dgrid.datagrid('getEditor', {index:index,field:field});
            if (ed){
              Clickc.index = index; // get the row that was clicked

            Clickc.field = field; // get the field which was clicked

            Clickc.value = $(ed.target).val();  //Get cell current value
            }
      },
      onEndEdit:function(index){
      var ed = dgrid.datagrid('getEditor', {index:index,field:Clickc.field});
            if (ed){
              if (typeof dgdata.rows[index].pkey === "undefined") {alert('TODO Insert PHP Needed!'),dgrid.datagrid('reload')} else {alert(dgdata.rows[index].pkey);}
            }
}
});

The index variable can be used in conjunction with the pkey field to get the row primary key.

The test (typeof dgdata.rows[index].s1_key === "undefined") is used to determine when a new has been added.  Then the insert function must be called and the datagrid reloaded.

Any feedback would be more than welcome.  I'm sure there must be a better way to do this.

Thanks.