{"id":324876,"date":"2021-06-14T09:00:36","date_gmt":"2021-06-14T09:00:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=324876"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=324876","title":{"rendered":"Webix Datatable. \u041e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043a \u0441\u043b\u043e\u0436\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e"},"content":{"rendered":"\n
\n
<\/figcaption><\/figure>\n

\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043f\u0440\u0438\u0432\u044b\u043a \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438. \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u043b\u0430\u0434\u0435\u0435\u0442\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0442\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u0437\u0430\u0431\u0430\u0432\u043d\u044b\u043c \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u0435\u043c. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043d\u0435\u043e\u0440\u0434\u0438\u043d\u0430\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Webix. \u0420\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043e \u0442\u0430\u043a\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Webix UI \u043a\u0430\u043a DataTable. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0447\u0435\u043c \u0435\u0433\u043e \u0441\u0438\u043b\u0430.<\/p>\n

\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Webix \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 DataTable<\/h2>\n

Webix UI<\/a> \u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f JavaScript \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 ui \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0414\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0435\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438. \u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u041e\u0431\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u043e\u043c \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a>. <\/p>\n

\u0412\u0438\u0434\u0436\u0435\u0442 DataTable<\/u><\/a> — \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Webix. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446 \u0438 \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043a\u043e \u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c. \u042d\u0442\u043e\u0442 \u043c\u043e\u0449\u043d\u044b\u0439 \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u043e \u0441\u0442\u0438\u043b\u044c\u043d\u044b\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u0445 (XML, JSON, CSV, JSArray, HTML tables<\/em>) \u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u043e\u0431\u044a\u0435\u043c\u0430\u043c\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0421\u0435\u043a\u0440\u0435\u0442 \u0435\u0433\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u043c «\u043b\u0435\u043d\u0438\u0432\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445». \u042d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0435\u043c\u0443 \u043b\u0435\u043d\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u0425\u043e\u0442\u044f, \u0431\u0435\u0437 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u0439, \u043a\u0440\u0443\u043f\u0438\u0446\u0430 \u043f\u0440\u0430\u0432\u0434\u044b \u0432 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c. \u0421\u0443\u0442\u044c \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 1 000 000 \u0440\u044f\u0434\u043e\u0432, \u0432\u044b\u0434\u0436\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0434\u0438\u043c\u044b\u0435 \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u0440\u0435\u0434\u0438 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432 \u0432\u0438\u0434\u0436\u0435\u0442 \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u043c\u0435\u0441\u0442\u043e \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. <\/p>\n

\u041f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e, DataTable \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u043e\u043c API \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438, \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432, \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0444\u0438\u0448\u0435\u043a. \u0412\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 DataTable \u043d\u0435\u0437\u0430\u043c\u0435\u043d\u0438\u043c\u044b\u043c \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u043e\u043c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n

\u041c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u043e\u0431 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 Webix \u0438 \u0438\u0445 \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043d\u043e \u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0442\u0435\u0442\u0438\u043a\u0443 \u043e\u0440\u0430\u0442\u043e\u0440\u0430\u043c \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u043c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431 \u0430\u0440\u0435\u043d\u0434\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0435\u0439. \u041d\u0430 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u0438\u043c \u043c\u043e\u0449\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c. \u0423\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 «\u0421\u043e\u0437\u0434\u0430\u0435\u043c Booking \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 Webix UI<\/a>«. <\/p>\n

\u0421 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0442\u0443\u0442<\/u><\/a>.<\/p>\n

\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/h2>\n

\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Webix \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0435 \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 index.html<\/em>. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 2 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438: \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0438 Pro-\u0432\u0435\u0440\u0441\u0438\u044f. \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 Pro<\/strong>-\u0432\u0435\u0440\u0441\u0438\u0435\u0439. \u041c\u044b \u0436\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u043e\u0439 Pro<\/strong>-\u0432\u0435\u0440\u0441\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 DataTable. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0447\u0435\u0440\u0435\u0437 CDN \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0430\u043c: <\/p>\n

<script type=\"text\/javascript\" src=\"http:\/\/cdn.webix.com\/site\/webix.js\"><\/script> <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/cdn.webix.com\/site\/webix.css\"><\/code><\/pre>\n
\u041d\u0430\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u0432 \u0444\u0430\u0439\u043b index.html <\/em>\u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a:<\/p>\n
<!DOCTYPE html> <html>   <head>     <title>Webix Booking<\/title>     <meta charset=\"utf-8\">     <!--Webix sources -->     <script type=\"text\/javascript\" src=\"http:\/\/cdn.webix.com\/site\/webix.js\"><\/script>     <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/cdn.webix.com\/site\/webix.css\">\t\t   <\/head>   <body>     <script type=\"text\/javascript\">       \/\/...     <\/script>   <\/body> <\/html><\/code><\/pre>\n
\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u0433\u0438 <script>…<\/script><\/em><\/strong>, <\/em>\u0433\u0434\u0435 \u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n
\u0412\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 webix.ui()<\/strong>. \u041d\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432 webix.ready(function(){})<\/strong>. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
webix.ready(function(){   webix.ui({     \/*\u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f*\/   }); });<\/code><\/pre>\n
\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 index.html<\/em> \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 DataTable. <\/p>\n
\u0421\u0438\u043b\u0430 \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0435<\/h2>\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442 \u0438 \u043d\u0435 \u0433\u043e\u0440\u0438\u0442\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0442\u043e \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0441\u0430\u043c\u044b\u0439 \u201c\u043b\u0435\u043d\u0438\u0432\u044b\u0439\u201d \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0412 \u0444\u0430\u0439\u043b\u0435 datatable.js<\/em> \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043a\u043e\u0434\u0430:<\/p>\n
const datatable = {   view:\"datatable\",   autoConfig:true,   url:\".\/data\/data.json\" }<\/code><\/pre>\n
\u0421\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 DataTable \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f view:»datatable».<\/strong> \u0427\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e url <\/strong>\u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u043f\u0443\u0442\u044c, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u0438\u0434\u0436\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435. \u0421\u0442\u043e\u0438\u0442 \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON. \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 (xml, jsarray \u0438\u043b\u0438 csv<\/em>), \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e datatype<\/strong>. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e data <\/strong>\u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 parse().<\/strong><\/p>\n
\u041e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u0442 \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 autoConfig, <\/strong>\u043a\u043e\u0442\u043e\u0440\u043e\u0435 <\/strong>\u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043b\u0435\u043d\u0438\u0432\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u043c \u0438 \u0440\u044f\u0434\u0430\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0423\u0434\u043e\u0431\u043d\u0435\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c. <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0436\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430, \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e datatable<\/em><\/strong>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 index.html<\/em>.<\/p>\n
\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c DataTable \u0432 \u0444\u0430\u0439\u043b\u0435 index.html<\/em>:<\/p>\n
<!--App sources --> <script src=\"js\/datatable.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script><\/code><\/pre>\n
\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430:<\/p>\n
<script type=\"text\/javascript\">  webix.ready(function(){   webix.ui( datatable );  }); <\/script><\/code><\/pre>\n
\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
\"A\u0432\u0442\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\"
A\u0432\u0442\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/figcaption><\/figure>\n
\u0412\u043e\u0442 \u0442\u0430\u043a, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e 3 \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u0435, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0430\u0432\u0442\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043c\u0430\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0413\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n
\u0422\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/h2>\n
\u0415\u0441\u043b\u0438 \u0430\u0432\u0442\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0443\u0436 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c, \u0442\u043e\u0433\u0434\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 columns:[ ]. <\/strong>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u0421\u0442\u043e\u0438\u0442\u044c \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435.<\/p>\n
\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 id.<\/strong> \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0443, <\/strong>\u043f\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 (\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/em>). \u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u201c\u0448\u0430\u043f\u043a\u0438\u201d \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 header. <\/strong><\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0442\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u043a width<\/strong>, minWidth<\/strong>, maxWidth<\/strong> \u0438 fillspace<\/strong>. \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u0434 \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0435\u0439 \u043c\u0435\u0441\u0442\u043e, \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e fillspace<\/strong> \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
{   view:\"datatable\",   columns:[     { id:\"rank\", header:\"Rank\", width:45 },     \/\/...     { id:\"vin_code\", header:\"VIN\", minWidth:50, width:180, maxWidth:300 },     \/\/...     { id:\"address\", header:\"Address\", minWidth:200, fillspace:true },     \/\/...   ],   url:\".\/data\/data.json\" }<\/code><\/pre>\n
\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
\"\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435
\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/figcaption><\/figure>\n
\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u043d\u0430\u043c\u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u0430 \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 header<\/strong>.<\/p>\n
\u041f\u043e\u043c\u0438\u043c\u043e \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0448\u0438\u0440\u0438\u043d\u044b<\/em> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e autowidth, <\/strong>\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043a \u0441\u0443\u043c\u043c\u0430\u0440\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e columnWidth<\/strong>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0434\u0430\u0435\u0442 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0442\u043e\u043b\u0431\u0446\u0430  \u0440\u0430\u0432\u043d\u0430 100px.<\/p>\n
\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 resizeColumn<\/strong> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 true, <\/em><\/strong>\u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u0440\u044f\u0434\u043e\u0432, \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0438 \u0438\u0445 \u0445\u0435\u0434\u0435\u0440\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 css<\/strong>:«webix_data_border webix_header_border».<\/strong><\/p>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 scroll<\/strong>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 false<\/strong>. \u041d\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u201cxy\u201d.<\/strong><\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u044f \u0438\u0445 \u043f\u0440\u0430\u0432\u0443\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/p>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044f\u0447\u0435\u0435\u043a<\/h2>\n
\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438<\/h4>\n
\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u044f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043b\u044e\u0447 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 id<\/strong> \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u0430. \u041d\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 template <\/strong>\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u044f\u0447\u0435\u0439\u043a\u0435. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u0442\u0430\u043a \u0438 \u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0438\u0445 \u043a\u043b\u044e\u0447 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a #data_key#. <\/strong>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b. <\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u043f\u043e\u0436\u0430\u043b\u0443\u0439 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430, \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u0435\u043a. \u0423 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0440\u0435\u0437\u043e\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441\u043e \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430\u043c\u0438? \u0410 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043c\u043e\u0433 \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0435\u043c\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442-\u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0442\u0430\u043a:<\/p>\n
{   view:\"datatable\",   id:\"car_rental_table\",   \/\/...   columns:[     { id:\"stared\", header:\"\",      template:function(obj){        return `<span class='webix_icon star mdi mdi-\"+(obj.star ? \"star\" : \"star-outline\") + \"'><\/span>`;      }, ...,     },      \/\/...   ] }<\/code><\/pre>\n
\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0443 template<\/strong> \u043c\u044b \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 span<\/em><\/strong> \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438. \u041a\u043b\u0430\u0441\u0441\u044b \u201cstar\u201d \u0438 \u201cstar-outline\u201d \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0438\u043a\u043e\u043d\u043a\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430:<\/p>\n
function selectStar(id){   const table = $$(\"car_rental_table\");   const item = table.getItem(id);   const star = item.star?0:1;   item.star = star; }<\/code><\/pre>\n
\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 id<\/strong> \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u044f\u0434\u0430. \u0427\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 $$(«car_rental_table»)<\/strong> \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0432\u0438\u0434\u0436\u0435\u0442\u0443 \u043f\u043e \u0435\u0433\u043e id<\/strong>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b getItem(), <\/strong>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 id <\/strong>\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <\/strong>\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u044f\u0434\u0430. \u0417\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043a\u043b\u044e\u0447\u0430 star <\/strong>\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 0 (\u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442<\/em>) \u043b\u0438\u0431\u043e 1 (\u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043d\u0435\u0442<\/em>).<\/p>\n
\u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0438\u043a\u043e\u043d\u043a\u0435 \u0441\u043e \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u043e\u0439. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c css<\/strong> \u043a\u043b\u0430\u0441\u0441\u043e\u043c, \u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e onClick<\/strong>:<\/p>\n
\/\/... url:\".\/data\/data.json\", onClick:{   \"star\":(e,id) => selectStar(id) }, \/\/...<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043c\u0435\u0447\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0440\u044f\u0434\u044b \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0435 \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
\"\u0428\u0430\u0431\u043b\u043e\u043d
\u0428\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0441\u043e \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430\u043c\u0438<\/figcaption><\/figure>\n
\u041d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0443 \u043d\u0430\u0441 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c  \u201cAvailable\u201d. \u0412 \u0435\u0433\u043e \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f true<\/strong> \u0438 false<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u201cYes\u201d \u0438\u043b\u0438 \u201cNo\u201d.<\/p>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043d\u0430 \u0442\u0430\u043a:<\/p>\n
function customCheckbox(obj, common, value){   if(value){     return \"<span class='webix_table_checkbox checked'> YES <\/span>\";   }else{     return \"<span class='webix_table_checkbox notchecked'> NO <\/span>\";   } }<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u201cAvailable\u201d:<\/p>\n
columns:[   \/\/...   { id:\"active\", header:\"Available\", template:customCheckbox, ...,}, ]<\/code><\/pre>\n
\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n
\"\u0428\u0430\u0431\u043b\u043e\u043d
\u0428\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 «Available»<\/figcaption><\/figure>\n
\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u043f\u0435\u0440\u0432\u044b\u0445 \u0442\u0440\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u0430\u0445 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043d\u0430 \u0432\u0438\u0434\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e leftSplit <\/strong>\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 3<\/em>). \u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u0435. <\/p>\n
\u0410 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u043c \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u201cColor\u201d. \u0415\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 HEX \u043a\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0446\u0432\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044f. \u0414\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0442\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438. \u0418 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
columns:[   \/\/...   { id:\"color\", header:\"Color\", template:`<span style=\"background-color:#color#;  border-radius:4px; padding-right:10px;\">&nbsp<\/span> #color#`},   \/\/... ]<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u0434\u0430\u0435\u043c \u0444\u043e\u043d \u043d\u0435\u0440\u0430\u0437\u0440\u044b\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0431\u0435\u043b\u0430 (&nbsp<\/em>) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e HEX \u043a\u043e\u0434\u0430.<\/p>\n
\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n
\"\u0428\u0430\u0431\u043b\u043e\u043d
\u0428\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 «Color»<\/figcaption><\/figure>\n
\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438 <\/h4>\n
\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u0435\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 id <\/strong>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0438\u0445 \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u044d\u0442\u043e \u043c\u0430\u043b\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u043e. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u0430 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439. <\/p>\n
\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c «\u0421ar make», \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043c\u0430\u0440\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0435\u0439. \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0435\u0433\u043e \u044f\u0447\u0435\u0435\u043a \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u0435\u043b \u043e\u0442 1 \u0434\u043e 24 \u043f\u043e\u0434 \u043a\u043b\u044e\u0447\u0435\u043c «car_make»:<\/p>\n
\/\/data.json [   { \"id\":1, \"rank\":1, \"car_make\":22, ..., \"country\":1, \"company\":1, ..., },   { \"id\":2, \"rank\":2, \"car_make\":10, ..., \"country\":2, \"company\":3, ..., },   { \"id\":3, \"rank\":3, \"car_make\":16, ..., \"country\":1, \"company\":2, ..., },   \/\/... ]<\/code><\/pre>\n
\u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u0430 \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u0435 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u044d\u0442\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
\/\/car_make.json [   { \"id\":22, \"value\":\"Toyota\" }, ...,   { \"id\":10, \"value\":\"GMC\" }, ...,   { \"id\":16, \"value\":\"Mazda\" }, ...,   \/\/... ]<\/code><\/pre>\n
\u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e collection<\/strong> \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u043c\u0443 \u043f\u0443\u0442\u044c \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443 (\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438<\/em>):<\/p>\n
columns:[   \/\/...   { id:\"car_make\", header:\"Car make\", collection:\".\/data\/car_make.json\", ...,},   \/\/... ]<\/code><\/pre>\n
\u0412\u043e\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u043c\u0435\u0441\u0442\u043e \u0447\u0438\u0441\u043b\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u201cCar make\u201d \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439. \u041f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u043c\u044b \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u201cCompany\u201d, \u201cCountry\u201d \u0438 \u201cCard\u201d.<\/p>\n
\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n
\"\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438
\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/figcaption><\/figure>\n
\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n
\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0435 \u0440\u0435\u0434\u043a\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0445 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u0430 \u044d\u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e format. <\/strong>\u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0447\u0438\u0441\u0435\u043b \u0438 \u0434\u0430\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0441 \u0434\u0430\u0442\u0430\u043c\u0438 \u0438 \u0446\u0435\u043d\u043e\u0439 \u0437\u0430\u043a\u0430\u0437\u0430:<\/p>\n
columns:[   \/\/...   { id:\"date\", header:\"Date\", format:webix.i18n.longDateFormatStr, ..., },   { id:\"price\", header:\"Price\", format:webix.i18n.priceFormat, ..., },   \/\/... ]<\/code><\/pre>\n
\u0414\u0430\u043d\u043d\u044b\u0435 \u043e \u0434\u0430\u0442\u0430\u0445 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a \u201c05\/26\/2021\u201d. \u041d\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u0442\u0443 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u201c26 May 2021\u201d. \u041c\u0435\u0442\u043e\u0434 webix.i18n.longDateFormatStr<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u201cDate\u201d, \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 Date <\/strong>\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435. <\/strong>\u041d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a\u0443 \u0442\u0438\u043f\u0430 \u201c05\/26\/2021\u201d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c.<\/strong> \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 Date<\/strong> \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e scheme. <\/strong>\u0412 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 webix.i18n.dateFormatDate. <\/strong>\u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
{   view:\"datatable\",   \/\/...   scheme:{     $init:function(obj){       obj.date = webix.i18n.dateFormatDate(obj.date)     }   },   columns:[...] }<\/code><\/pre>\n
\u0421 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0430\u0442\u044b \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0435\u043d\u0443 \u0432 \u0441\u0442\u043e\u043b\u0431\u0446\u0435 «Price». \u0410 \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u0435\u0449\u0435 \u043f\u0440\u043e\u0449\u0435. \u041c\u0435\u0442\u043e\u0434 webix.i18n.priceFormat<\/strong> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0447\u0438\u0441\u043b\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440<\/em> 199<\/em>) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441\u043e \u0437\u043d\u0430\u043a\u043e\u043c \u0434\u043e\u043b\u043b\u0430\u0440\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435: \u201c$199\u201d. \u0412\u043e\u0442 \u0438 \u0432\u0441\u044f \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u044c.<\/p>\n
\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n
\"\u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435
\u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u0442\u044b \u0438 \u0446\u0435\u043d\u044b<\/figcaption><\/figure>\n
\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Webix \u043c\u043e\u0436\u043d\u043e \u0432 \u044d\u0442\u043e\u0439<\/u><\/a> \u0441\u0442\u0430\u0442\u044c\u0435. <\/p>\n
\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n
\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u0412 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043b\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0443 \u043c\u0443\u0434\u0440\u0435\u043d\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439. <\/p>\n
\u0412 \u0432\u0438\u0434\u0436\u0435\u0442\u0435 DataTable \u044d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 sort. <\/strong>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430 \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0441 \u0434\u0430\u0442\u0430\u043c\u0438, \u0447\u0438\u0441\u043b\u0430\u043c\u0438 \u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0438\u043f\u044b \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438:<\/p>\n