JSFiddle - React, Tailwind, and code Playground

by Hilarius Doren

HTML

<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.css">
<button onClick="addRow()">AddRow</button>
<table id="tt"></table>

JavaScript

addRow = function() {
    var tab = $("#tt");
    tab.datagrid("insertRow", {index:0,row:{id:'',xx:''}})
        .datagrid("beginEdit", 0);
};
window.onload = function() {
    $("#tt").datagrid({
        title: "Inner Edit Combobox",
        width: 400,
        height: 150,
        columns: [[
            {field: "id", title: "ID", width: 100, editor: {
                type: "validatebox",
                options: {
                    validType: "length[1, 3]"
                }
            }},  
            {field: "xx", title: "xx", width: 200, editor: {
                type: "combobox",
                options: {
                    valueField: "xx",
                    data: [
                        {"xx": 1, text: "AAA", selected: true},
                        {"xx": 2, text: "BBB"},
                        {"xx": 3, text: "CCC"}
                    ],
                    onLoadSuccess: function(rows) {
                        /*
                        for(var i=0; i<rows.length; i++) {
                            if(rows[i].selected) {
                                $(this).combobox("setValue", rows[i].xx);
                                return;
                            }
                        } */
                        $(this).combobox("setValue",rows[-1].xx);
                       // return;
                    }
                }
            }}
        ]]
    });
}