JSFiddle - React, Tailwind, and code Playground

by vsiguero

HTML

<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
    <table id="dg" title="Row Editing in DataGrid" style="width:700px;height:300px"  
            data-options="  
                iconCls: 'icon-edit',  
                singleSelect: true ,
                toolbar:[{text:'add',handler:function(){$('#dg').edatagrid('addRow');}}]
            ">  
        <thead>  
            <tr>  
<th data-options="field:'acPosta',width:100,  
                        formatter:function(value,row){  
                            return row.texta;  
                        },  
                        editor:{  
                            type:'combobox',  
                            options:{  
                                valueField:'ida',  
                                textField:'texta',
                                data:[{'ida':'1','texta':'Maribor'},{'ida':'2','texta':'Kungota'},{'ida':'3','texta':'Celje'}],
                                onSelect:function(row){
                                    var index = $('#dg').edatagrid('options').editIndex;
                                    $('#dg').edatagrid('getRows')[index].texta = row.texta;
                                }
                            }  
                        }">Product</th>
            </tr>  
        </thead>  
    </table>

JavaScript

$('#dg').edatagrid();