nuBuilder Forum

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');

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)

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>