启用DataGrid行内编辑器

最新推荐文章于 2021-12-08 14:42:10 发布

最新推荐文章于 2021-12-08 14:42:10 发布 · 168 阅读

文章标签：

#javascript #ViewUI

本文将引导您通过EasyUI库创建DataGrid，并展示如何集成内联编辑功能，使用户能够直接在表格中添加、更新和删除数据行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@author YHC

可编辑的功能是最近添加到datagrid的,它可以使用户添加一个新行到datagrid,用户也可以更新一个或多个行.

这个教程向你展示如何创建一个datagrid 和内联编辑器.

查看 Demo

创建 DataGrid

$(function(){  
    $('#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; i<products.length; i++){  
                        if (products[i].productid == value) return products[i].name;  
                    }  
                    return value;  
                },  
                editor:{  
                    type:'combobox',  
                    options:{  
                        valueField:'productid',  
                        textField:'name',  
                        data:products,  
                        required:true  
                    }  
                }  
            },  
            {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},  
            {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},  
            {field:'attr1',title:'Attribute',width:150,editor:'text'},  
            {field:'status',title:'Status',width:50,align:'center',  
                editor:{  
                    type:'checkbox',  
                    options:{  
                        on: 'P',  
                        off: ''  
                    }  
                }  
            },  
            {field:'action',title:'Action',width:70,align:'center',  
                formatter:function(value,row,index){  
                    if (row.editing){  
                        var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';  
                        var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';  
                        return s+c;  
                    } else {  
                        var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';  
                        var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';  
                        return e+d;  
                    }  
                }  
            }  
        ]],  
        onBeforeEdit:function(index,row){  
            row.editing = true;  
            updateActions();  
        },  
        onAfterEdit:function(index,row){  
            row.editing = false;  
            updateActions();  
        },  
        onCancelEdit:function(index,row){  
            row.editing = false;  
            updateActions();  
        }  
    });  
});  
function updateActions(){  
    var rowcount = $('#tt').datagrid('getRows').length;  
    for(var i=0; i<rowcount; i++){  
        $('#tt').datagrid('updateRow',{  
            index:i,  
            row:{action:''}  
        });  
    }  
}

启用编辑在 datagrid,你应该添加一个editor 属性到列中,editor 告诉datagrid 如何编辑字段和如何保存字段值,正如你所建议的我们定义的三个editor:text,combobox and checkbox.

function editrow(index){  
    $('#tt').datagrid('beginEdit', index);  
}  
function deleterow(index){  
    $.messager.confirm('Confirm','Are you sure?',function(r){  
        if (r){  
            $('#tt').datagrid('deleteRow', index);  
        }  
    });  
}  
function saverow(index){  
    $('#tt').datagrid('endEdit', index);  
}  
function cancelrow(index){  
    $('#tt').datagrid('cancelEdit', index);  
}