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