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

像下图这样的效果

我这里是在外部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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

leimin12

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值