DHTMLX スイート v8.3 がリリースされました。 JavaScript UI ウィジェットライブラリの使用体験を深めます

DHTMLX UI コンポーネントライブラリを使用すると、クロスプラットフォーム、クロスブラウザの Web およびモバイルアプリケーションをより迅速に構築できます。これには、単一のアプリケーションインターフェイスに簡単に組み合わせることができる、すぐに使用できる HTML5 コンポーネントの豊富なセットが含まれています。

DHTMLX Suite v8.3 が最近正式にリリースされました。このアップデートには、JavaScript UI ウィジェットライブラリの使用エクスペリエンスを向上させるために設計された一連の新機能と改善が含まれています。たとえば、色の透明度レベルを設定する機能が Colorpicker ウィジェットに追加されました。 v8.3 では、自動高さモード、セル内の HTML コンテンツ、イベントハンドラーなどの一般的な Grid/TreeGrid 機能をヘッダーとフッターにのみ適用できます。

DHTMLX Suite v8.3 正式版のダウンロード

カラーピッカー - 色の透明度のオプション

DHTMLX Colorpicker は、フォームやポップアップなどのさまざまな UI 要素で色選択機能を有効にする便利なツールです。 v8.3 では、選択した色の透明度を指定できる豊富なカラーパレットでこのウィジェットを補完しました。

エンドユーザーがカラー透明度を使用できるようにするためにコードに何も追加する必要はありません。この機能は、Web ページ上に透明度スケールを表示する新しい透明度プロパティを通じてデフォルトで有効になっているためです。

UI を介して希望の色の透明度レベルを設定するには、以下の例に示すように、エンドユーザーは透明度スケール上のスライダーノブをドラッグするだけです。

DHTMLX スイート v8.3 製品ギャラリー

必要に応じて、透明度プロパティの値を false に設定することで、色の透明度機能を無効にすることができます。

const colorpicker = new dhx.Colorpicker("colorpicker", {
transparency: false
});

Grid と TreeGrid - 列ヘッダーとフッターの新機能

自動高度モード (PRO)

バージョン 8.1 では、Grid および TreeGrid ウィジェットで構築されたテーブルの行の自動高さモードが導入されました。新しい Suite バージョンでは、この機能がテーブル列のヘッダーとフッターに拡張されています。したがって、Grid/TreeGrid はコンテンツに基づいてヘッダー/フッターの高さを動的に調整し、ヘッダーとフッターにはさまざまな長さのテキストを含めることができ、エンドユーザーには完全に表示されます。

プログラムで、Grid/TreeGrid 構成オブジェクトに新しい headerAutoHeight パラメーターと footerAutoHeight パラメーターを追加して、ヘッダー/フッターの自動高さモードをアクティブにします。これらにより、共通の自動高さプロパティとは関係なく、ヘッダーまたはフッターの自動高さモードを切り替えることができます。

グリッドウィジェットでの実行方法は次のとおりです。

const grid = new dhx.Grid("grid", {
columns: [
...
],
...
autoHeight: false, // enables autoHeight in data (content)
headerAutoHeight: true, // enables autoHeight in header
footerAutoHeight: true, // enables autoHeight in footer
});

DHTMLX スイート v8.3 製品ギャラリー

この機能は DHTMLX Grid の PRO バージョンでのみ利用できることに注意してください。

テーブルに特定の固定高のヘッダーとフッターが必要な場合は、既存の headerRowHeight プロパティと footerRowHeight プロパティを使用してそれらを指定することもできることに注意してください。

イベントハンドラ

DHTMLX Suite 8.3 では、Grid/TreeGrid の列ヘッダーとフッターにイベントハンドラを追加する新しい便利な方法が提供されます。自分でイベントハンドラーをヘッダー/フッターにアタッチする代わりに、eventHandlers 属性を利用してこのタスクをより迅速に実行できるようになりました。以前はこのプロパティでデータセットに定義された HTML 要素または列セルのカスタムテンプレートにイベントハンドラーを追加することしかできませんでしたが、現在はヘッダー/フッターセルにも使用できるようになりました。

たとえば、ヘッダーのメインチェックボックスに onclick イベントを追加できます。このイベントは、チェックボックスがチェック済み/未チェックのマークが付けられ、列内のすべての下位チェックボックスが更新されたときに発生します。

const grid = new dhx.Grid("grid", {
columns: [
{
width: 60,
id: "paid",
header: [
{
text: `
<label class="dhx_checkbox dhx_cell-editor__checkbox ">
<input type="checkbox" class="dhx_checkbox__input dhx_checkbox--check-all">
<span class="dhx_checkbox__visual-input "></span>
</label>
`,
...// more options
],
...// more options
eventHandlers: {
onclick: {
"dhx_checkbox--check-all": function(event, data) {
grid.data.forEach(row => {
grid.data.update(row.id, {
[data.col.id]: event.target.checked,
});
});
}
},
},
});

DHTMLX スイート v8.3 製品ギャラリー

この新機能により、DHTMLX を使用して動的で対話型のデータテーブルを配信する機会が広がります。

ヘッダー/フッターセルの HTML コンテンツ

バージョン 8.3 では、自動高さモードとイベントハンドラーに加えて、列ヘッダー/フッターに Grid/TreeGrid 機能が追加されています。 htmlEnable 属性を使用して、これらのテーブル要素を任意の HTML コンテンツで補足できるようになりました。

たとえば、次のように htmlEnable 属性を適用してヘッダーセルのスタイルを変更できます。

const grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country", header: [
{
text: "<span style='font-size:16px; color: steelblue'>Country</span>",
htmlEnable: true,
}
]},
{ width: 150, id: "population", htmlEnable: true, header: [
{ text: "<span class='header-title'>Population</span>" }
...// other columns' configs
],
data: dataset,
htmlEnable: false,
});

DHTMLX スイート v8.3 製品ギャラリー

htmlEnable 属性を列のヘッダー (またはフッター) に適用すると、同じ構成の親列またはテーブル全体にすでに指定されている値が再定義されます。