Hàng tóm tắt bảng HTML

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ắt

Bạ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

• Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
      columns.item.setSummaryRowData([
          'Net Total',
          'Discount'
      ]);
      columns.netAmount.setSummaryRowData([
          '670',
          '2%'
      ]);
  };
  

  1

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 percentage

Cá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ưới

Page.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ệnh

Tham 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 API

Dướ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%'
    ]);
};

1

Page.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

ghi chú

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%'
    ]);
};

8

Kị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

Bảng tóm tắt trong HTML là gì?

TD vs TR trong HTML là gì?

TD vs TR là gì?

Thuộc tính tóm tắt của thẻ bảng là gì?