EasyUI DataGrid 单元格编辑 注释版

    最近做组织部项目的时候，需要点击Datagrid，然后能够写入数值；研究了半天没明白是什么意思，后来查资料的时候，直接在easyUI 中文网的Demo中找到了相同的代码，但是代码没有注释，依然不是很理解，后来找同伴一块推敲，基本掌握了整个思路，写出注释来给大家分享；

EeayUI中文网Demo及展示效果：http://www.jeasyui.net/demo/332.html

效果图：

HTML代码；

                    <table id="dg" class="easyui-datagrid" style="width: 1000px; height: 280px;"                        data-options=" iconCls: 'icon-edit',                                        toolbar: '#tb',                                        rownumbers:true,                                        singleSelect: false,                                        url: 'QuantifyRecord.ashx/ProcessRequest',                                        method:'get',                                        pagination:true,                                        onClickCell: onClickCell">                        <thead>                            <%--field中带有editor的是能够编辑的，其他列是不能编辑的--%>                            <tr>                                <th data-options="field:'ck',checkbox:true"></th>                                <th data-options="field:'DepartmentName',width:200">单位名称</th>                                <th data-options="field:'Name',width:350">指标名称</th>                                <%--数字，小数点4位，--%>                                <th data-options="field:'Data',width:150,editor:{type:'numberbox',options:{ precision:4}}">成绩</th>                                <th data-options="field:'remarks',width:150,editor:'text'">备注</th>                            </tr>                        </thead>                    </table>

Js代码：

 <script type="text/javascript">        //可编辑的datagrid  --TODO:范晓权 给EasyUI扩展方法；添加editCell方法；        //方法扩展editCell；        $.extend($.fn.datagrid.methods, {            //两个参数            // jq:             // param:对象，包含index 和 鼠标点击的列属性；            //jq = [table#dg.easyui-datagrid, context: document, selector: "#dg"], param = Object {index: 1, field: "Data"}  选择的是Data列，            editCell: function (jq, param) {                //each() 遍历；                return jq.each(function () {                    //options:返回属性对象。 这个时候的this代表：jq;                    var opts = $(this).datagrid('options');                                                                                                                           //getColumnFields:返回列的字段，如果 frozen 设置为 true，则冻结列的字段被返回。                    //concat:用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本                    //与HTML的editor属性有关；能够编辑的列和不能编辑的列；                    //fields的值，和上面HTML对应；                        //Array[5]                        //0: "ck"                        //1: "DepartmentName"                        //2: "Name"                        //3: "Data"                        //4: "remarks"                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));                    //下面for循环，设定列能够编辑。当不能编辑时，editor的值为undefined，能够编辑值为text;                    for (var i = 0; i < fields.length; i++) {                        var col = $(this).datagrid('getColumnOption', fields[i]);                        col.editor1 = col.editor;                        //循环到的列，不等于鼠标点击的那一列时，设定列的editor的值为null；                        if (fields[i] != param.field) {                            col.editor = null;                        }                    }                    //开始对一行进行编辑。param.index 为行号；对选中的一行进行编辑；                    $(this).datagrid('beginEdit', param.index);                    //for循环，设置col                    for (var i = 0; i < fields.length; i++) {                        //getColumnOption:返回指定列的选项。                        var col = $(this).datagrid('getColumnOption', fields[i]);                        //给列的editor属性赋值；text 或者其他；                        col.editor = col.editor1;                    }                });            }        });        //定义一个 行号遍历 赋值为undefined；        var editIndex = undefined;        //该函数的返回值为Boolean；        function endEditing() {            if (editIndex == undefined) { return true }            //验证指定的行，有效时返回 true。 -范晓权            if ($('#dg').datagrid('validateRow', editIndex)) {                //结束对一行进行编辑。                $('#dg').datagrid('endEdit', editIndex);                editIndex = undefined;                return true;            } else {                return false;            }        }        //双击单元格，index是行值，field是列的字段名；        function onClickCell(index, field) {                      //endEditing 的返回值是boolean 值；当返回值为true的时候；            if (endEditing()) {                //选中一行，行索引从 0 开始。                $('#dg').datagrid('selectRow', index)                    //行值和字段内容  TODO：范晓权                        .datagrid('editCell', { index: index, field: field });                //选中的行值赋值给editIndex;                editIndex = index;            }        }    </script>

总结：

    一种学习的方式叫做站在巨人的肩膀上，首先研究别人的代码，然后改进代码，最后成为自己的代码。实现功能是一种学习，更重要的是能够融汇贯通，而这需要对知识有一个静下心了解和探索的过程；