Page如何引用datatable

Page如何引用datatable

参考：

https://discuss.frappe.io/t/devtip-building-custom-desk-pages/93984

1. 前提： 先配置一个Page页面

2. 构建的文件目录：

frappe@e8811978c502:~/frappe-bench/apps/erpnextcn/erpnextcn/erpnextcn/page/vue_test$ ls -la
total 12
drwxr-xr-x 2 frappe frappe   89 Jun 21 06:40 .
drwxr-xr-x 5 frappe frappe   84 Jun 21 06:24 ..
-rw-r--r-- 1 frappe frappe    0 Jun 21 06:24 __init__.py
-rw-r--r-- 1 frappe frappe 3530 Jun 21 09:30 vue_test.js
-rw-r--r-- 1 frappe frappe  393 Jun 21 06:24 vue_test.json

3. 文件: vue_test.js

frappe.pages['vue-test'].on_page_load = function(wrapper) {
    var page = frappe.ui.make_app_page({
        parent: wrapper,
        title: 'vue-test',
        single_column: true
    });

    //set up our empty datatable
    let el = document.querySelector('.layout-main-section')
    let button_formatter = (value) => `<button onclick="alert('This is ${value}')">Action!</button>`
    let columns = ['Name', 'Territory', 'Account Manager', 
        {name: "Action Button", focusable: false, format: button_formatter }]
    let datatable = new frappe.DataTable(el, { columns: columns, data: [], layout: "fluid" });

    //use regular ajax api methods to fetch document data, then refresh
    frappe.db.get_list("Customer", 
        {fields: ['customer_name', 'territory', 'account_manager', 'name']}
    ).then((r) => { 
        let data = r.map(Object.values)
        datatable.refresh(data, columns) 
    })
}

4. 效果：