效果图

获取初始表格数据

 // 查询销售订单号，获取订单商品信息及其他信息
    function search_sale_order() {
        var sale_order = $("#sale_order").val();
        if (!sale_order) {
            $.messager.show({
                title: '错误提示！',
                msg: "请输入销售订单号"
            });
            return;
        }
        $.ajax({
            type: "post",
            url: "{:U('Data/CancellingStocks/getSaleDataInfoByOrder')}",
            data: {order_number: sale_order, sign: 1},
            dataType: "json",
            success: function (res) {
                rowData = res.data['detail'];
                $("#channel").val(res.data[0].channel_name);
                $("#qudao_staff").val(res.data[0].channel_staff_name)
                $("#qudao_tel").val(res.data[0].channel_tel);

                // 将内容填充表
                $('#dg_mx').datagrid('loadData', rowData);
            }
        });
    }

UI展示

 $('#dg_mx').datagrid({
        columns: [[
            {field: 'product_name', title: '商品全称', width: 10000, align: 'center'},
            {field: 'is_unique_code', title: '商品类别', width: 10000, align: 'center'},
            {field: 'product_name_online', title: '荣耀商品名称', width: 10000, align: 'center'},
            {field: 'sn_code', title: '荣耀商品编码', width: 10000, align: 'center'},
            {field: 'num', title: '数量', width: 10000, align: 'center',},
            {field: 'price', title: '单价', width: 10000, align: 'center'},
            {field: 'total_price', title: '总价', width: 10000, align: 'center'},
            {field: 'operate', title: '操作', width: 10000, align: 'center', formatter: operateFormatter}
        ]],
        fitColumns: true,
        rownumbers: true,
        singleSelect: true,
        striped: true,
        onClickCell: updateGroups,
        loadMsg: '数据加载中,请稍后...'
    });

//事件：onClickCell 参数： rowIndex, field, value  注释：当用户单击一个单元格时触发 

点击单元格编辑列

 //双击编辑某单元格中的数据
    var oldRow = -1; 

    function updateGroups(index, field, value) {
        console.log('updateGroups',field,index,value);
        if ('num' == field) { //判断当前列是否是需要进行编辑的列
            var data = $('#dg_mx').datagrid('getData');//获取到表格数据
            if (data.total > 0) {
                if (oldRow != index && oldRow >= 0) {
                    var data = $('#dg_mx').datagrid('getData');//获取到表格数据
                    if (data.total > 0) {
                        var rowData = data.rows[oldRow];
                        var val = rowData.num;
                        $('#dg_mx').datagrid('updateRow', {
                            index: oldRow,
                            row: {
                                num: val
                            }
                        });
                    }
                }
                var rowData = data.rows[index];
                var val = rowData.num;
                var price_Reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/; //正则验证
                if (!price_Reg.test(val)) {
                    val = 0;
                }
                //更新行中的编辑列内容
                $('#dg_mx').datagrid('updateRow', {
                    index: index,
                    row: {
                        num: '<input type="text" placeholder="请输出数量" id="new_num_' + index + '"  value="' + val + '"  name="new_num" onchange="updateName(this)" />'
                    }
                });
                $("#new_num_" + index).focus();
                oldRow = index;
            }
        }
    }

离开时离开单元格中的数据

function updateName(obj) {
        var index = $(obj).parents('.datagrid-row').attr('datagrid-row-index'); //获取行数
        var data = $('#dg_mx').datagrid('getData');//获取到表格数据
        var rowData = data.rows[index];
        var new_num = $("#new_num_" + index).val();

        var price_Reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
        if (!price_Reg.test(new_num)) {
            $.messager.show({
                title: '错误提示！',
                msg: "金额只能为数字或两位有效小数的数字！"
            });
            $("#new_num_" + index).val("");
            return;
        }

        var total_price = rowData.price * new_num;
        console.log('updateGroups',total_price);
        total_price = parseFloat(total_price).toFixed(2);
        $('#dg_mx').datagrid('updateRow', {
            index: index,
            row: {
                num: new_num,
                total_price: total_price
            }
        });

    }

操作列新增操作按钮

 function operateFormatter(value, rowData, index) {
        var id = rowData.id;
        return '<a href="#" class="easyui-linkbutton btn" iconCls="icon-add" plain="true"  onclick="shanchu(this)">删除</a>';
    }