Изменение размеров

В этой статье вы узнаете, как устанавливать и изменять размеры для 3 разных элементов DataTable:

Контейнера DataTable,
Столбца,
Строки

в 3 ситуациях (сценариях):

Установка фиксированного размера
Автоматическое определение размера
Ресайзинг

Использование размеров в таблицах также рассмотрено в туториалах Webix.

Требования к значению

Ширина и высота таблицы должны устанавливаться как числовое значение. Использование строковых значений некорректно и приведет к ошибкам в логике.

webix.ui({
    view:"datatable",
    height:400,
    width:300
});

Установка фиксированного размера

Контейнер DataTable

По умолчанию DataTable подстраивается к размер родительского контейнера, что дает нам два способа установки фиксированного размера:

Задать размер для родительского контейнера 'div';
Использовать параметры width и height внутри конструктора DataTable.

Установка фиксированного размера для DataTable

// способ 1
<div id="box" style="width:300px;height:400px;"></div>
 
webix.ui({
    container:"box",
    view:"datatable",
    // конфигурация datatable
});
 
// способ 2
<div id="box"/>
 
webix.ui({
    container:"box",
    view:"datatable",
    height:400,
    width:300,
    // другие настройки конфигурации
});

Столбец

Фиксированная ширина столбца

По умолчанию ширина столбцов равна 100px и не может быть изменена с помощью пользовательского интерфейса.

Вы можете изменить значение для определенного столбца или всей таблицы.

Чтобы изменить размер определенного столбца, используйте:

width, чтобы установить ширину столбца индивидуально;
minWidth в конфигурации столбца, чтобы определить для него минимальную ширину. Ширина компонента никогда не будет меньше minWidth при изменении его размера через интерфейс или после изменения размера окна браузера. Если места слишком много для minWidth, компонент начнет увеличиваться.
maxWidth в конфигурации столбца, чтобы определить для него максимальную ширину. Ширина компонента никогда не превысит maxWidth при изменении его размера через интерфейс или после изменения размера окна браузера. Если места для maxWidth не хватает, компонент начнет уменьшаться.

Вы можете использовать следующие свойства, чтобы изменить все столбцы таблицы:

columnWidth - задает ширину столбца по умолчанию (в пикселях). Как и общая ширина по умолчанию, может быть переопределена значением свойства width, установленного для определенного столбца;
minColumnWidth - задает минимальную ширину для всех столбцов. Может быть переопределено значением свойства minWidth, установленного для определенного столбца;
maxColumnWidth - задает максимальную ширину для всех столбцов. Может быть переопределено значением свойства maxWidth, установленного для определенного столбца.

Установка разной ширины для столбцов

webix.ui({
    view:"datatable",
    columns:[
        { id:"title", header:"Film title" ,   width:80},
        { id:"title", header:"Release year" , maxWidth:100}
    ]
});

Изменение общей ширины для столбцов

webix.ui({
    view:"datatable",
    columnWidth:200,
    columns:[
        { id:"title", header:"Film title"},
        { id:"title", header:"Release year"}
    ]
});

Относительные размеры

подстраивание ширины таблицы к родительскому контейнеру

Если сумма значений ширины всех столбцов меньше ширины родительского контейнера, вы можете использовать атрибут fillspace, чтобы позволить одному из столбцов заполнить неиспользуемое свободное пространство.

Использование атрибута fillspace

webix.ui({
    view:"datatable",
    columns:[
        { id:"title", header:"Film title", fillspace:true},
        // больше столбцов
    ]
});

подстраивание ширины столбца к ширине других столбцов таблицы

Для таблицы может быть установлено больше одного fillspace. Вы можете задать fillspace как число. Ширина таблицы будет пропорционально поделена между столбцами:

webix.ui({
    view:"datatable",
    columns:[
        { id:"id", header:"ID", fillspace:1},
        { id:"title", header:"Film title", fillspace:4}
    ]
});

В коде выше столбец title в 4 раза выше, чем столбец id, т.е их соотношение 20% к 80%.

подстраивание ширины столбца к его содержимому

Если вы хотите подстраивать ширину столбца под размер его содержимого, используйте атрибут adjust. Атрибут определяется для нужного столбца и может принимать следующие значения:

"data" - подстраивает ширину столбца под длину самой длинной строки в этой колонке;
"header" - подстраивает ширину столбца под ширину хедера;
true - подстраивает под ширину того, что из предыдущих двух больше по размеру.

Подстраивание ширину столбца под ширину его содержимого

webix.ui({
    view:"datatable",
    columns:[
        { id:"title", header:"Film title", adjust:"data"},
        { id:"rank", header:"Rank", adjust:"header"},
        { id:"votes", header:"Votes", adjust:true}
        // больше столбцов
    ]
})

Обратите внимание, итоговая ширина столбца после подстраивания не должна быть меньше значения minWidth и больше maxWidth, если они установлены.

Если у вас большой набор данных, вы можете ограничить число строк, которые примут участие в подсчете максимальной ширины столбца. Для этого применяется атрибут adjustBatch в конфигурации столбца. Свойство работает совместно с настройками adjust:"data" или adjust:true.

webix.ui({
  rows:[
    { view:"datatable",
     columns:[
       {id:"id"},
       {id:"title", adjust:"data", adjustBatch:50},
       {id:"title", adjust:true}
     ],
     //большой набор данных
     data:grid_data
    }
  ]
});

Строка

Чтобы установить фиксированную высоту для строки, используйте $height во время задания данных для загрузки в DataTable. Если вы задаете высоту таким образом, значения сохранятся независимо от других установленных параметров размера (например autoheight).

Вы также должны задать настройку fixedRowHeight:false для таблицы, чтобы избежать ошибок при прокрутке или размещении редакторов.

Установка разной высоты для строк

webix.ui({
    view:"datatable",
    fixedRowHeight:false,
    data:[
        { $height:20, id:1, title:"The Shawshank Redemption", year:1994},
        { $height:40, id:2, title:"The Godfather",            year:1972},
        // другие поля данных
    ]
});

Автоматическое определение размера

Авторазмер для родительского контейнера

DataTable автоматически подстраивается под размер родительского контейнера при условии, что автоматический размер содержимого не включен.

Чтобы позволить DataTable заполнить всю ширину, задайте fillspace хотя бы для одного из столбцов:

webix.ui({
    view:"datatable",
    columns:[
        { id:"title", header:"Film title", fillspace:true},
        { id:"year", header:"Year", width:100}
    ]
});

В этом случае столбец title будет подсчитан как ширина контейнера - 100.

Авторазмер для содержимого

Вы можете установите автоматический размер для ширины, высоты (или ширины и высоты), чтобы адаптировать DataTable к размеру его содержимого вертикально или горизонтально. Автоматический размер задается с помощью следующих параметров:

autowidth;
autoheight.

Автоматический размер для DataTable

webix.ui({
    view:"datatable",
    autoheight:true,
    autowidth:true
});

Изменения размеров пользователем

Ресайзинг с помощью мыши

Чтобы добавить возможность изменять размер столбцов (строк) с помощью мыши, используйте один из следующих параметров (или оба):

resizeRow;
resizeColumn.

Добавление возможности изменять размер столбцов и строк с помощью мыши

webix.ui({
    view:"datatable",
    resizeColumn:true,
    resizeRow:true
});

Для этих вариантов изменения размера существуют соответствующие события onRowResize и onColumnResize.

Related sample: Column and Row Resizing

В Material skin вам необходимо указать границы столбцов, чтобы визуализировать области ресайзинга, указав соответствующие классы CSS. Подробнее.

Установить размер области где срабатывает ресайзинг

Чтобы определить область срабатывания ресайзинга, используйте параметр resizeRow или resizeColumn и передайте им объект со свойством size:

webix.ui({
    view:"datatable",
    resizeColumn: {size: 6},
    resizeRow: {size: 6}
});

Related sample: Size of Resize Area

Ресайзинг хедера

Еще одна возможность ресайзинга - это ограничение области срабатывания хедером таблицы.

Задайте параметер resizeRow или resizeColumn и передайте им объект с настройкой headerOnly:true:

webix.ui({
    view:"datatable",
    resizeColumn: {headerOnly:true},
    resizeRow: {headerOnly:true}
});

Как запретить менять ширину определённого столбца

Чтобы запретить менять ширину определённого столбца, укажите его свойству resize значение false:

webix.ui({
  view:"datatable",
  // разрешаем менять ширину столбцов
  resizeColumn: true,
  columns:[
    // запрещаем менять ширину столбца "rank"
    { id:"rank", resize:false, header:"", css:"rank", width:50},
    { id:"title", header:"Film title",  fillspace:true},
    { id:"year", header:"Year", width:80},
    { id:"votes", header:"Votes", width:100}
  ],
});

Изменение размеров с помощью API

Для динамического ресайзинга элементов DataTable библиотека предлагает метод resize(). Когда вы измените размер определенного элемента и вызываете метод, вложенный (родительский) контейнер вызываемого элемента подстроится под новый размер.

Подстраивание родительского контейнера под размер the DataTable size

grid = webix.ui({
    view:"datatable",
    // конфигурация datatable
})
 
grid.define("width", 700);
grid.resize();

В некоторых ситуациях вам может понадобится подстроить размер элемента к размеру внешнего родительского HTML-контейнера. Для этого вместо resize() используйте метод adjust():

Подстраивание DataTable к размеру родительского контейнера

var grid = webix.ui({
    container:"box",
    view:"datatable",
    // конфигурация datatable
});
 
webix.toNode("box").style.width = "700px";
grid.adjust();

Методы resize() и adjust() приводят к одному результату. Например, у вас есть DataTable, помещенный в контейнер 'div' c именем 'box'. Исходная высота DataTable - 50 px. Вам нужно увеличить ее до 80 px. Возможное решение представлено ниже:

Изображение Код

**Таблица 1** Использование методов adjust() и resize()
Изображение	Код
	`document.getElementById('box') .style.height="80px"; grid.adjust();`
	`grid.define("height", 80); grid.resize();`

document.getElementById('box')
.style.height="80px";
 
grid.adjust();

grid.define("height", 80);
grid.resize();

Вы можете использовать обработчики событий для вызова упомянутых методов:

Подстраивание DataTable к размеру окна, в которое он помещен

webix.event(window, "resize", function(){
    grid.adjust();
});

Related sample: Sizing and Events

Подстраивание столбцов и строк

Чтобы динамически адаптировать ширину столбца и высоту строки к размеру их содержимого, вы можете использовать соответствующее Datatable API.

Подстроить ширину столбца

Метод adjustColumn(id) подстраивает ширину указанных по ID столбцов.

Метод принимает два параметра:

id - (string,number) ID столбца;
mode - (string) необязательный параметр, режим подстраивания ("header", "data", "all").

datatable.adjustColumn("title");
datatable.adjustColumn("title", "header");

Режимы подстраивания:

header - подстраивает ширину столбца к ширине его хедера;
data (по умолчанию) - подстраивает ширину столбца к ширине его содержимого;
all - комбинирует оба режима, выбирая наибольшее значение.

Подстроить высоту строки

Метод adjustRowHeight(id) подстраивает высоту всех строк, основанную на содержимом ячеек к определенному столбцу или всем столбцам.

Метод может замедлить приложение.

Метод может принимать два параметра:

columnId - (string) ID столбца
silent - (boolean) применяет метод без перерисовки

Установите значение false свойству fixedRowHeight для таблицы, иначе вы не получите визуального результаты работы метода.

webix.ui({
    view:"datatable",
    fixedRowHeight:false,
    columns:[
        { id:"title", header:"Film title", fillspace:true},
        { id:"year", header:"Year", width:100}
    ]
});
 
// подстроить высоту каждой строки к
// к высоте ячейки столбца "title"
dtable.adjustRowHeight("title");
 
// подстроить высоту каждой строки к высоте самой высокой ячейки в ней
dtable.adjustRowHeight();

Высота строки подстраивается к:

высоте ячейки в столбце, которая определена параметром columnId;
высоте самой большой ячейки в строке, при установленном columnId.

Если вы хотите применить автоматический размер после загрузки страницы, вы можете использовать следующий код:

webix.ui({
    view:"datatable",
    columns:[
        { id:"rank",    width:40,   header:"", css:"rank"},
        { id:"title",   width:380,  header:"Film title" },
        { id:"year",    width:160,  header:"Released"   },
        { id:"votes",   width:120,  header:"Votes"      }
    ],
    fixedRowHeight:false,
    on:{
        "onresize":webix.once(function(){
            this.adjustRowHeight("title", true);
        })
    }
});

Related sample: Row Auto-Height

Прокрутка

По умолчанию в DataTable включена прокрутка (вертикальная и горизонтальная). Чтобы ее отключить, используются параметры scrollY и scrollX.

Отключение вертикального скролла

webix.ui({
    view:"datatable",
    scrollY:false
});

Вы также можете установить прокрутку DataTable целыми строками, то есть вы не сможете прокручивать строки по длине. Для этого используйте параметр scrollAlignY:

Прокрутка целыми строками

webix.ui({
    scrollAlignY:true
});

Наверх

If you have not checked yet, be sure to visit site of our main product Webix javascript framework and page of web datagrid product.