1. html

    <div data-options="region:'center'">
      <div style="margin:10px 0">
        <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
    </div>
    <table id="tt" style="width: 100%; height: 90%;"></table>
    </div>
</div>

2. js

$(function() {
    $('#tt').datagrid({
        singleSelect : true,
        rownumbers : true,
        striped : true,
        pagination : true,// 分頁欄
        url : '../configController/listConfig.do',
        columns : [ [
        // {field:'name',title:'配置項名稱',width:150,editor:'text',align:
        // 'center',hidden : true},
        {
            field : 'cfgkey',
            hidden : true
        }, {
            field : 'name',
            title : '配置項名稱',
            width : 150,
            editor : 'text',
            align : 'center'
        }, {
            field : 'cfgvalue',
            title : '節點名稱',
            width : 200,
            align : 'right',
            editor : 'text',
            align : 'center'
        }, {
            field : 'remark',
            title : '備註 ',
            width : 150,
            editor : 'text',
            align : 'center'
        }, {
            field : 'action',
            title : '操作',
            width : 150,
            align : 'center',
            align : 'center',
            formatter : function(value, row, index) {
                if (row.editing) {
                    var s = '<a href="#" onclick="saverow(this)">儲存</a> ';
                    var c = '<a href="#" onclick="cancelrow(this)">取消</a>';
                    return s + c;
                } else {
                    var e = '<a href="#" onclick="editrow(this)">編輯</a> ';
                    var d = '<a href="#" onclick="deleterow(this)">刪除</a>';
                    return e + d;
                }
            }
        } ] ],
        onBeforeEdit : function(index, row) {
            row.editing = true;
            updateActions(index);
        },
        onAfterEdit : function(index, row) {
            row.editing = false;
            updateActions(index);
        },
        onCancelEdit : function(index, row) {
            row.editing = false;
            updateActions(index);
        }
    });
});
function updateActions(index) {
    $('#tt').datagrid('updateRow', {
        index : index,
        row : {}
    });
}
function getRowIndex(target) {
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
    $('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target) {
    $.messager.confirm('確認', '確認刪除嗎?', function(r) {
        var RowIndex = getRowIndex(target);
        if (r) {
            var selectedRow = $('#tt').datagrid('getSelected'); // 獲取選中行
            $.ajax({
                url : '../configController/deleteConfig.do?cfgkey='
                        + selectedRow.cfgkey,
                success : function(result) {
                    if (result) {
                        alert('刪除成功！');
                        $('#tt').datagrid('deleteRow', RowIndex);
                    } else {
                        alert('刪除失敗');
                    }
                }
            });
        }
    });
}
function saverow(target) {
    $('#tt').datagrid('endEdit', getRowIndex(target));
    var selectedRow = $('#tt').datagrid('getSelected');
    if(selectedRow.cfgkey==null||selectedRow.cfgkey==undefined){
        $.ajax({
            url : '../configController/addConfig.do?name='+ selectedRow.name+'&cfgvalue='
            +selectedRow.cfgvalue+'&remark='+selectedRow.remark,
            success : function(result) {
                if (result) {
                    alert("新增成功");
                    $('#tt').datagrid('saverow', RowIndex);
                }else{
                    alert("請重新輸入");
                }
            }
        });
    }else{
        $.ajax({
            url : '../configController/updataConfig.do?cfgkey='
                + selectedRow.cfgkey+'&name='+ selectedRow.name+'&cfgvalue='
                    +selectedRow.cfgvalue+'&remark='+selectedRow.remark,
            success : function(result) {
                if (result) {
                    alert("更新成功");
                    $('#tt').datagrid('saverow', RowIndex);
                }else{
                    alert("更新失敗");
                }
            }
                
        });
    }
}
function cancelrow(target) {
    $('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert() {
    var row = $('#tt').datagrid('getSelected');
    if (row) {
        var index = $('#tt').datagrid('getRowIndex', row);
    } else {
        index = 0;
    }
    $('#tt').datagrid('insertRow', {
        index : index,
        row : {
            status : 'P'
        }
    });
    $('#tt').datagrid('selectRow', index);
    $('#tt').datagrid('beginEdit', index);
}

3. controller
@Controller  
@RequestMapping("/configController")
public class ConfigController {
    @SuppressWarnings("unused")
    private static final Logger LOGGER =
            LoggerFactory.getLogger(ConfigController.class);
    @Autowired
    @Qualifier("configService")
    private ConfigServiceI configService;
    @RequestMapping("/admin")
    public String index(HttpServletRequest request) {
        return "ui/config/configList";
    }
    @RequestMapping("/addConfig")
    public void addConfig(DmsConfig config,
            HttpServletRequest request, HttpServletResponse response){
        
        String configKey = UUIDGenerator.generateUUID();
        config.setCfgkey(configKey);
        configService.insertConfig(config);
    }
    
    @RequestMapping("/listConfig")
    @ResponseBody
    public Map<String, Object> listConfig(HttpServletRequest request){
        List<DmsConfig> list = configService.find();
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("rows", list);
        result.put("total", list.size());
        return result;
    }
  // 刪除記錄
    @RequestMapping("/deleteConfig")
    @ResponseBody
    public void deleteConfig(String cfgkey,
            HttpServletRequest request, HttpServletResponse response){
        boolean result =false;
        int count= configService.deleteConfigByCfgkey(cfgkey);
        if(count>0){
            result =true;
        }
        try {
            response.getWriter().write(""+result);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
   
    @RequestMapping("/updataConfig")
    public void updataConfig(DmsConfig dmsConfig,
            HttpServletRequest request, HttpServletResponse response){
        configService.updataConfigByCfgkey(dmsConfig);
    }
    
}

4. service實現類

@Service("configService")
public class ConfigServiceImpl implements ConfigServiceI {

    @Resource
    private DmsConfigMapper dmsConfigMapper;

    public void insertConfig(DmsConfig dmsConfig) {
        validate(dmsConfig, false);
        // dmsConfig.setUserState(ConstantUtil.STATE.NORMAL.getState());
        dmsConfigMapper.insert(dmsConfig);
    }

    private void validate(DmsConfig dmsConfig, boolean b) {
        if (null == dmsConfig) {
            try {
                throw new Exception("dms==null");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

    }

    public List<DmsConfig> find() {
        return dmsConfigMapper.find();
    }

    public int deleteConfigByCfgkey(String cfgkey) {
        return dmsConfigMapper.deleteConfigByCfgkey(cfgkey);
    }
    
    public int updataConfigByCfgkey(DmsConfig dmsConfig){
        return dmsConfigMapper.updataConfigByCfgkey(dmsConfig);
    }
}

5. dao 
   public interface DmsConfigMapper {
    int deleteByPrimaryKey(String cfgkey);
    //新增配置資訊
    int insert(DmsConfig record);
    int insertSelective(DmsConfig record);
    DmsConfig selectByPrimaryKey(String cfgkey);
    int updateByPrimaryKeySelective(DmsConfig record);
    int updateByPrimaryKey(DmsConfig record);
    //遍歷配置資訊
    List<DmsConfig> find();
     //根據cfgkey刪除配置資訊
    int deleteConfigByCfgkey(String cfgkey);
    //修改更新配置資訊
    int updataConfigByCfgkey(DmsConfig dmsConfig);
}