实现EasyUI中DataGrid单个表格的编辑

具体实现

        总成绩的汇总是动态进行的，要想实现添加档次字段，并且保存它，需要添加相应的表进行保存相应的值，这里添加的表中的字段，仅仅有对象ID，年份，档次，这样是为了达到这样的效果，实现成绩的动态计算，且保存档次字段值。

        具体的显示逻辑：获得每个对象的总成绩汇总，形成一个虚拟表，从新添加的物理表中获得该年份所有对象ID和对应的档次，将这两个虚拟表进行拼接，然后显示出来。具体的修改逻辑：用户提交修改的记录，然后根据提交对象ID和年份，查询添加表，看看是否存在该条记录，存在则更新，不存在则添加。

        对于后台的代码，主要是通过文字的形式描述的，对于页面上，这里提供出主要的代码，有兴趣的自己可以看一下。

       页面核心代码

<script type="text/javascript">
            $.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;
                        }
                    });
                }
            });

            var editIndex = undefined;

            //结束编辑
            function endEditing() {
                if (editIndex == undefined) { return true }
                if ($('#dg').datagrid('validateRow', editIndex)) {
                    $('#dg').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }

            //双击事件
            function onDblClickCell(index, field) {
                if (endEditing()) {
                    $('#dg').datagrid('selectRow', index)
                            .datagrid('editCell', { index: index, field: field });
                    editIndex = index;
                }
            }

            //保存按钮,多条数据一起提交
            function saveAllData() {
                if (endEditing()) {
                    //获取年份
                    var checkedYearValue = $("#cc1").combobox('getText');

                    //DataGrid的更改行不为0
                    if ($("#dg").datagrid('getChanges').length) {
                        //获取插入更改的行的集合
                        var inserted = $("#dg").datagrid('getChanges', "inserted");
                        //获取删除更改的行的集合
                        var deleted = $("#dg").datagrid('getChanges', "deleted");
                        //获取更新更改的行的集合
                        var updated = $("#dg").datagrid('getChanges', "updated");


                        var effectRow = new Object();
                        if (inserted.length) {
                            effectRow["inserted"] = JSON.stringify(inserted);
                        }
                        if (deleted.length) {
                            effectRow["deleted"] = JSON.stringify(deleted);
                        }
                        if (updated.length) {
                            effectRow["updated"] = JSON.stringify(updated);
                        }

                        var row = $('#dg').datagrid('getSelections');
                        if (row.length < 1) {
                            $.messager.alert('提示', '请至少选择一条数据!', 'info');
                            return;
                        }
                        if (row.length >= 1) {
                            for (var i = 0; i < row.length; i++) {
                                var Data = row[i].县市区ID;
                                if (Data == "" || Data == null) {
                                    alert("没有数据");
                                    $('#dg').datagrid('unselectRow', i);
                                }
                            }
                        }
                        row = $('#dg').datagrid('getSelections');

                        //用户向一般处理程序传值
                        var type = "Town";
                        var data1 = new Object();
                        var obj = new Object();

                        obj.yearValue = checkedYearValue;
                        data1.array = row;
                        data1.obj = obj;
                        data1.type = type;

                        var jsonObject = JSON.stringify(data1);
                        $.post("FourTypeResultLevel.ashx", { jsonObject: jsonObject }, function (data) {
                            alert(data);
                        });
                    }
                }
            }

            //撤销按钮
            function reject() {
                $('#dg').datagrid('rejectChanges');
                editIndex = undefined;
            }
    </script>

<table id="dg" 
        title="干部总成绩" 
        class="easyui-datagrid" 
        striped="true" 
        style="width: <%=width %>px"
        autoRowHeight="true"
        data-options="iconCls: 'icon-edit',
                    toolbar: '#tb',
                    url:'TownResultsTotal.ashx',
                    method:'get',
                    onDblClickCell: onDblClickCell"
        pagination="false"
        rownumbers="true" 
        fitcolumns="true"
        singleSelect="false" >
        <thead>
            <tr id="jsTh">
                <%=th %>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div id="tb" style="height: auto">
        <a href="javascript:void(0)" id="saveButton" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="saveAllData()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
    </div>

        注意：1、DataGrid的表头要注册双击事件对应的相应函数名；2、对于DataGrid中行的状态只有修改状态，但是在程序中还是写出了其他的的其中状态。

总结

        这里用到的EasyUI中的控件，所以需要引用一些CSS和JS等内容，其他的具体东西大家可以去晚上搜一下。