Odoo17 form上的list編輯狀態下回車換行最佳化

张飞虎發表於2024-03-14

背景描述

通常在Odoo的form檢視中,我們會使用list來編輯一些資料,但是在編輯完一個單元格之後,按下Enter鍵,它預設是聚焦到下一行的首列中;

在批次錄入一列資訊比如價格時,我們可能更希望像Excel一樣,按下Enter鍵後,游標會聚集到下一行的同一行列中。

img

原因分析

分析原始碼addons\web\static\src\views\list\list_renderer.js找到換行聚集到行首的控制在onPatched方法中
img

意味著odoo在設計list的時候就考慮到了這個問題,專門給了繼承點,那麼我們只需要patch鍵盤事件,在按下回車的時候給lastEditedCell賦值即可。

程式碼實現

新增static/src/views/list/list_renderer.js檔案,加入以下程式碼

/** @odoo-module **/

import { ListRenderer } from "@web/views/list/list_renderer";
import { patch } from "@web/core/utils/patch";

// 在編輯狀態下的List按下回車時跳轉到下一行相應列的單元格中,而不是第一列
patch(ListRenderer.prototype, {
    onCellKeydownEditMode(hotkey, cell, group, record) {
        let res = super.onCellKeydownEditMode(hotkey, cell, group, record);
        if(hotkey == 'enter'){
            let column = this.state.columns.find(x => x.name == cell.getAttribute('name'))
            // onPatched中會判斷並引用lastEditedCell
            this.lastEditedCell = { column: column, record: record };
        }
        return res
    }
})

相關文章