重写Easy UI的datagrid的内嵌combobox datebox combogrid键盘事件keyhandler(方向键和tab键)

以下为代码

重写combobox的键盘事件keyhandler

let editField = undefined;
let editGrid = undefined;
let editIndex = undefined;
let clickRow = null;

/**
 * 重写combobox的keyhandler键盘事件,下面方法类似
 */
$.extend($.fn.combobox.defaults.keyHandler, {
    enter: function () {
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (!pClosed) {
            (nameEditor.target).combogrid("hidePanel");
        }
        return dgTurnDown();
    },
})

重写datebox的键盘事件keyhandler

$.extend($.fn.datebox.defaults.keyHandler, {
    up: function (event) {
        event.preventDefault();
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (pClosed) return;
        var date = (nameEditor.target).datebox('getValue');
        (nameEditor.target).datebox('setValue', addDate(date ? date : getToday(), -7));
    }, down: function (event) {
        event.preventDefault();
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (pClosed) return;
        var date = (nameEditor.target).datebox('getValue');
        (nameEditor.target).datebox('setValue', addDate(date ? date : getToday(), 7));
    }, left: function (event) {
        event.preventDefault();
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (pClosed) return;
        var date = (nameEditor.target).datebox('getValue');
        (nameEditor.target).datebox('setValue', addDate(date ? date : getToday(), -1));
    }, right: function (event) {
        event.preventDefault();
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (pClosed) return;
        var date = (nameEditor.target).datebox('getValue');
        (nameEditor.target).datebox('setValue', addDate(date ? date : getToday(), 1));
    },
    enter: function () {
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        var date = (nameEditor.target).datebox('getValue');
        (nameEditor.target).datebox('setValue', date ? date : getToday());
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (!pClosed) {
            (nameEditor.target).combogrid("hidePanel");
        }
        return dgTurnDown();
    },
})

重写combogrid的键盘事件keyhandler

$.extend($.fn.combogrid.defaults.keyHandler, {
    up: function (event) {
        // 上键
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = $(nameEditor.target).combogrid("panel").panel("options").closed;
        if (!pClosed) event.preventDefault();
        else return;
        let grid = $(nameEditor.target).combogrid('grid');
        let rows = grid.datagrid("getRows");
        let maxlen = rows.length; //总共行数
        let row = grid.datagrid('getSelected');
        let selectRow;
        if (row) {
            let index = grid.datagrid('getRowIndex', row);
            if (index > 0) {
                let upSize = 1;
                grid.datagrid('selectRow', index - upSize);
                selectRow = rows[index - upSize];
                while (upSize < maxlen - 1 && grid.datagrid('getRowIndex', grid.datagrid('getSelected')) == index) {
                    upSize++;
                    grid.datagrid('selectRow', index - upSize);
                    selectRow = rows[index - upSize];
                }
            } else if (index == 0) {
                grid.datagrid('selectRow', maxlen - 1);
                selectRow = rows[maxlen - 1];
            }
        } else {
            grid.datagrid('selectRow', maxlen - 1);
            selectRow = rows[maxlen - 1];
        }
        $(nameEditor.target).combogrid('setText', selectRow[grid.datagrid('options').textField]);
    },
    down: function () {
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = $(nameEditor.target).combogrid("panel").panel("options").closed;
        if (!pClosed) event.preventDefault();
        else return;
        let grid = $(nameEditor.target).combogrid('grid');
        let rows = grid.datagrid("getRows");
        let maxlen = rows.length; //总共行数
        let row = grid.datagrid('getSelected');
        let selectRow;
        if (row) {
            let index = grid.datagrid('getRowIndex', row);
            if (index < (maxlen - 1)) {
                let downSize = 1;
                grid.datagrid('selectRow', index + downSize);
                selectRow = rows[index + downSize];
                while (downSize < maxlen - 1 && grid.datagrid('getRowIndex', grid.datagrid('getSelected')) == index) {
                    downSize++;
                    grid.datagrid('selectRow', index + downSize);
                    selectRow = rows[index + downSize];
                }
            } else if (index == (maxlen - 1)) {
                grid.datagrid('selectRow', 0);
                selectRow = rows[0];
            }
        } else {
            grid.datagrid('selectRow', 0);
            selectRow = rows[0];
        }
        $(nameEditor.target).combogrid('setText', selectRow[grid.datagrid('options').textField]);
    },
    enter: function () {
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return;
        let pClosed = (nameEditor.target).combogrid("panel").panel("options").closed;
        if (!pClosed) {
            (nameEditor.target).combogrid("hidePanel");
        }
        let grid = (nameEditor.target).combogrid("grid");
        let rows = grid.datagrid("getRows");
        let selectRow;
        if (rows != null && rows != undefined) {
            let row = grid.datagrid('getSelected');
            if (!row) {
                grid.datagrid('selectRow', 0);
                selectRow = rows[0];
            } else {
                let index = grid.datagrid('getRowIndex', row);
                if (index && index < rows.length) {
                    grid.datagrid('selectRow', index);
                    selectRow = row;
                } else {
                    grid.datagrid('selectRow', 0);
                    selectRow = rows[0];
                }
            }
        }
        $(nameEditor.target).combogrid('setText', selectRow[grid.datagrid('options').textField]);
        return dgTurnDown();
    },
    query: function (q) {
        //动态搜索
        let nameEditor = editGrid.datagrid('getEditor', {
            index: editIndex,
            field: editField
        });
        if (!nameEditor) return
        clickRow[editField] = q;
        $(nameEditor.target).combogrid("setValue", q);
        $(nameEditor.target).combogrid('grid').datagrid("reload");
    }
})

重写document页面的键盘事件(主要是方向建、tab、shift+tab以及enter回车)

/**
 * 重写键盘快捷键
 */
$(document).keydown(function (event) {
    //判断单元格编辑状态
    if (editGrid) {
        if (event.keyCode == 13 || event.keyCode == 40) { //enter 和向下方向键
            dgTurnDown();
        } else if (event.keyCode == 38) { //向上方向键
            dgTurnUp();
        } else if (event.keyCode == 9 && (!event.shiftKey) || event.keyCode == 39) { //tab 和 向右方向键
            dgTurnRight();
        } else if (event.keyCode == 9 && event.shiftKey || event.keyCode == 37) { //shift tab 向左移动
            dgTurnLeft();
        } else if (event.keyCode == 33) {
            //page up
            let editCombogrid = editGrid.datagrid('getEditor', {
                index: editIndex,
                field: editField
            });
            if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
                let pClosed = $(editCombogrid.target).combogrid("panel").panel("options").closed;
                if (!pClosed) {
                    event.preventDefault()
                    $('.pagination-prev').trigger('click');
                }
            }
        } else if (event.keyCode == 34) {
            //page down
            let editCombogrid = editGrid.datagrid('getEditor', {
                index: editIndex,
                field: editField
            });
            if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
                let pClosed = $(editCombogrid.target).combogrid("panel").panel("options").closed;
                if (!pClosed) {
                    event.preventDefault()
                    $('.pagination-next').trigger('click');
                }
            }
        }
    }
});

function dgTurnUp() {
    let editCombogrid = editGrid.datagrid('getEditor', {
        index: editIndex,
        field: editField
    });
    if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
        let pClosed = $(editCombogrid.target).combogrid("panel").panel("options").closed;
        if (!pClosed) return
    }
    if (editIndex == 0) return;
    editGrid.datagrid('endEdit', editIndex);
    editIndex = editIndex - 1;
    clickRow = editGrid.datagrid('getRows')[editIndex];
    if (editIndex == -1) { //最前一行时换列
        editIndex = editGrid.datagrid('getData').rows.length - 1;
        for (let j = 0; j < editFields.length; j++) {
            if (editField == editFields[j]) {
                if (j == 0) {
                    editField = editFields[editFields.length - 1];
                    break;
                }
                editField = editFields[j - 1];
                break;
            }
        }
    }
    setTimeout("editGrid.datagrid('selectRow', editIndex).datagrid('editCell', {index:editIndex,field:editField});showPanel();", 100)
}

function dgTurnDown() {
    let editCombogrid = editGrid.datagrid('getEditor', {
        index: editIndex,
        field: editField
    });
    if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
        let pClosed = $(editCombogrid.target).combogrid("panel").panel("options").closed;
        if (!pClosed) return
    }
    editGrid.datagrid('endEdit', editIndex);
    editIndex = editIndex + 1;
    clickRow = editGrid.datagrid('getRows')[editIndex];
    if (editIndex == editGrid.datagrid('getData').rows.length) { //当到最后一行时 换列
        editIndex = 0;
        for (let j = 0; j < editFields.length; j++) {
            if (editField == editFields[j]) {
                if (j == editFields.length - 1) {
                    editField = editFields[0];
                    break;
                }
                editField = editFields[j + 1];
                break;
            }
        }
    }
    setTimeout("editGrid.datagrid('selectRow', editIndex).datagrid('editCell', {index:editIndex,field:editField});showPanel();", 100)//防止快捷键冲突设置延迟
}

function dgTurnLeft() {
    let editCombogrid = editGrid.datagrid('getEditor', {
        index: editIndex,
        field: editField
    });
    if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
        let pClosed = $(editCombogrid.target).combogrid("panel").panel("options").closed;
        if (!pClosed) return
    }
    let e = event
    if (e.preventDefault) {
        e.preventDefault();
        e.stopPropagation()
    } else {
        e.returnValue = false;
        e.cancelBubble = true
    }
    editGrid.datagrid('endEdit', editIndex);
    for (let j = 0; j < editFields.length; j++) {
        if (editField == editFields[j]) { //最前一列时换行
            if (j == 0) {
                editIndex = editIndex - 1;
                editField = editFields[editFields.length - 1];
                break;
            }
            editField = editFields[j - 1];
            break;
        }
    }
    setTimeout("editGrid.datagrid('selectRow', editIndex).datagrid('editCell', {index:editIndex,field:editField});showPanel();", 100)
}

function dgTurnRight() {
    let editCombogrid = editGrid.datagrid('getEditor', {
        index: editIndex,
        field: editField
    });
    if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
        let pClosed = $(editCombogrid.target).combogrid("panel").panel("options").closed;
        if (!pClosed) return
    }
    let e = event
    if (e.preventDefault) { //屏蔽浏览器快捷键
        e.preventDefault();
        e.stopPropagation()
    } else {
        e.returnValue = false;
        e.cancelBubble = true
    }
    editGrid.datagrid('endEdit', editIndex);
    for (let j = 0; j < editFields.length; j++) {
        if (editField == editFields[j]) {
            if (j == editFields.length - 1) {//最后一列时换行
                editIndex = editIndex + 1;
                editField = editFields[0];
                break;
            }
            editField = editFields[j + 1];
            break;
        }
    }
    setTimeout("editGrid.datagrid('selectRow', editIndex).datagrid('editCell', {index:editIndex,field:editField});showPanel();", 100)
}

其他一些datagrid的表格操作增删行等

function endEditing(index, field) {
    if (editIndex == undefined) {
        return true
    }
    if ($('#dg1').datagrid('validateRow', editIndex)) {
        $('#dg1').datagrid('endEdit', editIndex);
        editIndex = undefined;
        editField = undefined;
        return true;
    } else {
        return false;
    }
}

function loadData(param) {
    let rows = [];
    for (let i = 1; i <= 100; i++) {
        rows.push({});
    }
    $('#dg1').datagrid('options').pageSize = rows.length;
    $('#dg1').datagrid('loadData', rows);
}

function onClickCell(index, field) {
    editGrid = $(this);
    clickRow = editGrid.datagrid('getRows')[index];
    if (endEditing(index, field)) {
        editGrid.datagrid('selectRow', index)
            .datagrid('editCell', {index: index, field: field});
        editIndex = index;
        editField = field;
        showPanel();
    }
}

/**
* datagrid editors下拉列表预览(手动触发)
*/
function showPanel() {
    let editCombogrid = editGrid.datagrid('getEditor', {
        index: editIndex,
        field: editField
    });
    if (editCombogrid && (editCombogrid.type == 'combogrid' || editCombogrid.type == 'combobox' || editCombogrid.type == 'datebox')) {
        $(editCombogrid.target).combogrid("showPanel");
    }
}

/**
* 删除行
*/
function deleterow(rowIndex) {
    if ($.isEmptyObject($('#dg1').datagrid('getRows')[rowIndex])) {
        $('#dg1').datagrid('deleteRow', rowIndex);
        return alert('成功删除第' + (rowIndex + 1) + '行', {icon: 1});
    }
    confirm('确定要删除第' + (rowIndex + 1) + '行？', function () {
        $('#dg1').datagrid('deleteRow', rowIndex);
        return alert('成功删除第' + (rowIndex + 1) + '行', {icon: 1});
    });
}

/**
* 插入行
*/
function insertrow(rowIndex) {
    setTimeout(function () {
        alert((rowIndex + 1) + '行下添加1行', {icon: 1});
        $('#dg1').datagrid('insertRow', {
            index: rowIndex + 1,
            row: {}
        });
    }, 100)
}

设置单元格的内容(用以解决某些时候鼠标左键点选不能实时赋值的bug)

/**
 * 设置单元格的内容(用作某些时候鼠标左键点选不能实时赋值的问题)
 * @param row
 */
function setDgCellValue(row) {
    let nameEditor = editGrid.datagrid('getEditor', {
        index: editIndex,
        field: editField
    });
    if (!nameEditor) return;
    $(nameEditor.target).combogrid('setText', row[$(nameEditor.target).combogrid('grid').datagrid('options').textField]);
}

扩展单元格编辑方法

$.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'));
            var arr = new Array();
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                if (col.editor != undefined) {
                    arr.push(fields[i]);
                }
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            editFields = arr;
            $(this).datagrid('beginEdit', param.index);
            var ed = $(this).datagrid('getEditor', param);
            if (ed) {
                if ($(ed.target).hasClass('textbox-f')) {
                    $(ed.target).textbox('textbox').focus();
                } else {
                    $(ed.target).focus();
                }
            }
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
            }
        });
    }
});

扩展combogrid的onSelect等方法

$.extend($.fn.datagrid.defaults.editors, {
    combogrid: {
        init: function (container, options) {
            var box = $('<input />').appendTo(container);
            options.onSelect = function (index, row) {
                console.log(index, row)
                setDgCellValue(row);
            }
            box.combogrid(options);

            return box;
        },
        getValue: function (target) {
            return $(target).combogrid('getValue');
        },
        setValue: function (target, value) {
            $(target).combogrid('setValue', value);
        },
        resize: function (target, width) {
            var box = $(target);
            box.combogrid('resize', width);
        },
        destroy: function (target) {
            $(target).combogrid('destroy');
        },
    }
});