位置:首页 » 文章/教程分享 » jquery-easyui中表格的行编辑功能

datagrid是有行编辑能力的,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。

看一个例子效果图:

$('#tt').datagrid({  
    title:'Editable DataGrid',  
    iconCls:'icon-edit',  
    width:660,  
    height:250,  
    singleSelect:true,  
    idField:'itemid',  
    url:'datagrid_data.json',  
    columns:[[  
        {field:'itemid',title:'Item ID',width:60},  
        {field:'productid',title:'Product',width:100,  
            formatter:function(value){  
                for(var i=0; iSave ';  
                    var c = 'Cancel';  
                    return s+c;  
                } else {  
                    var e = 'Edit ';  
                    var d = 'Delete';  
                    return e+d;  
                }  
            }  
        }  
    ]],  
    onBeforeEdit:function(index,row){  
        row.editing = true;  
        $('#tt').datagrid('refreshRow', index);  
    },  
    onAfterEdit:function(index,row){  
        row.editing = false;  
        $('#tt').datagrid('refreshRow', index);  
    },  
    onCancelEdit:function(index,row){  
        row.editing = false;  
        $('#tt').datagrid('refreshRow', index);  
    }  
});