easyui的datagrid的editor（第一版）

**效果图：

效果图

• 引入自定义js：datagridEdit.js
  这个js中主要实现了一个editCell方法。

var gridEdit={
    init:function(){
        $.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;
                    }
                });
            }
        });
    }
}
$(function(){
    gridEdit.init();
});

• 定义存储修改行号的变量：

var lxfwdy={
    editIndex:undefined,
……
}

• datagrid定义的地方绑定两个事件：

lxfwdygrid : function() {
    $('#lxfwdygrid').datagrid({
//      url : "lstroadclass",
        url : "datagrid_data1.json",
        loadMsg : '正在加载数据...',
        singleSelect: true,
        fit : true,
        border : true,
        rownumbers : true,
        pagination : true,
        striped : true,
        queryParams : {},
        onClickCell: lxfwdy.onClickCell,//单元格点击事件
        onAfterEdit:lxfwdy.onAfterEdit,//编辑完成事件
        columns : [ [ {
            field : 'roadname',
            title : '线路中文名称',
            width : 200,
            align : 'center'
        },{
            field : 'codelike',
            title : '路线前置代码',
            width : 200,
            align : 'center'
        },{
            field : 'roadtype',
            title : '路线排列方式',
            width : 200,
            align : 'center',
            formatter:function(value,row){
                return lxplfsMap[value];
            },
            editor:{
                type:'combobox',
                options:{
                    valueField:'id',
                    textField:'text',
                    data: lxplfs,
                    value:1
                }
            }
        },

• lxfwdy中添加三个方法：

onClickCell:function(index, field){
    if (lxfwdy.endEditing()){
        $('#lxfwdygrid').datagrid('selectRow', index)
                .datagrid('editCell', {index:index,field:field});
        lxfwdy.editIndex = index;
    }
},
endEditing:function(){
    if (lxfwdy.editIndex == undefined){return true}
    if ($('#lxfwdygrid').datagrid('validateRow', lxfwdy.editIndex)){
        $('#lxfwdygrid').datagrid('endEdit', lxfwdy.editIndex);
        lxfwdy.editIndex = undefined;
        return true;
    } else {
        return false;
    }
},
//编辑完成之后触发。
onAfterEdit:function(index,row,changes){
    console.log("onAfterEdit");
    console.log(index);
    console.log(row);
    console.log(changes);
    var change = false;
    for(x in changes){//这个地方把修改提交到后台
        console.log(x + "="+ changes[x]);
    }
    console.log("------------");
}

注意：

• 需要先执行gridEdit.init方法。

全部源码