easyui datagrid 使用代码片段记录

/**
 *
 */

$(function() {
    urlbase = contextPath;

    // 拉取分组组别信息
    // window.groups = [ {
    // group : "1",
    // desc : "zhannei"
    // }, {
    // group : "2",
    // desc : "zhanshi"
    // } ];
    getAllGroup();

});
function initDataGrid() {
    window.spreads = [ {
    spread : "0",
    desc : "默认或未填"
    }, {
    spread : "1",
    desc : "站内"
    }, {
    spread : "2",
    desc : "站外"
    }, {
    spread : "3",
    desc : "中间页"
    }, {
    spread : "2_3",
    desc : "2或3"
    },{
    spread : "1_2_3",
    desc : "1或2或3"
    } ];
    $('#dg')
        .datagrid(
            {
            url : urlbase + '/getdata',
            width : 700,
            height : 'auto',
            loadMsg : "正在加载，请稍等...",
            striped : true,
            // fit: true,//自动大小
            rownumbers : true,// 行号
            // fitColumns:true,
            singleSelect : true,// 是否单选
            remoteSort : false,
            // 远程排序
            columns : [ [
                {
                    field : 'type',
                    title : 'ad_traffic_type',
                    width : 120,
                    sortable : true,
                    editor : {
                    type : 'numberbox',
                    options : {
                        precision : 0,
                        min : 0,
                        required : true
                    }
                    },
                    sorter : function(a, b) {
                    return parseInt(a) > parseInt(b) ? 1
                        : -1;
                    }
                },
                {
                    field : 'spread',
                    title : 'spread_type',
                    width : 120,
                    sortable : true,
                    editor : {
                    type : 'combobox',
                    options : {
                        valueField : 'spread',
                        textField : 'desc',
                        data : window.spreads,
                        required : true,
                        formatter : function(value) {

                        return value.spread + "."
                            + value.desc;
                        }
                    }
                    },
                    sorter : function(a, b) {
                    return a > b ? 1 : -1;
                    }
                },
                {
                    field : 'group',
                    title : 'ad_traffic_group',
                    width : 120,
                    formatter : function(value) {
                    for (var i = 0; i < window.groups.length; i++) {
                        if (window.groups[i].group == value)
                        return window.groups[i].group
                            + '.'
                            + window.groups[i].desc;
                    }
                    return value;
                    },
                    editor : {
                    type : 'combobox',
                    options : {
                        valueField : 'group',
                        textField : 'desc',
                        data : window.groups,
                        required : true,
                        formatter : function(value) {

                        return value.group + "."
                            + value.desc;
                        }
                    }
                    },
                    sortable : true,
                    sorter : function(a, b) {
                    return parseInt(a) > parseInt(b) ? 1
                        : -1;
                    }
                },

                {
                    field : 'desc',
                    title : ' 渠道名称',
                    width : 180,
                    editor : 'text'
                },
                {
                    field : 'action',
                    title : 'Action',
                    width : 120,
                    align : 'center',
                    formatter : function(value, row, index) {
                    var span = '<span>&nbsp&nbsp</span>';
                    if (row.editing) {
                        var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a>';
                        var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
                        return s + span + c;
                    } else {
                        var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a>';
                        ;
                        var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
                        return e + span + d;
                    }
                    }
                } ] ],
            toolbar : [ {
                iconCls : 'icon-add',
                plain : true,
                handler : function() {
                insert();
                }
            } ],
            onBeforeEdit : function(index, row) {
                row.editing = true;
                updateActions(index);
            },
            onAfterEdit : function(index, row) {
                if (typeof row.type == 'undefined'
                    || row.type == ""
                    || typeof row.spread == 'undefined'
                    || typeof row.group == 'undefined') {
                $('#dg').datagrid('beginEdit', index);
                }
                row.editing = false;
                updateActions(index);
            },
            onCancelEdit : function(index, row) {
                row.editing = false;
                updateActions(index);
            }

            });
}
function updateActions(index) {
    $('#dg').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) {
    var index = getRowIndex(target);
    $('#dg').datagrid('beginEdit', index);
    $('#dg').datagrid('selectRow', index);
}
function deleterow(target) {
    $.messager.confirm('Confirm', 'Are you sure?', function(r) {
    if (r) {
        var grid = $('#dg');
        var rowIndex = getRowIndex(target);
        grid.datagrid('selectRow', rowIndex);
        var selectedCrowdata = grid.datagrid('getSelected');
        var postData = {
        type : selectedCrowdata.type

        };
        var sucess = function() {
        grid.datagrid('deleteRow', rowIndex);
        };
        ajaxBackAction(postData, "delType", sucess);

    }
    ;
    });
}
function saverow(target) {
    var grid = $('#dg');
    var rowIndex = getRowIndex(target);
    grid.datagrid('endEdit', rowIndex);
    grid.datagrid('selectRow', rowIndex);
    var selectedCrowdata = grid.datagrid('getSelected');
    if (selectedCrowdata.editing == false
        && typeof selectedCrowdata.type != 'undefined'
        && selectedCrowdata.type != "" && typeof selectedCrowdata.desc != 'undefined') {
    var postData = {
        type : selectedCrowdata.type,
        spread : selectedCrowdata.spread,
        group : selectedCrowdata.group,
        desc : selectedCrowdata.desc
    };
    ajaxBackAction(postData, "typeSave");
    }else{
    $.messager.alert('信息不完整','请填写完整信息!','warning');
    }

}
function cancelrow(target) {
    $('#dg').datagrid('cancelEdit', getRowIndex(target));
}

function insert() {
    // var row = $('#dg').datagrid('getSelected');
    var data = $('#dg').datagrid('getData');
    var row = $('#dg').datagrid('getFooterRows');
    if (row) {
    var index = $('#dg').datagrid('getRowIndex', row);
    } else {
    index = 0;
    }
    $('#dg').datagrid('insertRow', {
    index : index,
    row : {}
    });
    $('#dg').datagrid('selectRow', index);
    $('#dg').datagrid('beginEdit', index);
    //对编辑器数据进行检查
    var typeEditor = $('#dg').datagrid('getEditor',{index:index,field:'type'});
    var target =  $(typeEditor.target).focus().next().find('.textbox-text');
    console.info(target);
    target.blur(function(){
    var type = $(this).val();
    var maxtype =0,flag = false;
    for(var i = 1;i<data.rows.length;i++){
        if(maxtype < parseInt(data.rows[i].type)){
        maxtype = parseInt(data.rows[i].type);
        }
        if(parseInt(type) == parseInt(data.rows[i].type)){
        flag = true;
        }
    }
    if(flag){
        $.messager.alert('重复','ad_traffic_type='+type+'已存在!'+"最大到"+maxtype,'warning');
        //$(this).val(maxtype+1);
        //$(this).focus();
    }
    });
}
function ajaxBackAction(Data, actionName, dofunction) {
    jQuery.ajax({
    url : urlbase + "/" + actionName,
    data : Data,
    type : "POST",
    contentType : "application/x-www-form-urlencoded;charset=UTF-8",
    success : function(result) {
        if (result == "true" || result == true) {
        alert("操作成功");
        typeof dofunction == "function" && dofunction();
        } else {
        alert("操作失败");
        }

    },
    error : function() {
        alert("请求存储失败，请重试")
    }
    });
}
function getAllGroup() {
    jQuery.ajax({
    url : urlbase + "/" + "allGroup",
    data : {},
    type : "GET",
    success : function(result) {
        window.groups = result;
        initDataGrid();
    },
    error : function() {

    }
    });
}