Theo lời giải thích của bạn, có vẻ như bạn đang tìm nạp thông tin từ cơ sở dữ liệu [tổng hợp] để điền thông tin vào bảng và áp dụng những gì bạn muốn sẽ làm tăng độ phức tạp
Lời khuyên của tôi là sử dụng dữ liệu tìm nạp từ các nguồn khác, trong đó bạn thực hiện logic để trả về danh sách có các bản ghi và áp dụng đầu ra đó cho bảng, mỗi lần bạn lọc sẽ làm mới DataAction và sẽ tính toán lại dữ liệu như mong đợi
Khi tạo bảng dữ liệu, bạn có thể sử dụng Hàm Summary Row để thêm phần tóm tắt ở cuối bảng. Tóm tắt này tính toán ở phía máy khách hoặc phía máy chủ
Sử dụng Hàm Hàng Tóm tắt, bạn có thể tóm tắt bất kỳ số lượng cột nào. Một bảng cũng có thể bao gồm nhiều hàng tóm tắt. Để tính toán tóm tắt, bạn chỉ cần sử dụng các hàm javascript có sẵn như
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
0. Các nhà phát triển ứng dụng cũng có thể viết hàm javascript của riêng họ để tính toán tóm tắtBạn có thể đặt hàng tóm tắt bằng hàm hiển thị bên dưới trên một cột trong lệnh gọi lại sự kiện Beforedatarender
1Page.GroceriesTable1Beforedatarender = function[widget, data, columns] { columns.item.setSummaryRowData[[ 'Net Total', 'Discount' ]]; columns.netAmount.setSummaryRowData[[ '670', '2%' ]]; };
setSummaryRowData
WaveMaker cung cấp các hàm tổng hợp có thể được tham chiếu và sử dụng trong phương thức
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
1 để sử dụng các hàm tổng hợp sẵn có cho các cột DataTable. Phương pháp này chấp nhận một hoặc một mảng- Các giá trị đơn giản và các hàm tổng hợp tích hợp
- Chức năng tùy chỉnh với logic tổng hợp
- Đối tượng để tạo kiểu tùy chỉnh
Giá trị thuần túy và chức năng tổng hợp tích hợp
Hàng tóm tắt đơn
Gọi setSummaryRowData trên cột mà bạn muốn đặt dữ liệu hàng tóm tắt
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData['Net Total'];
columns.netAmount.setSummaryRowData['670'];
};
Nhiều hàng tóm tắt
Gọi setSummaryRowData trên cột mà bạn muốn đặt dữ liệu hàng tóm tắt và chuyển một mảng giá trị
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
Hàng Tóm tắt với Hàm và Biến Tổng hợp
Tạo một thể hiện hàm tổng hợp và gọi các hàm tổng hợp sẵn có trên cột setSummaryRowData
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
netAmountAggregate.sum[],
DISCOUNT + '%'
]];
};
Chức năng tổng hợp tích hợp
Cột chứa các hàm tổng hợp tích hợp sẵn bên dưới mà bạn có thể sử dụng trong các hàng tóm tắt
FunctionParameterssumNAaverageNAcountNAminimumNAmaximumNApercentTotal value to calculate percentageCác chức năng tổng hợp ở trên có thể được truy cập bằng cách sử dụng đối tượng
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
3 trên các cột như hình bên dướiPage.Beforedatarender = function[widget, data, columns] {
const columnAggregate = columns..aggregate;
columns..setSummaryRowData[columnAggregate.sum[]];
};
Chức năng tùy chỉnh với logic tổng hợp
Hàm tùy chỉnh hàng tóm tắt
Gọi hàm tùy chỉnh và trả về dữ liệu trong setSummaryRowData trên cột mà bạn muốn đặt dữ liệu hàng tóm tắt
________số 8_______Tạo kiểu cho hàng Tóm tắt
Trả về một đối tượng có khóa giá trị và lớp để hiển thị dữ liệu và thêm các kiểu được liên kết với lớp đó trong setSummaryRowData trên cột bạn muốn đặt dữ liệu hàng tóm tắt
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData[[
'Net Total',
'Discount',
{
value: 'Total Budget',
class: 'bold-class'
}
]];
columns.netAmount.setSummaryRowData[[
netAmountAggregate.sum[],
DISCOUNT + '%',
{
value: calculateTotal[],
class: 'bold-class'
}
]];
function calculateTotal[] {
let total = netAmountAggregate.sum[];
return total - [[total / 100] * DISCOUNT];
}
};
Bạn cũng có thể tạo một lớp CSS với tất cả các thuộc tính CSS cần thiết bên trong tab kiểu và sử dụng lớp đó bên trong hàm
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
1 trong trang tập lệnhTham khảo ví dụ dưới đây
.styleSummaryRow{
color: red;
font-weight: bold;
}
columns.age.setSummaryRowData[{
value: 'Total Salary',
class: 'styleSummaryRow'
}]
};
Hàng tóm tắt Chức năng không đồng bộ tùy chỉnh
Hàm javascript tính toán tóm tắt có thể gọi API để trả về kết quả của phép tính được thực hiện ở phía máy chủ. API này có thể là logic nghiệp vụ của ứng dụng. Ví dụ: khi tính chiết khấu được áp dụng, logic nghiệp vụ có thể chỉ định giá trị chiết khấu dựa trên người dùng đã đăng nhập hoặc số tiền, số tiền đã chi, v.v. Trong trường hợp này, hàm javascript sẽ trả về một giá trị
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
5 sau khi gọi APIDưới đây là ví dụ về hàm javascript tùy chỉnh gọi API và trả lại lời hứa cho
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
1Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData[[
'Net Total',
'Discount',
'Total'
]];
columns.netAmount.setSummaryRowData[[
netAmountAggregate.sum[],
DISCOUNT + '%',
calculateTotal[]
]];
function calculateTotal[] {
return new Promise[function[resolve, reject] {
Page.Variables.Total.invoke[].then[[data] => {
resolve[JSON.parse[data.body].budget];
}];
}];
}
};
Xử lý mức độ hiển thị của cột
Khả năng hiển thị của hàng-cột Tóm tắt có thể phụ thuộc vào khả năng hiển thị của cột thực tế. Nếu một cột được đặt thành không hiển thị trong thiết bị di động/máy tính để bàn, thì các cột hàng tóm tắt tương ứng cũng có thể cần phải ẩn đi. Sử dụng cài đặt ủy quyền trong WaveMaker, một cột có thể bị ẩn đối với các vai trò cụ thể của người dùng
Để Xử lý khả năng hiển thị của cột, hãy kiểm tra sự xuất hiện của cột trong thời gian chạy để xử lý các tình huống như vậy. Nếu một cột bị ẩn, nó sẽ không có sẵn trong giao diện cột trong thời gian chạy. Trong những trường hợp như vậy, hãy xem xét đoạn mã dưới đây
Page.DepartmentTable1Beforedatarender = function[widget, data, columns] {
const budgetAggregate = columns.budget.aggregate;
columns.budget.setSummaryRowData[budgetAggregate.sum[]];
if [columns.deptId] {
columns.deptId.setSummaryRowData["Total Budget"];
} else {
columns.name.setSummaryRowData["Total Budget"];
}
};
Tại đây, nếu cột
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
7 có trong bảng, thì nhãn "Tổng ngân sách" sẽ được hiển thị bên dưới cột tương ứng. Mặt khác, nó hiển thị dưới cột Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
8Kịch bản có thể phù hợp với yêu cầu trong đó cột
Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
7 hiển thị trên màn hình lớn hơn nhưng không có trên màn hình di động, trong khi cột Page.GroceriesTable1Beforedatarender = function[widget, data, columns] {
columns.item.setSummaryRowData[[
'Net Total',
'Discount'
]];
columns.netAmount.setSummaryRowData[[
'670',
'2%'
]];
};
8 hiển thị trên tất cả các màn hình