EasyUI DataGrid 双击编辑单元格，保存并且后台数据改变

最新推荐文章于 2022-08-03 10:22:41 发布

leimin12

最新推荐文章于 2022-08-03 10:22:41 发布

阅读量8.5k

点赞数 1

文章标签： easyui datagrid 单元格的编辑 editor

本文链接：https://blog.csdn.net/leimin12/article/details/79512661

版权

本文介绍了如何实现EasyUI DataGrid中单元格的双击编辑功能，通过设置editor实现文本输入，并利用onAfterEdit事件保存编辑内容，从而更新后台数据。参考了相关博客文章，结合API完成此功能。

摘要由CSDN通过智能技术生成

像下图这样的效果

我这里是在外部js实现的datagrid的效果

datagrid里面的列

columns: [[{
    field: 'fieId1',
    title: '展示的文本1',
    width: '20%'
}, {
    field: 'fieId2’,
    title: '展示的文本2',
    width: '80%',
    editor:'text',
}]],onDblClickCell:function (index, field,value) {
    if (endEditing()) {
        $('#datagrid的id名').datagrid('selectRow', index).datagrid('editCell', {
            index : index,
            field : field
        });
        editIndex = index;
    }
},onAfterEdit:function (index, row, changes) {
    $.ajax({
        url : '要改变后台数据的controller路径?fieId1='+row.属性1,
        data:{fieId2:row.fieId}, //额外的参数
        dataType: "text",//响应结果为文本
        success:function (data) {
            $.messager.alert(