EasyUI DataGrid 单元格编辑 注释版

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

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


效果图:

EasyUI DataGrid 单元格编辑 注释版_第1张图片


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>

总结:

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

你可能感兴趣的:(datagrid,行编辑)