EJS TreeGrid是一个用纯JavaScript编写的DHTML组件,用于在HTML页面上显示和编辑表格、网格、树形视图、树形网格或条形图中的数据,它是Internet上超快的AJAX网格,具有丰富的功能集。
EJS TreeGrid is a DHTML component written in pure JavaScript to display and edit data in table, grid, tree view, tree grid or bar chart on HTML page.
It is the fastest AJAX grid with the richest features set available on the Internet.
TreeGrid实例展示
用于在网格和树视图中显示和编辑数据的基础组件
支持的浏览器
-
Microsoft Internet Explorer(IE6, IE7, IE8, IE9, IE10, IE11)、Microsoft Edge IE12 - IE18
-
Mozilla Firefox(FF1.5 - FF106)
-
Google Chrome(CH3 - CH107)、Microsoft Edge(IE79 - IE106)
-
Apple Safari、Mac OSX & Windows(S3 - S16.1)
-
Opera(O9 - O12 (Presto)、O15 - O91 (WebKit))
-
Apple iOS(Safari Mobile[S4 - S16.1]、[CH / FF / UC])
-
Android Mobile(CH / FF / UC / SI,A2 - A106)
JavaScript框架
EJS TreeGrid包包含了在JavaScript框架中使用的示例和文档(还可以在任何其他支持第三方JavaScript代码的客户端框架中使用):
-
Angular (TypeScript)
-
React (JavaScript / TypeScript)
-
Vue (JavaScript / TypeScript)
-
其他框架(HTML、JavaScript)
服务器端支持
EJS TreeGrid包包含服务器端脚本的示例和预定义代码(还可以在任何其他可以处理XML或JSON数据的服务器脚本环境中使用):
-
NodeJS (JavaScript)
-
ASP.NET (C#, Visual Basic)
-
JSP (Java)
-
PHP
-
HTML(其他)
主要优势
-
先进的单元格公式,表达式和计算,类似于MS Excel
-
各种分页类型,以使用AJAX和分页组件显示几乎无限数量(数百万)的行,还有列分页
-
高级过滤器,类似于MS Excel的过滤表达式
-
类似于Google的搜索
-
根据列值自动将行分组到树
-
多级数据透视表(二维分组),可编辑、无限源列
-
固定(冻结)所有边缘上的列和行
-
在列(colspan)或行(rowspan)之间或两个方向上实现单元格跨度,用户也可以使用动态跨度
-
在网格之间的拖动行(移动和复制)
-
通过鼠标拖动调整行大小,行内容的垂直对齐
-
通过键盘或鼠标单击或拖动选择行、列或单元格范围;可选择的预定义或自定义操作
-
用鼠标移动、冻结或解冻列
-
列的添加、复制和删除
-
各种单元格类型,如文本,数字,复选框,文本区,组合框,图像,链接或任何其他HTML等
-
用于根据类型和格式字符串显示和编辑的高级格式化值
-
选择日期的日历组件,一个选择日期范围和重复日期的特殊对话框
-
各种编辑掩码
-
在编辑时、编辑后和保存前验证单元格值
-
在文本区多行编辑
-
将图像插入单元格文本或外部单元格,如MS Excel,通过将其放入单元格或从文件系统中选择打开图像文件
-
通过鼠标拖动编辑单元格内部或外部的图像-移动,调整大小,旋转,裁剪,更改不透明度或名称
-
与MS Excel一样,单个单元格或单元格矩形的单元格焦点光标,拖动聚焦的单元格
-
像在MS Excel中一样,通过鼠标拖动自动填充单元格值
-
单元格更改(清除、复制、移动、填充、粘贴、验证)
-
自动完成组合与建议列表的任何单元格
-
打印选项或导出到PDF与各种PDF设置和可能的分裂页在两个方向
-
导出到Microsoft Excel或任何其他电子表格程序,可以处理XLSX, XLS, CSV文件或HTML表格
-
与服务器的数据同步
-
在TreeGrid单元中嵌套细节网格,无限嵌套级别
-
响应式网页设计,根据定义的媒体规则改变viewport大小的网格布局
-
创建甘特图也可用;包括依赖项、资源、摘要、约束和动态更新
-
显示和动态更新外部对象,如Adobe Flash, Microsoft SilverLight或自定义JavaScript对象
-
完全可定制的CSS样式来改变网格外观
-
高级JavaScript API,带有从JavaScript控制网格的事件和方法
-
在页面上使用网格而不需要任何JavaScript代码
-
成熟的XML输入/输出格式,还支持JSON格式
-
完全可定制的键盘和鼠标导航操作方案
-
非常快的显示和控制
-
脚本模块 - 不使用的模块可以从脚本中删除,以缩短脚本的长度
-
本地化到任何可能的语言,包括所有文本、日期和数字格式、内置翻译到主要语言
TreeGrid Gantt Chart is TreeGrid extension to display charts for project and service management or for any other purposes.
The data can come from many data sources: static XML file, static JS file (JSON format), XML web service, SOAP web service, or any page generated by PHP, JSP, ASP, ASP.NET, or any other server script. Changed data can be uploaded to server without submit (AJAX) the page. Methods of upload can be HTML form POST or SOAP XML. Changed data can also be uploaded by standard form/page submit (in hidden input, for example) or in any custom way of submit.
Input / output data format is XML tree with or without predefined DTD. Rows are identified by id attribute. In this format the data can be stored on server or can be easy converted to any other representation, database table for example.
For Windows and Linux systems is available server side component to support up to million rows with sorting, filtering and calculations capabilities. This is standard DLL / SO and can be used in any server script environment that can use DLL on Windows systems or SO on Linux systems (ASP.NET, Java servlets / JSP, PHP, ...). The DLL / SO is very fast and thin. This DLL is just helper library and you don't need to use it, if you want to support server paging by your own script.
EJS TreeGrid is client component and runs on client browser. It is compatible with the most of standard browsers. It does not require any installation or other components on client or server side. It does not need any JavaScript code to use TreeGrid on a page. It is very easy to build the control into html page in any server script environment (ASP, ASP.NET, PHP, JSP, ... , any XML web service). In these environments you need only code for reading and writing data in XML format. Bandwidth between server and client is reduced to minimum because all actions are performed on client side and from and to server are sent just pure data.
Basics:
- Compatible with
Internet Explorer 6.0+ and all IE engine shells
Mozilla Firefox 1.5+ and all other Gecko engine shells
Opera 9.0+
Google Chrome 3.0+ and Safari 3.0+ and all other WebKit engine shells
iPad Safari Mobile 1.0+
Android Android browser 3.0+
- Supports all CSS1 compatibility modes: strict mode, almost strict mode, quirks mode. All <!DOCTYPE> tag settings are supported.
- TreeGrid can handle up to about 20 000 rows offline and up to millions rows online using paging and AJAX.
- Various types of paging with sorting, filtering and calculations for all pages. Also paging in columns and tree.
- You don't need to write any JavaScript code to use TreeGrid on your page.
- There are no other requirements on client side.
- All operations are performed on client side, without sending data to server. (If no server paging used)
- Data format is small, server sends only values, not graphic formatting.
- User script extension by defined events in TreeGrid. For data validation or changing value after edit, to approve an operation, to change TreeGrid look, to change state colors, and many more.
- Extended API to control all functions of TreeGrid from JavaScript code
- Visual settings by CSS styles.
- Row and cell colors by their state (changed, deleted, added, focused, selected, mouse hover, editable, ...).
- Cell spanning and merging, including dynamic span by mouse dragging.
- User settings (column visibility, position and size, type of sorting, filters, all grid settings) are saved at client into cookies or can be sent to server.
- More tree grids on one page, possible operations among them (dragging rows for example). Different styles/images/colors for them are possible !
- Master / detail grids or even tree grids.
- Grouping rows to tree according to same values in column(s). Similar to summarizations in Pivot table in MS Excel.
- Calculated cells like in MS Excel, include mathematic, aggregate (sum, count, sumif, ...), statistic and user-defined functions. Or any JavaScript code in formulas.
- Filters like in MS Excel. For any column user can specify an expression and operator to filter rows by this column's values. More filters for one grid. Date and number ranges filters (between clause).
- Advanced filters by any expression or formula, with possibility to define predefined filters.
- Searching like by Google.
- Export to Microsoft Excel or any other spreadsheet program that can handle XLS files or data in HTML tables. Include number and date formats.
- Printing capabilities, export to PDF, including various PDF options
- Control panel for TreeGrid operations. Can be inside or outside of TreeGrid. All its buttons can be controlled from events, or be hidden.
- Server side paging, validation, sorting and filtering support. Cells can be marked as wrong with error title sent from server.
- Variable row height according to cell content, height changing when editing in text area.
- Displaying and dynamic updating of external objects like Adobe Flash, Microsoft SilverLight or custom JavaScript objects
- Many examples and predefined code for server side scripts ASP (VBScript), ASP.NET (C#, Visual Basic), JSP (Java) and PHP.
- Detailed documentation of TreeGrid usage, events, data format, JavaScript API and cell formulas.
Data communication:
- The input/output data format is XML document parsed by any XML parser. XML document can be sent as a document or as a coded string
- The XML is well formed and has predefined universal DTD (data type definition).
- Supported is also JSON format in string or JavaScript.
- The input data can came from various sources: static XML file, XML generated by web page, XML web service, SOAP web service, form input control value on HTML page or any other user defined source. Input format is automatically recognized.
- The changed data can be uploaded to the server without submitting and reloading the page (AJAX) or by submit the page as a part of content of sent form's data.
- The methods of upload are: text/plain, text/xml, application/x-www-form-urlencoded, text/xml in SOAP XML format.
- Supported XML web service functions are those, which use HTML form or SOAP XML communication. This function must return string or XML document and accept in parameters string, XML document or any basic type. All ASP.NET, Java SOAP (SAAJ), PHP SOAP web services are supported.
- Synchronization with server - TreeGrid can automatically check and download all changes from server done by other users or applications.
Functions:
- Displaying data in rows and columns in treeview with tree and grid or in pure datagrid without tree.
- Displaying and formatting values according to their type (string, boolean, integer, float, enum (select), radio, datetime, html, img, url ...). Possible edit masks given by any regular expression.
- Values types and formats are usually set for whole column, but can be set individually for cell. Cells can be set as readonly.
- Editing values based on their type and html form elements (input, checkbox, select, textarea, ...). For dates is used own calendar control.
- User buttons in cells, prepared user dialog
- Expanding / collapsing rows in tree.
- Controlling by mouse or by keys. Tab key support. Fully customizable mouse and key schemas.
- Copy & paste selected cells to and from grid or any text editor or spreadsheet program like MS Excel. Not in Opera browser.
- Adding and deleting rows.
- Moving and copying rows by mouse dragging (drag and drop operations with rows and groups of rows). Even among more TreeGrids. Controlled by user API events.
- Resizing and moving columns.
- Selecting rows and operations with selected groups (moving, copying, deleting, dragging, ...).
- Selecting rows or cell range by mouse and operations with selected range (copying, pasting, custom actions, ...).
- Sorting rows by one or even more columns, string compare - case and localization sensitive or ignore.
- Filtering rows according to their values
- Scrolling of parts of content - fixed and variable rows and columns on all sides. Mouse wheel compatible.
- Localization possible. All texts are in external XML file and can be translated to any language. This file also contains language dependent number and date-time formats and constants.
TreeGrid Live examples
This example shows various TreeGrid features with server paging on table with 2,000, 10,000 and 50,000 rows.
This example does not use any custom JavaScript or special server script code, all features are set via XML data definitions and provided by TreeGrid!
TreeGrid is fast and can display large tables without any delayed rendering in reasonable times. This example displays 1,000 rows and 14 columns. All rows and columns are rendered on start and are shown immediatelly.
Of course, using paging is much faster, you can choose Client paging and compare rendering times with the grid without paging. You can test features like sorting, filtering, grouping, column hiding / showing, column moving, print, export and so on, in such large table. In bottom debug window you can see the times spent by provided actions.
A demonstration of TreeGrid application showing interactive Gantt chart - timetable of tasks and their completion in project management.
This example demonstrates Continuous Run, complex and universal bar type in Gantt chart. It supports more bars in one cell, with different features, size, color, class, text and tooltip.
- New box can be added by dragging it from the right grid or by dragging empty space in the left grid.
- Box can be resized by dragging its edge. Fixed or solid box by dragging the edge with Ctrl.
- Box can be moved inside the cell by mouse dragging. Box can be moved outside the cell by dragging with Ctrl.
- Dragging box to the edge of other box joins the boxes, the boxes are moved together. The boxes can be separated by dragging one box with Shift.
- When dragging box with Shift, the box can be placed everywhere, even to incorrect position.
- Box can be deleted by resizing it to empty width or from popup menu.
The box type, color, text and tooltip can be changed from popup menu (right click).
- Chart can be zoomed by selecting date range by mouse draging or clicking to one date in Gantt header, unzoomed by right click Gantt header.
In this example are excluded weekends as holidays, except the weekend 24~25th May. The weekends are excluded from the run lengths, the runs cannot start or end in weekend.
- All these control settings can be changed in XML.