easyui datagrid 实现单个单元格提交业务

前序：根据项目需求需要实现提交单个单元格，这方面的资料不多所以就整理下来，以供自己使用。

1，先看效果图：图片中的行名称以及列名称都遮挡住，大家只需要知道那是什么就可以。

这里除去第一列之外，其他列单元格都可以实现单个单元格提交业务。

2，附上代码片段供大家参考，如有雷同纯属巧合。

/**
业务需求：单击单个单元格实现编辑并且触发提交单个单元格数据
1：定义加载表结构数据
   1-1：grid <table>标签id参数
 2：单元格点击事件：  onClickCell
 3：单元格编辑之后触发的事件：onAfterEdit
 4，easyui 追加editCell 方法
*/

$("#grid").datagrid({
                toolbar: '#tb',
                onClickCell:onClickCell,//定义单元格点击事件
                onAfterEdit:onAfterEdit,//单元格编辑完之后触发 的事件
                data: result.data.rows,//行数据集
                columns: [result.data.cols],//表头--列名称
                singleSelect: true,
                fitColumns:true,
                rownumbers: true,
                onLoadSuccess:function(data){//数据加载成功之后追加统计行，这里追加了两行分别是：均值和方差
                    var cols=result.data.cols;
                    var obj={};
                    obj.test_name="<span style='font-weight: bold'>均值</span>";
                    obj.test_id=0;
                    for(var i=1;i<cols.length;i++){
                        var name=cols[i].field;
                        obj[name]=avg(name);//自定义均值函数
                    }
                    $('#grid').datagrid('appendRow',obj);
                    //
                    var cha={};
                    cha.test_name="<span style='font-weight: bold'>方差</span>";
                    cha.test_id=0;
                    for(var i=1;i<cols.length;i++){
                        var name=cols[i].field;
                        cha[name]=variance(name);//自定义方差函数
                    }

                    $('#grid').datagrid('appendRow',cha);
                  
                }

            });
			
			//easyui 追加的editCell 方法
			//追加编辑单个单元格方法
    $.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;
                }
            });
        }
    });
	//该方法用于关闭上一个焦点的editing状态
	var editIndex = undefined;//初始化变量
    function endEditing() {//该方法用于关闭上一个焦点的editing状态
        if (editIndex == undefined) {
            return true
        }
        if ($('#grid').datagrid('validateRow', editIndex)) {
            $('#grid').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
	//点击单元格事件：
	 function onClickCell(index,field,value) {
        //指定某列不可编辑
        var e = $("#grid").datagrid('getColumnOption', 'test_name');//test_name:列名称（field）
        e.editor = {};
        if (endEditing()) {
            //判断最后两行 为不可编辑行
			//最后两行为统计行不需要提交，所以需要过滤掉。
            var rows=$('#grid').datagrid('getRows');
            var last=rows.length+1;
            if((index+2)==last || (index+3)==last){
                $('#grid').datagrid('endEdit', last);
            }else{
				//调用easyui 追加的editCell方法
                $('#grid').datagrid('selectRow', index).datagrid('editCell', {
                    index : index,
                    field : field
                });
                editIndex = index;
            }

        }

    }
	//
	 //单元格失去焦点执行的方法
    function onAfterEdit(index, row, changes) {

        var updated = $('#grid').datagrid('getChanges', 'updated');
        if (updated.length < 1) {
            editRow = undefined;
            $('#grid').datagrid('unselectAll');
            return;
        } else {
            // 表单提交函数
			//该函数为自定义函数，根据具体情况，实现自己的提交业务，这里就不赘叙提交的业务。
            submitForm(index, row, changes);
        }

    }
	
	
	
	
	
	
	
	
	
	
	
	
	
			

3，备注：到这里全部业务就算实现了，

最后把均值函数和方差函数代码一起附上。

//平均值
    function avg(colName){
        var rows=$('#grid').datagrid('getRows');
        var total=parseFloat("0");
        for(var i=0;i<rows.length;i++) {
            var colVal=rows[i][colName] ? rows[i][colName]:0;
            total += parseFloat(colVal);
        }
        var avg=parseFloat(total/(rows.length));
        return avg.toFixed(2);
    }

//方差
    function variance(colName){
        var rows=$('#grid').datagrid('getRows');
        //获取平均值
        var avgs=parseFloat("0");
        for(var i=0;i<rows.length;i++) {
            var colVal=rows[i][colName] ? rows[i][colName]:0;
            avgs += parseFloat(colVal);
        }
        var avg=parseFloat(avgs/(rows.length));
        //
        var total=parseFloat("0");
        for(var i=0;i<rows.length;i++){
            var colVal=rows[i][colName] ? rows[i][colName]:0;
            var cha=parseFloat(colVal)-avg;
            total +=Math.pow(cha,2);
        }
        var result=parseFloat(total/(rows.length-1));

        return result.toFixed(2);
    }