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>
<script>
        function editRow(index) {
        alert('Editing:' + index);
    }
    
    function cancelRow(index) {
        alert('Cancelling: ' + index);
    }
    
    function actionRow(row, index) {
        var links = '';
        if (row.editing) {
            links += '<a href="#" onclick="alert(index);">cancel</a>';
        } else {
            links += '<a href="javascript:alert(index);">edit</a>';
        }
        return links;
    };
</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:'actions', 
                        formatter:function (value,row,index) { return actionRow(row, index)+'23'; }">Actions</th>
            <th data-options="field:'acPosta',width:100,  
                        formatter:function(value,row){  
                            return row.texta;  
                        }">Product</th>
            </tr>  
        </thead>  
    </table>

JavaScript

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