easyUI edatagrid编辑表格数据

功能概述

效果图如下，使用easyUI的datagrid，点击行编辑该行数据，并在完成编辑时将数据上传到后端接口。

前端代码

html

<table id="dataGrid" title="" class="easyui-datagrid" singleSelect="true"
               pagination="true"
               rownumbers="true" fitColumns="true" pageSize=20
               url="../dataGrid"
               data-options="
                iconCls: 'icon-edit',
                onClickCell: onClickCell,
                ">
            <thead>
            <tr>
                <th data-options="field:'material_name',width:100,sortable:true">物资名称</th>
                <th data-options="field:'unit_name',width:100,sortable:true">计量单位</th>
                <th data-options="field:'amount',width:100,sortable:true,editor:{type:'numberbox'}" >采购数量</th>
                <th data-options="field:'unit_price',width:100,sortable:true,editor:{type:'numberbox',options:{precision:2}}">单价</th>
                <th data-options="field:'total_price',width:100,sortable:true">总价</th>
                <th data-options="field:'pre_arrival_date_str',width:100,sortable:true,editor:'datebox'">预计到货日期</th>
                <th data-options="field:'purchase_status',width:100,sortable:true,formatter:formatPurchaseStatus,editor:{type:'checkbox',options:{on:'2',off:'1'}}">是否完全采购</th>
                <th data-options="field:'remarks',width:100,sortable:true,editor:'text'">备注</th>
            </tr>
            </thead>
        </table>

editor 属性值类型string,object。 指明编辑类型。当字符串指明编辑类型的时候，对象包含2个属性：type和options
type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
options：对象，object, 该编辑器属性对应于编辑类型。

js

需要引用easyui的扩展组件edatagrid,点击查看文档，文档最下方下载jquery-easyui-edatagrid.zip里面包含jquery.edatagrid.js

<script type="text/javascript" src="../jquery.edatagrid.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
        initEditDataGrid();
    });

    function initEditDataGrid(){
        $('#dataGrid').edatagrid({
            onDblClickRow:function(){		//双击行时触发 结束编辑
                endEditing();
            },
            onSave:function (index,row) {	//当行上的编辑操作完成时触发 保存改动的数据
                var rows = $('#dataGrid').datagrid('getChanges');
                if(rows.length>0){
                    saveInfoList();
                }
            }
        });
    }

    var editIndex = undefined;		//当前正在编辑的行索引值
    /**关闭正在编辑行的编辑状态*/ 
    function endEditing(){			
        if (editIndex == undefined){return true}
        if ($('#dataGrid').datagrid('validateRow', editIndex)){		
            $('#dataGrid').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

	/**单击单元格时 开启当前行编辑状态 关闭其他行编辑状态*/
    function onClickCell(index, field){	
        if (editIndex != index){
            if (endEditing()){
                $('#dataGrid').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
                var ed = $('#dataGrid').datagrid('getEditor', {index:index,field:field});
                if (ed){
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
                editIndex = index;
            } else {
                setTimeout(function(){
                    $('#dataGrid').datagrid('selectRow', editIndex);
                },0);
            }
        }
    }

	/**提交所有从加载或者上一次调用acceptChanges函数后更改的数据。
		通俗的讲就是调用之后，改变了的数据状态变为未改变
		如果先执行accept()紧接着执行getChanges()获取到的数据rows就会为[]*/
    function accept(){
        if (endEditing()){
            var rows = $('#dataGrid').datagrid('acceptChanges');
        }
    }
   	/**获取改变的行*/
    function getChanges(){
        var rows = $('#dataGrid').datagrid('getChanges');
        alert(rows.length+' rows are changed!');
    }

	function saveInfoList() {
        var rows = $('#dataGrid').datagrid('getChanges');
        var data = {
            'id':order_id
        };
        if(rows.length > 0){
            data.info_list = rows;
        }
        var dataJson = JSON.stringify(data)
        console.log(data);
        $.ajax({
            url: '/updateOrderBatch',		//自己的后端接口地址
            type: 'POST',
            data:dataJson,
            dataType: 'json',				
            contentType:'application/json',
            success: function(result){
                if(result.success){			//修改成功执行自己的业务逻辑
                    accept();				//提交更改的数据,也就是另数据都变为未改变的状态
                    alert('修改成功')
                }else{
                    alert('修改异常')
                }
            }
        });
    }
</script>

后端接口代码

/**controller*/
    @RequestMapping("/updateOrderBatch")
    @ResponseBody
    public Json updateOrderBatch(@RequestBody PurchaseOrderDTO dto) throws Throwable{
        Json json = new Json();
        boolean flag = false;
        try{
            service.updateOrderBatch(dto);
            flag = true;
        }catch (Exception e) {
            e.printStackTrace();
            json.setSuccess(flag);
            json.setMsg(e.getMessage());
            return json;
        }
        json.setSuccess(flag);
        json.setMsg(flag ? "修改成功" : "修改失败");
        return json;
    }

/**service*/
    @Transactional
    public void updateOrderBatch(PurchaseOrderDTO dto) throws Exception{
        PurchaseOrderDO record = this.getById(dto.getId());
        if (null == record){
            throw new FailedException("未找到相关记录");
        }
      
        List<PurchaseOrderinfoDTO> infoList = dto.getInfoList();
        if(null!=infoList && infoList.size()>0){
            for(PurchaseOrderinfoDTO info : infoList){
                orderinfoService.updateOrderinfo(info);		//updateOrderinfo()是修改一条数据的方法，需根据自己业务逻辑，此处省略
            }
        }
    }


@Data
public class PurchaseOrderDTO {
	private Integer id;
    private List<PurchaseOrderinfoDTO> infoList;
}