mySCADA uses a slickgrid JavaScript library to render tables. You can use any functionality slickgrid library provides, but most of the functions are packed into simple to use mySCADA functions. For more information about slickgrid JavaScript library, please look here: https://github.com/6pac/SlickGrid/wiki
Showing CSV File in a Table
You can show a table inside Active Area, file will be read from User Files
var options={}; options.file='soubor.csv'; options.editable=true; //whether you want to make final table editable by user options.areaId=1; //ID of active area where to render table options.textSize=200; //text size in percent options.selectedRowColorBackground='green'; //background color of selected row options.rowSelect=false; //if true, table will be created with added first column to select rows by check box options.singleSelection=true; //allow to select single row by user options.multipleSelection=false; //allow to select multiple rows by user myscada.showCsvFromUserFilesInTable(options);
You can show a table inside Active Area, file will be read from from User Data folder (files saved in runtime)
var options={}; options.file='soubor.csv'; options.editable=true; //whether you want to make final table editable by user options.areaId=1; //ID of active area where to render table options.textSize=200; //text size in percent options.selectedRowColorBackground='green'; //background color of selected row options.rowSelect=false; //if true, table will be created with added first column to select rows by check box options.singleSelection=true; //allow to select single row by user options.multipleSelection=false; //allow to select multiple rows by user myscadaShowCsvInTable(options);
Showing Generic Tables
You can easily show tables filled with data you provide in any active area you choose.
1. First of all, create an options object with required parameters
var options={}; options.file='soubor.csv'; options.editable=true; //whether you want to make final table editable by user options.areaId=1; //ID of active area where to render table options.textSize=200; //text size in percent options.selectedRowColorBackground='green'; //background color of selected row options.rowSelect=false; //if true, table will be created with added first column to select rows by check box options.singleSelection=true; //allow to select single row by user options.multipleSelection=false; //allow to select multiple rows by user
2. Now create column definitions
options.columns = [ {id: "title", name: "Title", field: "title"}, {id: "duration", name: "Duration", field: "duration"} ];
Each column can have following parameters
|
Id |
Unique ID or the column |
|
name |
Name of column. Shown in column header |
|
field |
To retrieve a column back, use the filed parameter |
|
width |
Width of column in pixels |
|
require |
true/false if the column must have a value |
|
default |
Default value |
|
editor |
How the value will be edited by user. See next part for explanation. |
|
editorOptions |
Additional options for conditional editor |
3. You can also provide a custom cell editor for any column you choose. To do so, add option “editor” to the column definition:
Example: {id: "name", name: “name”,field: "name", width: 200, editor: Slick.Editors.Text}
Following types are supported:
Slick.Editors.TextEditor Basic text editor
(default option if you don’t choose any other)
Slick.Editors.IntegerEditor For editing whole numbers
Slick.Editors.DateEditor For editing dates
Slick.Editors.YesNoSelectEditor Boolean editor
Slick.Editors.CheckboxEditor Check box editor
Slick.Editors.PercentCompleteEditor Percentage editor
Slick.Editors.LongTextEditor Long text editor
Aside of basic editors, there is a complex editor which allows you to pass multiple options and limit what exactly can user enter.
Slick.Editors.ConditionalCellEditor
for this editor, you can provide additional parameters using editorOptions parameter
example: {id: "age", default: 20, name: "Age", field: "age", editor:Slick.Editors.ConditionalCellEditor, editorOptions:{min:0 , max:120, msg:"Must be a valid number 0 - 120", type:'number', decimalPlaces:0}}
editorOptions can have following parameters:
|
Type |
number/string Specify if edited value is a number or string |
|
decimalPlaces |
Maximum number of decimal places to enter (enter 0 for integer type) |
|
min |
Minimum limit value can have |
|
max |
Maximum limit value can have |
|
minLength |
Minimum number of characters value can have |
|
maxLength |
Maximum number of characters value can have |
|
required |
true/false If true value cannot be empty |
|
pattern |
Provide a regular expression against which will be user input tested |
4. And finally pass some data. Passed data is array of objects
options.data = []; for (var i = 0; i < 500; i++) { //creating 500 rows data[i] = { title: "Task " + i, duration: "5 days" }; } //the table will be created and rendered inside Active Area with given id myscada.createTable(options);