U i Pl o t v1 · U i Pl o t v 1.0 Plugin U i Pl o t is a very simple to use jQuery plugin based on...

UiPlot v1.0 Plugin UiPlot is a very simple to use jQuery plugin based on Bootstrap 4.

It makes HTML Tables and Card Decks super easy to use. You only need your data source as

JSON array.

Table presentation:

Card Deck presentation:

2

Bootstrap Table and Card Decks UiPlot uses Bootstrap 4 for its original design. Therefore, it has all the advantages of the

Bootstrap components.

Local and Server You can use it locally or with server side processing very easily.

Edition UiPlot allows edition. You can create CRUD operations easily.

Go to www.uiplot.com/documentation.html if you want to get online documentation.

Go to www.uiplot.com/demo/demo_minimal.html to see useful demos!

https://www.uiplot.com/documentation.html

https://www.uiplot.com/demo_minimal.html

3

Dependencies UiPlot is a jQuery Bootstrap plugin. You have to include their libraries.

At the beginning of the page:



<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"

integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1L

ZCfmhktB" crossorigin="anonymous">

And at the ending of the page:



<script src="https://code.jquery.com/jquery-3.2.1.min.js"

crossorigin="anonymous"></script>



<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"

crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"

crossorigin="anonymous"> </script>



<script src="js/plugin/uiplot.js"></script>

4

Data Source UiPlot uses JSON arrays as datasource.

[{ "id": "47",

"headLine": "Accounting",

"displayName": "Accounting",

"subLine": ""

},

{ "id": "2",

"headLine": "Learning",

"displayName": "Education",

"subLine": ""

}]

5

Migrating from BTable

Although it is almost effortless, here we summarize the main differences between BTable and

UiPlot. If you are using BTable, you would like to know these changes.

1.- The plugin name is now is ‘uiplot’.

2.- We recommend that the target element for UiPlot must be a div (<div> </div>).

2- Callback functions

BTable old function name UiPlot new function name

onRowCreated onItemCreated

onRowAdd

onItemAdd

onDeleteRow

onItemDelete

3- The new type option allows to switch between table (type: “table”) and card deck (type:

“deck”) presentation.

6

Options

type

$("#demo").uiplot({

type: “table”

});

Use the type option to set the presentation type: table or card deck.

Possible values:

table: default, table style presentation.

deck: card deck presentation.

If you want to switch between table and card deck you need to call the destroy function.

7

data

$("#demo").uiplot({

data: sourceDataset

});

Use the data option to set the JSON array datasource.

If columns configuration is not used, all columns will be generated automatically with default

values.

Default columns values:

Title: Column Name from datasource,

Data: Column Name from datasource,

Editable: true,

Orderable: true,

Type: 'data',

InputType: 'text',

Align: 'center',

CardTitle: false

Although the default column is editable, you need to set enableEdit = true to the table.

8

cols

$("#demo").uiplot({

cols: colsConfigArray

});

Use the cols option to set the JSON array with the columns configuration.

Column Object

Title Column title Required

Data Column name from data source.

Column Data property is often used as column key for many functions

Required

Editable Indicates if edition is allowed true / false Default: true

Optional

Orderable Indicates if ordering is allowed

true / false Default: true

Optional

Type Type of column data: normal column, not functionality selector: column for selecting rows Default: data

Optional

InputType Type of input for edition text: text input Optional

9

select: dropdown input check: check input custom: custom column edition

Align Column alignment left / center / right Default: center

Optional

Width Porcentual column width Expressed with porcentual sign. “20%” Default: none

Optional

CardTitle Indicates if the card title is showed

true / false Default: none

Optional

Index Only used for additional column. Column index (order)

Optional

CheckValues

Elements collection. Only used for column type check.

The first element represents the true value.

Optional

onCustomEdition Function for custom columns.

This function is called when column InputType is custom

Optional

10

The onCustomEdition function is useful to customize the edition popup form.

onCustomEdition Function

value Cell in edition value

objData Data source row in edition

form Html custom form

commitFunction Function for commit the edition

Returns the onCustomEditionResponse object

onCustomEditionResponse object

Form HTML custom form

CloseButton Boolean. Indicates if the close button is showed.

additionalCols

$("#demo").uiplot({

additionalCols: colsConfig

});

11

Use additionalCols option when you not define the cols option and some additional columns

are needed. You can use the benefit of autogenerated columns and add your custom columns

too.

This is very useful when you need to add a selector column for example.

Use the Index property to set the new column orde between autogenerated columns.

pagination

$("#demo").uiplot({

pagination: 'local’

});

Use the pagination option to set the pagination processing type.

Possible values:

local: if UiPlot process the pagination, filter and ordering locally.

server: if you implement pagination, filter and ordering with server-side processing.

When the fill function is used with the totalRows parameter, UiPlot uses server pagination

automatically.

12

pageSize

$("#demo").uiplot({

pageSize: 10

});

Use the pageSize option to set the default page size.

pageSizes

$("#demo").uiplot({

pageSizes: [5, 10, 15, 20, 30, 100]

});

Use the pageSizes option to set the an array with the possible pagination sizes.

cardsPerRow

$("#demo").uiplot({

cardsPerRow: 3

});

13

Use the cardsPerRow option to set the number of cards showed in each row. The default

value is 3.

orderSet

$("#demo").uiplot({

orderSet: {

orderAsc: true,

dataOrder: 'name'

}

});

Use the orderSet option to set on the table’s header the initial order. It is very useful when the

data source is initially sorted by some field.

The orderSet option doesn’t order the data, it only informs to the user the initial order.

orderSet Object

orderAsc Indicates if order is ascending (true) or descending (false)

true / false Required

dataOrder Column name from data source used to order

Required

14

enableFilter

$("#demo").uiplot({

enableFilter: true

});

Use the enableFilter option to enable / disable the table’s filter. The default value is true.

If orderSet is false the filter control will not be shown.

enableEdit

$("#demo").uiplot({

enableEdit: false,

});

Use the enableEdit option to enable / disable the table’s edition. The default value is false.

If enableEdit is false, no data will be editable although the columns have their own edition

property as true.

15

enableAdd

$("#demo").uiplot({

enableAdd: false

});

Use the enableAdd option to enable / disable the row addition functionality. The default value is

false.

A default form will be showed for creating new rows. You can interact and customize that form.

enableDelete

$("#demo").uiplot({

enableDelete: false,

});

Use the enableDelete option to enable / disable the row deletion functionality. The default value

is false.

You will need to use a selector type column with it. All selected rows will be deleted from array’s

data source.

If any editing option or selection column is enabled, UiPlot adds a key property for all the

elements of the datasource.

16

enableOrder

$("#demo").uiplot({

enableOrder: true

});

Use the enableOrder option to enable / disable the table sorting functionality. The default value

is true.

styleOption

$("#demo").uiplot({

styleOption: {

pageControlLocation: 'top',

filterControlLocation: 'top',

editionControlLocation: 'top',

orderDeckControlLocation: 'top',

tableSize: 'sm',

tableStyle: '',

headerStyle: '',

hasHeader: true,

filterIndicator: true,

inputWidthAdjust: true,

17

addFormWidth: '400px'

}

});

Use the styleOption option to set the main styles to the table.

styleOption Object

pageControlLocation Indicates the location for the page control

top bottom

filterControlLocation Indicates the location for the filter control

top bottom

editionControlLocation Indicates the location for the edition controls

top bottom

orderDeckControlLocation

Indicates the location for the order control for card deck

top bottom

tableSize Indicates the table size sm md lg

tableStyle Indicates the table style table-dark table-striped table-bordered table-borderless table-hover

headerStyle Indicates the header style None thead-dark

hasHeader Indicates if the table has header true / false

18

filterIndicator Indicates if the filter control change styles when it is used

true / false

inputWidthAdjust Indicates if the inline edition controls are adjusted to the cell width

true / false

addFormWidth Indicates the popup add form width

“NNNpx”

orderLabel

$("#demo").uiplot({

orderLabel: ‘Order’

});

Use the orderLabel option to indicate the label text for the order dropdown for the card deck

presentation.

Callback Functions

onGetDataDropdown

$("#demo").uiplot({

19

onGetDataDropdown: function (input, item, objData, objCol) { }

});

This function is useful to fill the dropdown input for a given column.

The onGetDataDropdown function is called when the user click on a editable cell and its

InputType is “select” .

onGetDataDropdown Callback

input Dropdown input in edition

item Table row or card in edition


objCol Column data in edition

Returns the data array with the dropdown items.

onItemCreated

$("#demo").uiplot({

onItemCreated: function (item, objData) { }

});

20

This function is used to customize each row / card when the table is created.

The onItemCreated function is called when the table is adding its rows.

onItemCreated Callback

item Table row or card

objData Data source row

onInputEdit

$("#demo").uiplot({

onInputEdit: function (input, item, objData, objCol, commitFunction) { }

});

This function is useful to get the control over the input before the user apply any change.

The onInputEdit function is called when the user click on a editable cell.

onInputEdit Callback

input Input control in edition



21


commitFunction Function for commit the edition

Returns onInputEditResponse object.

The commitFunction is very useful when a custom component is needed over the default input

text. Depending of the custom component implemented and its events, you will need to call

commitFunction to commit the edition.

The commitFunction requieres the new value as parameter.

commitFunction (value);

onInputEditResponse Object

Cancel Indicates if the edition process is canceled

SetOnBlur Indicates if the edition has to be committed with onBlur event (default).

onInputSet

$("#demo").uiplot({

onInputSet: function (input, item, objData, objCol, valueInput) { }

});

22

This function is useful to get the control over the event after user made changes. You may

want to make input validations after that.

The onInputSet function is called when the user accepts the changes.

onInputSet Callback

input Input control in edition




valueInput New value entered by the user

Returns boolean. True: edition is committed / False: edition is not commited.

The onInputSet callback is fired after the user confirms the changes and before the changes are

committed to the table and the datasource. To get control after the changes has been

committed use onPostValueChange function.

onPostValueChange

$("#demo").uiplot({

onPostValueChange: function (item, cell, objData, objCol, valueInput) { }

});

23

This function is useful to get the control over the event after user made changes and after

the changes are committed. You may want to apply some styles on the affected cell.

onPostValueChange Callback


cell The td element in edition (row cell or card cell)



valueInput New value entered by the user

onOrder

$("#demo").uiplot({

onOrder: function (paginationParam) { }

});

24

This function is used to server-side pagination. Also is useful to apply custom sorting for

some columns.

The onOrder function is called when the user click on sort column icon.

onOrder Callback

paginationParam All pagination info

Returns boolean. True: the default order continues/ False: the default order is cancelled.

paginationParam Object

page Current page, before the user uses the pagination control.

Required

pageSize Current page size Required

filterCriteria Current filter value Required

orderSet Order set object Required

orderSet Object




Required

25

onPagination

$("#demo").uiplot({

onPagination: function (paginationParam, page) { }

});

This function is used to server-side pagination.

The onPagination function is called when the user uses the pagination control in any way: next

page, previous page and, page size.

onPagination Callback

paginationParam All pagination info. The page in the paginationParam object is the current page.

page The new page requested by the user.

Returns boolean. True: the pagination event continues/ False: the pagination event is cancelled.



Required


26



orderSet Object




Required

onFilter

$("#demo").uiplot({

onFilter: function (paginationParam, value) { }

});

This function is used to server-side pagination. Also it can be used to do a custom filter.

The onFilter function is called when the user uses the filter control.

onFilter Callback

paginationParam All pagination info. The page in the paginationParam object is the current page.

27

value Filter criteria

Returns boolean. True: the filter event continues/ False: the filter event is cancelled.



Required




orderSet Object




Required

onCreateFormAdd

$("#demo").uiplot({

onCreateFormAdd: function (form) { }

});

28

This function is used to customize the new row form.

The onCreateFormAdd function is called when the user uses the add new row button, before it is

shown.

onCreateForm Callback

form Html form

Each field (column) is shown as an input in one row in the add form. At the same time each

input control is wrapped in a div element.

The id of the wrapper div is named form_add_row_container_[colData]. The id of the input

control is named form_add_row_[colData]. If the column data is “Name” then:

<div class="col-sm-7" id="form_add_row_container_Name">

<input type="text" id="form_add_row_Name">

</div>

onItemAdd

$("#demo").uiplot({

onItemAdd: function (form, newObj) { }

});

29

This function is used to validate the new row.

The onItemAdd function is called when the user confirms the new row form.

onItemAdd Callback

form Html form

newObj New item object for the new row

Returns boolean. True: the addition event continues/ False: the addition event is cancelled.

onItemDelete

$("#demo").uiplot({

onItemDelete: function (selectedItems) { }

});

This function is used to validate the rows deletion.

The onDeleteRow function is called when the user clicks the deletion row button.

onItemDelete Callback

selectedItems Array with the selected items

Returns boolean. True: the deletion event continues/ False: the deletion event is cancelled.

30

Public Functions

fill

$("#demo").uiplot('fill', JsonArrayDataSource,[TotalRows]);

Fill function redraws the table rows with the data source array provided.

The TotalRows parameter is used only for server-side pagination. It indicates the total rows

number. When the TotalRows parameter is used, UiPlot switches automatically to server-side

pagination mode (pagination: 'server').

destroy

$("#demo").uiplot(destroy);

destroy function eliminate the UiPlot instance.

31

getSelectedItems

$("#demo").uiplot(‘getSelectedItems’);

getSelectedItems function returns the selected items by a selector column.

removeItems

$("#demo").uiplot(‘removeItems’);

removeItems function removes all table rows.

getData

$("#demo").uiplot(‘getData’);

getData function returns the data source array.

setCellValue

$("#demo").uiplot(‘setCellValue’, item, col, content);

32

setCellValue function sets the cell content with the content parameter.

The item parameter is the cell of row / card affected. The col parameter can be either the col

Data property (string) or the col index (numeric). Finally, the content parameter is the data to be

applied.

Date post:	22-Jan-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

U i Pl o t v1 · U i Pl o t v 1.0 Plugin U i Pl o t is a very simple to use jQuery plugin based on...

Documents