Beautiful table.

[kknm]

Is it possible to create group headings in tables?

header.png

[kev1n]

Here's a "sloppy" code that creates a group header above the first 2 columns.
You may need to adjust the top position a little and you will probably have to tweak it until everything fits the way you want it.

PS: Multi line titles must be set to "Yes".

group_header.jpg

Place in the form's custom code.

Code: Select all

function browseGroupColumns(firstColumnIndex, lastColumnIndex, caption) {

    // Initialize totalWidth to 0
    let totalWidth = 0;

    // Loop through the specified range of columns and sum their widths
    for (let i = firstColumnIndex; i <= lastColumnIndex; i++) {
        totalWidth += $('#nuBrowseTitle' + i).width();
    }

    // Create a new div element for the group header
    let newDiv = $('<div></div>')
        .html(caption) // Set the header text
        .css({
            'width': totalWidth + 'px', // Use the calculated total width
            'position': 'absolute'
            , 'text-align': 'center'
            , 'font-size': '13px'
            , 'color': '#0073aa'
            , 'font-weight': '600'
            , 'border-style': 'solid'
            , 'border-width': 'thin'
        });

    // Find the position of the first column
    const position = $('#nuBrowseTitle' + firstColumnIndex).position();

    // Find the original position of the first column
    const orgTop = $('#nuBrowseTitle0').attr('org-top') ? ? position.top;

    // Calculate the new top
    const newtop = (orgTop ? parseFloat(orgTop, 10) : position.top + 8);

    // Adjust the new div's position
    newDiv.css({
        'top': newtop + 'px', // Adjust this value as needed
        'left': position.left
    });

    // Insert the new div into the DOM before the first column title
    $('#nuBrowseTitle' + firstColumnIndex).before(newDiv);

    // Adjust the positions of titles to make room for the group header by moving them down
    $('.nuBrowseTitle').each(function() {

        if ($(this).attr('org-top') === undefined) {
            const currentTop = parseInt($(this).css('top'), 10);
            $(this).css('top', (currentTop + 24) + 'px') // Adjust this value as needed
                .attr('org-top', orgTop);
        }
    });

}

// Examples, how to use the function:

// Header above column 1 and 2:
browseGroupColumns(0, 1, 'Group Header 1');

// Header above column 3 and 4:
browseGroupColumns(2, 3, 'Group Header 2');

[kev1n]

Code updated.

[kknm]

This only works for the first group column, all subsequent group columns overlap the main native header.

And I would also like this function to be global, and not just for a specific form (browse).

headers.png

[kev1n]

Are you using the latest code? I've updated it 2-3 times.
Place the function in Setup->Header to make it accessible from everywhere.

[kknm]

Now it works correctly on the form, but does not work globally. How to check Setup-Header - the editor shows an error on the very first line </script>

[kknm]

Everything worked out - I removed outdated functions in the settings!!!
Thank you!!!

[kknm]

Unfortunately, I was in a hurry to rejoice...
When inserted into 'Settings-Header'
The function does not work globally - it is necessary to use it in at least one of the forms (browse) and launch this form. After this, the rest of the forms work correctly with group columns). If you do not insert a function into one of the forms, it reports an error:

Code: Select all

Uncaught ReferenceError: browseGroupColumns is not defined
    at <anonymous>:9:1
    at m (jquery-3.7.1.min.js?ts=1:2:880)
    at $e (jquery-3.7.1.min.js?ts=1:2:46274)
    at ce.fn.init.append (jquery-3.7.1.min.js?ts=1:2:47633)
    at nuAddJavaScript (nuform.js?ts=20240322160925:5381:12)
    at nuBuildForm (nuform.js?ts=20240322160925:167:3)
    at successCallback (nuajax.js?ts=20240322160925:131:4)
    at Object.success (nuajax.js?ts=20240322160925:15:41)
    at c (jquery-3.7.1.min.js?ts=1:2:25304)
    at Object.fireWith [as resolveWith] (jquery-3.7.1.min.js?ts=1:2:26053)

And in general, the work in 'Settings-Header' is incomprehensible - when inserted into different places, the work of previous scripts previously entered into it is disrupted.

[kev1n]

Please show your full header source.

[kknm]

Code: Select all

</script>

<style>

.nuBrowseTitle {
    background-color: #FFFFB3;
    height: 55px;
    border-style: solid;
    border-width: 1px;
    position: absolute;
    top: 3px;
    font-size: 14px;
    overflow: visible;
    //height: 40px;
    padding: 3px 5px 3px 5px;
    font-weight: bold
    }
.nuBrowseTable {
    height: 70px;
    border-style: solid;
    border-width: 1px;
    border-color: #D8D8D8;
    padding: 3px 5px 3px 5px;
    position: absolute;
    top: 75px;
    font-size: 14px;
    line-height: 150%;
    }
.nuTabHolder {
    background-color: #FFFFB3;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    border-color: lightgrey;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    font-weight: bold;
    }
.nuReadonly {
    background-color: white;
    border: 1px solid #ebebeb;
    }
.input_undefined.nuCalculator.nuEdited {box-shadow: 0 0 0 0px #fff, 0 0 0 1px #888;}    
</style>

<script>

//<script src='libs/browse_total_rows.js' type='text/javascript'></script>
function nuHeaderTest() {
    console.log('Functions placed here before a closing script tag are available anywhere in nuBuilder Forte');
}

// Сделать редактируемым Калькулятор (Object -> Calc Tab) not readonly
function enableFormulaField() {

    if (window.global_access) {
        if ((nuCurrentProperties().form_id == 'nuobject')) {
            $("#sob_calc_formula")
            .prop("readonly", false)
            .removeClass('nuReadonly');
        }
    }
}
function browseGroupColumns(firstColumnIndex, lastColumnIndex, caption) {

    // Initialize totalWidth to 0
    let totalWidth = 20;

    // Loop through the specified range of columns and sum their widths
    for (let i = firstColumnIndex; i <= lastColumnIndex; i++) {
        totalWidth += $('#nuBrowseTitle' + i).width();
    }

    // Create a new div element for the group header
    let newDiv = $('<div></div>')
        .html(caption) // Set the header text
        .css({
            'width': totalWidth + 'px', // Use the calculated total width
            'position': 'absolute'
            , 'text-align': 'center'
            , 'font-size': '13px'
            , 'color': '#0073aa'
            , 'font-weight': '600'
            , 'border-style': 'solid'
            , 'border-width': 'thin'
        });

    // Find the position of the first column
    const position = $('#nuBrowseTitle' + firstColumnIndex).position();

    // Find the original position of the first column
    const orgTop = $('#nuBrowseTitle0').attr('org-top') ? ? position.top;

    // Calculate the new top
    const newtop = (orgTop ? parseFloat(orgTop, 10) : position.top + 8);

    // Adjust the new div's position
    newDiv.css({
        'top': newtop + 'px', // Adjust this value as needed
        'left': position.left
    });

    // Insert the new div into the DOM before the first column title
    $('#nuBrowseTitle' + firstColumnIndex).before(newDiv);

    // Adjust the positions of titles to make room for the group header by moving them down
    $('.nuBrowseTitle').each(function() {

        if ($(this).attr('org-top') === undefined) {
            const currentTop = parseInt($(this).css('top'), 10);
            $(this).css('top', (currentTop + 24) + 'px') // Adjust this value as needed
                .attr('org-top', orgTop);
        }
    });

}

// Examples, how to use the function:

// Header above column 1 and 2:
browseGroupColumns(0, 1, 'Group Header 1');

// Header above column 3 and 4:
browseGroupColumns(2, 3, 'Group Header 2');

function nuOnLoad() {
    enableFormulaField();
}
//скрыть колонку iFrame
function hideBrowseColumn(column) {
    var cw = parent.$("#" + window.frameElement.id)[0].contentWindow;
    cw.nuFORM.breadcrumbs[cw.nuFORM.breadcrumbs.length - 1].column_widths[column] = 0;
    cw.nuSetBrowserColumns(cw.nuFORM.breadcrumbs[cw.nuFORM.breadcrumbs.length - 1].column_widths);
}

function increaseBrowseTitleHeight() {
    // Increase holder height
    $('#nuActionHolder').css({
        'height': '40px'
    });
    // Increase title height
    var t = -20;
    $('.nuBrowseTitle').not('#nuBrowseFooter').css('top', t);
}

function increaseFrameTitleHeight() {
    $('#nuBreadcrumbHolder').css({
        'height': '40px'
    });
    // Increase title height
    var t = -20;
    $('.nuBrowseTitle').not('#nuBrowseFooter').css('top', t);
}

jQuery.fn.cssNumber = function(prop) {
    var v = parseInt(this.css(prop), 10);
    return isNaN(v) ? 0: v;
};

// <script src="core/libs/apexcharts/apexcharts.min.js"

</script>

<script>