datagrid's editor can not align and auto fill the cell

Question

I use easyui implements inline edit of datagrid,dynamically add new rows and save back by one click. But when click a row and starting to edit, the editor in the cell can not align to it's column and can not auto fill the whole cell. So it looks a mess.

The essential code is below:

//add numberspinner into datagrid.
$.extend($.fn.datagrid.defaults.editors, {
numberspinner: {
    init: function(container, options){
        var input = $('<input type="text">').appendTo(container);
        return input.numberspinner(options);
    },
    destroy: function(target){
        $(target).numberspinner('destroy');
    },
    getValue: function(target){
        return $(target).numberspinner('getValue');
    },
    setValue: function(target, value){
        $(target).numberspinner('setValue',value);
    },
    resize: function(target, width){
        $(target).numberspinner('resize',width);
    }
},
empty:{
    init: function(container, options){
        return $('<div style="padding:0 4px"></div>').appendTo(container);
    },
    getValue: function(target){
        return $(target).html();
    },
    setValue: function(target, value){
        $(target).html(value);
    }
}
});

var editIndex = undefined;
$(function(){
$('#dg').datagrid({onClickRow:function(index,data){
    var row=$('#dg').datagrid('getSelected');
}});
$('#adddg').datagrid({
    columns: [[{
        field:'id',hidden:true
    },{
        field:'code',title:'代码',width:"50",hidden:true,
        editor:{type:'text'}
    },{
        field:'name',title:'所属线路',width:"100",
        editor:{
            type:'combobox',
            options:{
                valueField:'text',
                textField:'text',
                url:"<c:url value='/nnmis/view/zzjg/comboidLine.tg'/>",
                onSelect:function(item){
                    var ed = $('#adddg').datagrid('getEditor', {index:editIndex,field:'code'});
                    $(ed.target).val(item.id);
                }
            }
        }
    },{
        field:'seq',title:'线路中排序',width:"60",
        editor:{
            type:'text',
            min:0
        }
    },{
        field:'kmupstart',title:'上行公里开始',width:"70",
        editor:{
            type:'numberspinner',
            min:0
        }
    },{
        field:'kmupend',title:'上行公里结束',width:"70",
        editor:{
            type:'numberspinner',
            min:0
        }
    },{
        field:'kmdownstart',title:'下行公里开始',width:"70",
        editor:{
            type:'numberspinner',
            min:0
        }
    },{
        field:'kmdownend',title:'下行公里结束',width:"70",
        editor:{
            type:'numberspinner',
            min:0
        }
    }]],
    onClickRow:function(index,data){
        var row=$('#adddg').datagrid('getSelected');
        if(editIndex == undefined){
            $('#adddg').datagrid('beginEdit', index);
            editIndex = index;
        }else{
            $('#adddg').datagrid('endEdit', editIndex);
            $('#adddg').datagrid('beginEdit', index);
            editIndex = index;
        }
    },
    onBeforeEdit:function(index,row){
        row.editing = true;
        updateActions(index);
    },
    onAfterEdit:function(index,row){
        row.hadedit='1';
        row.editing = false;
        updateActions(index);
    },
    onCancelEdit:function(index,row){
        row.editing = false;
        updateActions(index);
    }
});
});
function updateActions(index){
$('#adddg').datagrid('updateRow',{
    index: index,
    row:{}
});
}

function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function addline(){
/*var dta = $('#adddg').datagrid('getData');
if(dta){
    if(dta.rows.length == 0){
        $('#adddg').datagrid('appendRow',{
            id:'',
            code:'',
            seq:'0',
            kmupstart:'0',
            kmupend:'0',
            kmdownstart:'0',
            kmdownend:'0'
        });
    }
}*/
$('#adddg').datagrid('appendRow',{
    id:'',
    code:'',
    seq:'0',
    kmupstart:'0',
    kmupend:'0',
    kmdownstart:'0',
    kmdownend:'0'
});
}

Answer 1

I had the same issue when I didn't wrapped the output with <html><body> tags. When I added <html><body> everything became OK.