Easyui datagrid 多行编辑

// 初始化数据列表
    function initDatagrid() {
        $('#dg').datagrid({
            loadMsg: '数据加载中请稍后……',
            striped: true,
            url: '/api/Attendance',
            sortName: 'ID',
            sortOrder: 'desc',
            method: "get",
            striped: true,
            border: true,
            selectOnCheck: false,
            checkOnSelect: false,
            remoteSort: true,
            singleSelect: true,
            idField: 'ID',
            pagination: true,
            rownumbers: false,
            pageSize: 100,   // 每页显示的记录条数,默认为100
            pageList: [20, 50, 100, 200, 500],  // 设置可选的每页记录条数的列表
            fitColumns: true,
            columns: [[
                {
                    field: 'Num', title: "编号", width: 34, sortable: false
                },
                {
                    field: 'Employee', title: "人员", width: 64, sortable: true
                },
                 {
                    field: 'Extra', title: "加班<br>(天)", width: 50, sortable: true,
                    // 只有添加了editor的列才是可编辑的
                    editor: {
                        type: 'numberbox',
                        options: {
                            precision: 3,
                            onChange: function () {
                                var rowIndex = getRowIndex(this);
                                updateEstimatedDays(rowIndex);
                            }
                        }
                    }
                },
                {
                    field: 'UnpaidVacate', title: "请假<br>(天)", width: 50, sortable: true,
                    editor: {
                        type: 'numberbox',
                        options: {
                            precision: 3,
                            onChange: function () {
                                var rowIndex = getRowIndex(this);
                                updateEstimatedDays(rowIndex);
                            }
                        }
                    }
                },
                // 此处省略部分列...
                {
                    field: 'Year', title: "年份", width: 37, sortable: false
                },
                {
                    field: 'Month', title: "月份", width: 34, sortable: false
                },
                {
                    field: 'Remark', title: "备注", width: 260, sortable: false,
                    editor: {
                        type: 'textbox'
                    }
                }                
            ]],
            // 添加工具栏
            toolbar: [
                {
                    text: "生成基础数据",
                    iconCls: "icon-add",  // 定义图标样式
                    handler: function () {
                        var year = $('#queryYear').numberbox('getValue');
                        var month = $('#queryMonth').numberbox('getValue');
                        $.get('/api/Attendance?year=' + year + '&month=' + month, function (data) {
                            if (!data.State) {
                                $.messager.alert('警告', data.Data, 'info');
                            } else {
                                $('#dg').datagrid('reload');
                            }
                        });
                    }
                },
                {
                    text: "保存",
                    iconCls: "icon-save",
                    // 批量提交多条已修改数据到后台
                    handler: function () {
                        // 关闭最后一个当前编辑行,否则最后一行的数据不会被getChanges方法捕获到
                        $('#dg').datagrid('endEdit', editRow);

                        // 修改过的行突出显示
                        if (editRow > 0) {
                            var element = document.getElementById("datagrid-row-r1-2-" + editRow);
                            element.style.backgroundColor = "#d6e486";
                        }

                        // 如果有数据修改过才进行提交
                        if ($('#dg').datagrid('getChanges').length) {

                            // 获取已修改的数据
                            var updated = $('#dg').datagrid('getChanges', "updated");
                            var effectRow = new Object();
                            if (updated.length) {
                                effectRow["updated"] = JSON.stringify(updated);
                            }

                            // 后台处理数据时先显示一个提示框,防止用户多次点击【保存】重复提交数据
                            $.messager.progress({
                                title: '提示',
                                msg: '正在保存,请稍候……',
                            });

                            var year = parseInt($('#queryYear').numberbox('getValue'));
                            var month = parseInt($('#queryMonth').numberbox('getValue'));

                            $.ajax({
                                type: "put",
                                dataType: "json",
                                data: effectRow,
                                url: "/api/Attendance?year=" + year + "&month=" + month,
                                success: function (data) {
                                    if (!data.State) {
                                        $.messager.alert('警告', data.Data, 'info');
                                    } else {
                                        $('#dg').datagrid('reload');
                                        editRow = -1;
                                    }

                                    $.messager.progress('close');
                                    $('#dg').datagrid('unselectAll');
                                },
                                error: function () {
                                    $.messager.alert('警告', data.Data, 'info');
                                    $.messager.progress('close');
                                    $('#dg').datagrid('unselectAll');
                                }
                            });
                        }
                    }
                },
                {
                    text: "取消",
                    iconCls: "icon-cancel",
                    handler: function () {
                        endEdit(editRows);
                        $('#dg').datagrid('reload');
                        $('#dg').datagrid('unselectAll');
                        editRow = -1;
                    }
                }
            ],
            onBeforeLoad: function (params) {
                params.employeeID = $("#queryEmployee").combobox("getValue");
                params.year = $("input[name='queryYear']").val() != "" ? $("input[name='queryYear']").val() : -1;
                params.month = $("input[name='queryMonth']").val() != "" ? $("input[name='queryMonth']").val() : -1;
                params.sortField = sortField;
                params.sortOrder = sortOrder;
            },
            // 鼠标单击某一行是开启该行的编辑状态
            onClickRow: function (rowIndex, rowData) {
                if (canEdit == true) {
                    $('#dg').datagrid('endEdit', editRow);
                    if (rowIndex > 0) {
                        $('#dg').datagrid("beginEdit", rowIndex);
                    }
                    // 修改过的行突出显示
                    if (editRow > 0) {
                        var element = document.getElementById("datagrid-row-r1-2-" + editRow);
                        element.style.backgroundColor = "#d6e486";
                    }

                    editRows.push(rowIndex);
                    editRow = rowIndex;
                }
            }
        });
    }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值