Easy ui Datagrid（下拉、复选、只输入数字、文本） 追加、删除、更改

    <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100,formatter:productFormatter,
                        editor:{
                            type:'combobox',
                            options:{
                                valueField:'productid',
                                textField:'name',
                                data:products,
                                required:true
                            }
                        }">Product</th>
                <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
                <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
                <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
            </tr>

$(function(){
            var lastIndex;
            $('#tt').datagrid({
                toolbar:[{
                    text:'append',
                    iconCls:'icon-add',
                    handler:function(){
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('appendRow',{
                            itemid:'',
                            productid:'',
                            listprice:'',
                            unitprice:'',
                            attr1:'',
                            status:'P'
                        });
                        lastIndex = $('#tt').datagrid('getRows').length-1;
                        $('#tt').datagrid('selectRow', lastIndex);
                        $('#tt').datagrid('beginEdit', lastIndex);
                    }
                },'-',{
                    text:'delete',
                    iconCls:'icon-remove',
                    handler:function(){
                        var row = $('#tt').datagrid('getSelected');
                        if (row){
                            var index = $('#tt').datagrid('getRowIndex', row);
                            $('#tt').datagrid('deleteRow', index);
                        }
                    }
                },'-',{
                    text:'GetChanges',
                    iconCls:'icon-search',
                    handler:function(){
                        var rows = $('#tt').datagrid('getChanges');
                        alert('changed rows: ' + rows.length + ' lines');
                    }
                }],
                onBeforeLoad:function(){
                    $(this).datagrid('rejectChanges');
                },
                onClickRow:function(rowIndex){
                    if (lastIndex != rowIndex){
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('beginEdit', rowIndex);
                    }
                    lastIndex = rowIndex;
                }
            });
        });