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

leimin12

于 2018-03-10 23:00:23 发布

7927

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

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

版权

像下图这样的效果

我这里是在外部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('消息', data);
        }
    });
}

这个editor是要写的这个就是我要可以编辑的字段输入的类型是文本的

记得加上下面这些代码加在外面即可这些代码是单纯的改变前端的数据想要改变后台的数据就

是通过onAfterEdit这个事件进行的！

$.extend($.fn.datagrid.methods, {
    editCell : function(jq, param) {
        return jq.each(function() {
            var opts = $(this).datagrid('options');
            var fields = $(this).datagrid('getColumnFields', true).concat(
                $(this).datagrid('getColumnFields'));
            for ( var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            $(this).datagrid('beginEdit', param.index);
            for ( var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
            }
        });
    }
});
var editIndex = undefined;
//结束编辑
function endEditing() {
    if (editIndex == undefined) {
        return true
    }
    if ($('#datagrid的id名').datagrid('validateRow', editIndex)) {
        $('#datagrid的id名').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}

是从这篇文章受到启发之前找了很多资料都没试出来结合大神的分享和api弄出来的！

http://blog.csdn.net/itmyhome1990/article/details/50847270