今天工作用到了easyui行編輯，在這裡總結一下，不會的同學可以看看，順便吐槽一下，網上的很多部落格都是貼上複製的，內容很亂 ，而且看不懂，不知道這些貼上複製的懷的是什麼心，不但沒用，還影響別人搜尋。
呼籲大家在寫部落格的時候認真一些，別隻貼上複製，至少可以自己執行好了貼上自己的程式碼和一點感想，對別人用處很大的。

好了，正題開始——>

我用的是easyui 1.4

效果如下：
點選新增按鈕，在第二行的位置新增新行，點選單元格輸入內容，點儲存通過ajax提交。
修改則直接點選單元格修改，點儲存提交。

程式碼如下：
首先table還是平常的table，只不過要在需要編輯的列加上editor:'text'

我這裡只是編輯文字，所以是text，其他時間等型別請查api,
另外因為我觸發修改的方式是直接點選單元格，所以table要加上onClickCell屬性，然後重寫onClickCell方法。

$("#remark_dg").datagrid({
            url:'',
            columns:[[ 
                {field:'cb',checkbox:true,align:'center'},
                {field:'id',title:'編號',width:80,hidden:true},
                {field:'text'
 
,title:'內容',width:80,editor:'text'}
            ]],
            toolbar:'#remark_tb',  //表格選單
            fit:true,
            fitColumns:true,
            loadMsg:'載入中...', //載入提示
            rownumbers:true, //顯示行號列
            singleSelect:true,//是允許選擇一行
            onClickCell: onClickCell,
            queryParams:{   //在請求資料是傳送的額外引數，如果沒有則不用寫
 

            },
            onLoadSuccess:function(data){
            },
            rowStyler:function(index,row){
            }
        });

簡單說明下可編輯的實現方法：
首先通過beginEdit讓選中的行啟動編輯，儲存的時候，獲得選中的行，通過row取到編輯的資訊，使用ajax提交，提交完成，使用endEdit屬性結束行編輯。

 //可編輯行
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#remark_dg').datagrid('validateRow', editIndex)){
            $('#remark_dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field){
        if (editIndex != index){
            if (endEditing()){
                $('#remark_dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                var ed = $('#remark_dg').datagrid('getEditor', {index:index,field:field});
                ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                editIndex = index;
            } else {
                $('#remark_dg').datagrid('selectRow', editIndex);
            }
        }
    }
    function accept(){
        if (endEditing()){
            var row = $('#remark_dg').datagrid('getSelected');
            var text = row.text;
            var remarkid = row.id;
            var typeid = $("#typeid").val();
            $.ajax({
                url:"${ctx}/typeRemark/addTypeRemark.do",
                type:"post",
                dataType:"json",
                data:{
                    remarkid:remarkid,
                    text:text,
                    typeid:typeid
                },
                success:function(data){
                    if(data.status == "success"){
                        $.messager.show({
                            title : '提示',
                            msg : '操作成功'
                        });
                        $('#dg').datagrid('load', {});
                    }else{
                        $.messager.show({
                            title : '提示',
                            msg : '操作失敗，請聯絡管理員 ------'
                        });
                    }
                },
                error:function(){
                        $.messager.show({
                            title : '提示',
                            msg : '系統錯誤，請聯絡管理員------'
                        });
                }
            });
        }
    }
    function addRemark(){
         function addRemark(){
        if (editIndex != undefined){
            return ;
        }
        $('#remark_dg').datagrid('insertRow',{
            index: 1,   // 索引從0開始
            row: {
                text:''
            }
        });
        $('#remark_dg').datagrid('selectRow', 1);
        $('#remark_dg').datagrid('beginEdit', 1);
        var ed = $('#remark_dg').datagrid('getEditor', {index:1,field:'text'});
        $(ed.target).focus();
        editIndex = 1;
    }
    }

這裡有必要提一下，我的新增和修改方法用了一個方法accpet(),同時後臺也用一個方法處理的，有需要的可以借鑑一下：
表現層用的是spring mvc，持久成用的hibernate:

@RequestMapping(value = "/addTypeRemark.do",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,String> addTypeRemark(String text,String typeid,@RequestParam(value = "remarkid", required = false)Integer remarkid,HttpServletRequest request){
        Map<String,String>  map = new HashMap<String,String> ();
        System.out.println(typeid);
        try {
            BatchType batchType=batchTypeMag.find(Integer.parseInt(typeid));
            TypeRemark typeRemark = new TypeRemark();
            if(remarkid!=null){
                typeRemark = typeRemarkMag.find(remarkid);
            }
            typeRemark.setBatchType(batchType);
            typeRemark.setText(text);
            typeRemarkMag.saveOrUpdate(typeRemark);
            map.put("status","success");
        } catch (Exception e) {
            e.printStackTrace();
            map.put("status","fail");
        }
        return map;
    }

也就是說，新增的時候，沒有這條記錄的id,修改的時候需要通過記錄的id修改，所以可以判斷一下。

這樣，easyui動態編輯行就完成啦

========================================================================================================

分割線========================================================================================================
上次寫的這個行編輯還是有點問題的，就是沒有驗證，而且新增的時候沒有獲取到焦點。所以這裡修改一下：
1.editor型別改為textbox,因為text不支援easyui的驗證

columns:[[ 
                {field:'id',title:'編號',width:80,hidden:true},
                {field:'text',title:'內容',width:80,editor:{
                    type:'textbox',
                    options:{
                        required:true,
                        validType:'length[0,30]', 
                        invalidMessage:'不能超過30個字!'
                    }
                }}
            ]],

2.新增獲取焦點：

function addRemark(){
        if (editIndex != undefined){
            return ;
        }
        $('#remark_dg').datagrid('insertRow',{
            index: 0,   // 索引從0開始
            row: {
                text:''
            }
        });
        $('#remark_dg').datagrid('selectRow', 0);
        $('#remark_dg').datagrid('beginEdit', 0);
        var ed = $('#remark_dg').datagrid('getEditor', {index:0,field:'text'});
        $(ed.target).textbox('textbox').focus(); 
        editIndex = 0;
    }

3.新增撤銷操作：

function reject(){
            $('#remark_dg').datagrid('rejectChanges');
            editIndex = undefined;
    }

<a href="javascript:reject()" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" >取消</a>