Re: Beautiful table.
Posted: Fri Mar 22, 2024 2:40 pm
I get errors when I use your header source.
In Setup -> Header: Place the JS code
In Setup -> Style: CSS code
In Setup -> Header: Place the JS code
In Setup -> Style: CSS code
Code: Select all
//<script src='libs/browse_total_rows.js' type='text/javascript'></script>
Code: Select all
</script>
<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);
}
});
}
function nuOnLoad() {
enableFormulaField();
}
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>
Code: Select all
/* Define your own styles, override styles from nubuilder4.css */
.nuBrowseTitle {
background-color: #FFFFB3;
height: 55px;
border-style: solid;
border-width: 1px;
position: absolute;
top: 3px;
font-size: 14px;
overflow: visible;
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
}
Code: Select all
// Сделать редактируемым Калькулятор (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);
}
});
}
function nuOnLoad() {
enableFormulaField();
}
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;
};
Code: Select all
<style>
/* Define your own styles, override styles from nubuilder4.css */
.nuBrowseTitle {
background-color: #FFFFB3;
height: 55px;
border-style: solid;
border-width: 1px;
position: absolute;
top: 3px;
font-size: 14px;
overflow: visible;
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>
Code: Select all
Uncaught ReferenceError: ApexCharts is not defined
at HTMLDocument.<anonymous> (<anonymous>:40:13)
at e (jquery-3.7.1.min.js?ts=1:2:27028)
at t (jquery-3.7.1.min.js?ts=1:2:27330)
jquery-3.7.1.min.js?ts=1:2
Code: Select all
<script src='core/libs/apexcharts/apexcharts.min.js'></script>