neoTable
Based on:
https://bootstrap-table-docs3.wenzhixin.net.cn/home/
https://vitalets.github.io/x-editable/
Sample App:
https://visualneo.com/tutorials/neotable
https://visualneo.com/tutorials/neotabledb
https://visualneo.com/tutorials/neotablemysql
(User: admin - Pass: admin)
Description
The neoTable plugin for VisualNEO Web offers robust table management, supporting various operations such as adding, editing, deleting rows, data sorting, filtering, and pagination. It’s ideal for applications needing dynamic data display, such as dashboards, inventory systems, or content management solutions.
Basic neoTable usage:
Step 1: Reset Column Definitions
Before setting up columns, any previous column definitions need to be reset. This ensures that the table is clean and ready for new configurations.
neoTableResetColumns "BasicTableContainer"
Step 2: Define Table Columns
Each column in the table is set up using neoTableSetColumn, where:
- Column numbers start at 1 and increment by one for each additional column.
- Columns are defined with a data field (key in data source), header name, width, and properties like sortable, editable, and searchable.
neoTableSetColumn "BasicTableContainer" 1 "id" "Id" "" false false false ""
neoTableSetColumn "BasicTableContainer" 2 "name" "First Name" "" false false false ""
neoTableSetColumn "BasicTableContainer" 3 "surname" "Last Name" "" false false false ""
neoTableSetColumn "BasicTableContainer" 4 "age" "Age" "" false false false ""
This setup creates four columns:
- Id: Column 1, non-sortable, non-editable, non-searchable.
- First Name: Column 2, non-sortable, non-editable, non-searchable.
- Last Name: Column 3, non-sortable, non-editable, non-searchable.
- Age: Column 4, non-sortable, non-editable, non-searchable.
Step 3: Initialize the Table with Permissions
The neoTableInitTable command initializes the table in the specified container (BasicTableContainer) with basic permissions and settings:
- Table view mode.
- No pagination, search, export, or column toggle options enabled.
neoTableInitTable "BasicTableContainer" "" 0 "Table" false false false false false ""
Step 4: Load Data into the Table
The neoTableLoadData command loads the data from a specified variable (e.g., mydata) into the table. The data should be in a compatible format (like JSON) and structured to match the column fields (id, name, surname, age).
neoTableLoadData "BasicTableContainer" [mydata]
neoTableConfigDB
Purpose: |
Database configuration. Needs neoPHP plugin. |
Category: |
neoTable |
Syntax: |
neoTableConfigDB "objId" "dbAlias" "tableName" "idField"
objId Select neoTable container dbAlias Database alias name (as defined in config.php) tableName Database table name idField Id field name (Unique primary key) |
neoTableInitTable
Purpose: |
Initializes neoTable into a container. |
Category: |
neoTable |
Syntax: |
neoTableInitTable "objId" "language" pagination viewmode exportable searchable showcolums showtoggle selectable eventFunc
objId Select a container to initialize neoTable language Language (i.e. 'es-ES'). Default 'en-EN' pagination Records per page? (0 for no pagination) viewmode View mode exportable Allow user export data? searchable Allow user search through data? showcolums Allow user show and hide colums? showtoggle Allow user change view mode (table / card) selectable Allow multiple selections? (Use neoTableSetMultiSelectColumn first) eventFunc On event subroutine (check, click, uncheck, loaderror, pagechange, search) |
neoTableSetColumn
Purpose: |
Sets a new neoTable column |
Category: |
neoTable |
Syntax: |
neoTableSetColumn "objId" columnNumber "dataField" "dataName" "dataWidth" dataSortable dataEditable dataSearchable dataFormatter
objId Select a container columnNumber Column number (1,2,3...) dataField Data field name dataName Column header text dataWidth Column width. (Use px, % or empty for auto) dataSortable Make column sortable by user? dataEditable User editable? (use neoTableEditColumnAs... first) dataSearchable Searchable by user? dataFormatter Subroutine to format the data (optional) |
neoTableResetColumns
Purpose: |
Resets neoTable columns so they can be set again. |
Category: |
neoTable |
Syntax: |
neoTableResetColumns "objId"
objId Select a container object |
neoTableSetSelectColumn
Purpose: |
Sets a select column to allow user select rows |
Category: |
neoTable |
Syntax: |
neoTableSetSelectColumn "objId" columnNumber "idField"
objId Select a container columnNumber Column number (Usually 1) idField Id field name (Unique primary key) |
neoTableSetMultiSelectColumn
Purpose: |
Sets a select column to allow user select rows |
Category: |
neoTable |
Syntax: |
neoTableSetMultiSelectColumn "objId" columnNumber "idField"
objId Select a container columnNumber Column number (Usually 1) idField Id field name (Unique primary key) |
neoTableEditColumnAsText
Purpose: |
Settings to allow user edit column content as text |
Category: |
neoTable |
Syntax: |
neoTableEditColumnAsText "objId" "columnNumber" editorMode placement "editorTitle" "placeHolder" escapeHTML validateFunction sendToServer callbackFn
objId Select a container columnNumber Column number (1,2,3...) editorMode Editor mode placement Placement (Only for popup mode) editorTitle Title (optional and only for popup mode) placeHolder Placeholder text. Shown when input is empty. escapeHTML Escape HTML? (default true) validateFunction Data validation subroutine (optional) sendToServer Send data to server? (Needs neoPHP plugin) callbackFn Callback subroutine after server response (optional) |
neoTableEditColumnAsTextArea
Purpose: |
Settings to allow user edit column content using a Text Area |
Category: |
neoTable |
Syntax: |
neoTableEditColumnAsTextArea "objId" "columnNumber" editorMode placement "editorTitle" "placeHolder" escapeHTML validateFunction sendToServer callbackFn
objId Select a container columnNumber Column number (1,2,3...) editorMode Editor mode placement Placement (Only for popup mode) editorTitle Title (optional and only for popup mode) placeHolder Placeholder text. Shown when input is empty. escapeHTML Escape HTML? (default true) validateFunction Data validation subroutine (optional) sendToServer Send data to server? (Needs neoPHP plugin) callbackFn Callback subroutine after server response (optional) |
neoTableEditColumnAsSelect
Purpose: |
Settings to allow user edit column content using a drop down |
Category: |
neoTable |
Syntax: |
neoTableEditColumnAsSelect "objId" "columnNumber" editorMode placement "editorTitle" selectData validateFunction sendToServer callbackFn
objId Select a container columnNumber Column number (1,2,3...) editorMode Editor mode placement Placement (Only for popup mode) editorTitle Title (optional and only for popup mode) selectData Data (Each list item in a separate line) validateFunction Data validation subroutine (optional) sendToServer Send data to server? (Needs neoPHP plugin) callbackFn Callback subroutine after server response (optional) |
neoTableEditColumnAsCheckList
Purpose: |
Settings to allow user edit column content using a drop down |
Category: |
neoTable |
Syntax: |
neoTableEditColumnAsCheckList "objId" "columnNumber" editorMode placement "editorTitle" selectData validateFunction sendToServer callbackFn
objId Select a container columnNumber Column number (1,2,3...) editorMode Editor mode placement Placement (Only for popup mode) editorTitle Title (optional and only for popup mode) selectData Data (Each list item in a separate line) validateFunction Data validation subroutine (optional) sendToServer Send data to server? (Needs neoPHP plugin) callbackFn Callback subroutine after server response (optional) |
neoTableEditColumnAsDate
Purpose: |
Settings to allow user edit column content using a date picker |
Category: |
neoTable |
Syntax: |
neoTableEditColumnAsDate "objId" "columnNumber" placement "editorTitle" "format" "viewFormat" weekFirstDay language validateFunction sendToServer callbackFn
objId Select a container columnNumber Column number (1,2,3...) placement Date picker placement editorTitle Title (optional) format Date format for server (ie: yyyy-mm-dd) viewFormat Date format for displaying (ie: yyyy-mm-dd) weekFirstDay Week first day language Language validateFunction Data validation subroutine (optional) sendToServer Send data to server? (Needs neoPHP) callbackFn Callback subroutine after server response (optional) |
neoTableEditColumnAsHTML5Type
Purpose: |
Settings to allow user edit column content as HTML5 input type |
Category: |
neoTable |
Syntax: |
neoTableEditColumnAsHTML5Type "objId" html5Type "columnNumber" editorMode placement "editorTitle" "placeHolder" escapeHTML validateFunction sendToServer callbackFn
objId Select a container html5Type Select HTML5 native input type columnNumber Column number (1,2,3...) editorMode Editor mode placement Placement (Only for popup mode) editorTitle Title (optional and only for popup mode) placeHolder Placeholder text. Shown when input is empty. escapeHTML Escape HTML? (default true) validateFunction Data validation subroutine (optional) sendToServer Send data to server? (Needs neoPHP plugin) callbackFn Callback subroutine after server response (optional) |
neoTableLoadData
Purpose: |
Load data into neoTable. Previous data will be deleted |
Category: |
neoTable |
Syntax: |
neoTableLoadData "objId" [theData]
objId Select neoTable Container theData Data object array (JSON) |
neoTableSetData
Purpose: |
Sets the value of a field in a dataset |
Category: |
neoTable |
Syntax: |
neoTableSetData [theData] theId "theField" theValue
theData Data object array theId Row number (first one is 0) theField Field name theValue Value to store |
neoTableGetData
Purpose: |
Gets the value of a field in a dataset |
Category: |
neoTable |
Syntax: |
neoTableGetData [theValue] [theData] theId "theField"
theValue Variable to store result value theData Data object array theId Row number (first one is 0) theField Field name |
neoTableGetRowData
Purpose: |
Get data from the table row that contains the id passed by parameter. The result is stored in a JSON object. |
Category: |
neoTable |
Syntax: |
neoTableGetRowData "objId" rowId [retvar]
objId Select neoTable Container rowId Row id retvar Variable object to store result |
neoTableGetSelectedRowsData
Purpose: |
Get data from user selected rows |
Category: |
neoTable |
Syntax: |
neoTableGetSelectedRowsData "objId" [retvar]
objId Select neoTable Container retvar Variable to store result |
neoTableGetSelectedIds
Purpose: |
Get the id's of selected rows as an Array with values from the primary key field. |
Category: |
neoTable |
Syntax: |
neoTableGetSelectedIds "objId" [retvar]
objId Select neoTable Container retvar Variable to store result |
neoTableGetSelectedId
Purpose: |
Get the id of selected row as value from the primary key field |
Category: |
neoTable |
Syntax: |
neoTableGetSelectedId "objId" [retvar]
objId Select neoTable Container retvar Variable to store result |
neoTableGetAllData
Purpose: |
Get the loaded data of neoTable at the moment that this method is called. The result is stored in a JSON object. |
Category: |
neoTable |
Syntax: |
neoTableGetAllData "objId" [retvar]
objId Select neoTable Container retvar Variable object to store result |
neoTableInsertRow
Purpose: |
Insert a new data row |
Category: |
neoTable |
Syntax: |
neoTableInsertRow "objId" rowIndex [rowData]
objId Select neoTable Container rowIndex Row index (position) to insert new row rowData Row data (variable object with the appropiate format) |
neoTableDeleteRowById
Purpose: |
Delete just one row by id |
Category: |
neoTable |
Syntax: |
neoTableDeleteRowById "objId" rowId
objId Select neoTable Container rowId Row Id number |
neoTableDeleteRowsByValue
Purpose: |
Delete rows by field value |
Category: |
neoTable |
Syntax: |
neoTableDeleteRowsByValue "objId" "fieldName" "theValue"
objId Select neoTable Container fieldName Field name theValue Value |
neoTableDeleteSelectedRows
Purpose: |
Delete user selected rows |
Category: |
neoTable |
Syntax: |
neoTableDeleteSelectedRows "objId"
objId Select neoTable Container |
neoTableFilter
Purpose: |
Filter content to show on table |
Category: |
neoTable |
Syntax: |
neoTableFilter "objId" "filter
objId Select neoTable Container "filter Filter to apply ie: {age:10, hairColor: [""blue"", ""red"", ""green""]} " |
neoTableHideColumn
Purpose: |
Hides a neoTable column |
Category: |
neoTable |
Syntax: |
neoTableHideColumn "objId" "columnName"
objId Select neoTable Container columnName Field name to hide |
neoTableHideAllColumns
Purpose: |
Hide all neoTable columns |
Category: |
neoTable |
Syntax: |
neoTableHideAllColumns "objId"
objId Select neoTable Container |
neoTableShowColumn
Category: |
neoTable |
Syntax: |
neoTableShowColumn "objId" "columnName"
objId Select neoTable Container columnName Field name to show |
neoTableShowAllColumns
Purpose: |
Show all neoTable columns |
Category: |
neoTable |
Syntax: |
neoTableShowAllColumns "objId"
objId Select neoTable Container |
neoTableDeleteAll
Purpose: |
Delete all rows |
Category: |
neoTable |
Syntax: |
neoTableDeleteAll "objId"
objId Select neoTable Container |
neoTableGotoNextPage
Purpose: |
Go to the next page on a paginated neoTable |
Category: |
neoTable |
Syntax: |
neoTableGotoNextPage "objId"
objId Select neoTable Container |
neoTableGotoPrevPage
Purpose: |
Go to the previous page on a paginated neoTable |
Category: |
neoTable |
Syntax: |
neoTableGotoPrevPage "objId"
objId Select neoTable Container |
neoTableGotoPage
Purpose: |
Go to the specified page number on a paginated neoTable |
Category: |
neoTable |
Syntax: |
neoTableGotoPage "objId" pageId
objId Select neoTable Container pageId Page number |
neoTableToggleView
Purpose: |
Toggle the card/table view. |
Category: |
neoTable |
Syntax: |
neoTableToggleView "objId"
objId Select neoTable Container |
Created with the Personal Edition of HelpNDoc: Produce electronic books easily