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);    }