html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Training</title>
    <link rel="stylesheet" href="/static/webix/webix.min.css">
    <script src="/static/webix/webix.min.js"></script>
</head>
<body>
<script>
    webix.ui({
				rows: [
					{
						autoheight: false,
						view: 'form',
						id: 'form1',
						height: 217,
						rows: [
							{ view: 'text', label: 'Username', name: 'username' },
							{ view: 'text', label: 'Email', name: 'email' },
							{
								id: 'button_save',
								view: 'button',
								css: 'webix_primary',
								label: 'Save',
							},
						],
					},
					{
						columns: [
							{
								id: 'username',
								header: 'Username',
								fillspace: true,
								hidden: false,
							},
							{
								id: 'email',
								header: 'Email',
								fillspace: true,
								hidden: false,
							},
						],
						view: 'datatable',
						id: 'table1',
					},
				],
			});

			let form1 = $$('form1');
			let button_save = $$('button_save');
			let table1 = $$('table1');

			webix
				.ajax()
				.get('/select')
				.then((data) => {
					let response_data = data.json;
					response_data.data.forEach((record) => {
						table1.add(record);
					});
				});

			button_save.attachEvent('onItemClick', () => {
				let form_data = form1.getValues();
				webix
					.ajax()
					.post('/insert', form_data)
					.then((data) => {
						let response_data = data.json();
						webix.alert(response_data.message);
					});
			});
</script>
</body>
</html>
Editor is loading...