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...
TRANSCRIPT
![Page 1: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/1.jpg)
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:
![Page 2: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/2.jpg)
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!
![Page 3: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/3.jpg)
3
Dependencies UiPlot is a jQuery Bootstrap plugin. You have to include their libraries.
At the beginning of the page:
<!-- Bootstrap core CSS -->
<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:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<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>
<!-- UiPlot -->
<script src="js/plugin/uiplot.js"></script>
![Page 4: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/4.jpg)
4
Data Source UiPlot uses JSON arrays as datasource.
[{ "id": "47",
"headLine": "Accounting",
"displayName": "Accounting",
"subLine": ""
},
{ "id": "2",
"headLine": "Learning",
"displayName": "Education",
"subLine": ""
}]
![Page 5: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/5.jpg)
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.
![Page 6: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/6.jpg)
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.
![Page 7: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/7.jpg)
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.
![Page 8: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/8.jpg)
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
![Page 9: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/9.jpg)
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
![Page 10: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/10.jpg)
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
});
![Page 11: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/11.jpg)
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.
![Page 12: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/12.jpg)
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
});
![Page 13: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/13.jpg)
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
![Page 14: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/14.jpg)
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.
![Page 15: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/15.jpg)
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.
![Page 16: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/16.jpg)
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,
![Page 17: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/17.jpg)
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
![Page 18: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/18.jpg)
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({
![Page 19: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/19.jpg)
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
objData Data source row in edition
objCol Column data in edition
Returns the data array with the dropdown items.
onItemCreated
$("#demo").uiplot({
onItemCreated: function (item, objData) { }
});
![Page 20: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/20.jpg)
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
item Table row or card in edition
objData Data source row in edition
![Page 21: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/21.jpg)
21
objCol Column data in edition
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) { }
});
![Page 22: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/22.jpg)
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
item Table row or card in edition
objData Data source row in edition
objCol Column data 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) { }
});
![Page 23: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/23.jpg)
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
item Table row or card in edition
cell The td element in edition (row cell or card cell)
objData Data source row in edition
objCol Column data in edition
valueInput New value entered by the user
onOrder
$("#demo").uiplot({
onOrder: function (paginationParam) { }
});
![Page 24: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/24.jpg)
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
orderAsc Indicates if order is ascending (true) or descending (false)
true / false Required
dataOrder Column name from data source used to order
Required
![Page 25: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/25.jpg)
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.
paginationParam Object
page Current page, before the user uses the pagination control.
Required
pageSize Current page size Required
![Page 26: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/26.jpg)
26
filterCriteria Current filter value Required
orderSet Order set object Required
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
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.
![Page 27: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/27.jpg)
27
value Filter criteria
Returns boolean. True: the filter event continues/ False: the filter event 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
orderAsc Indicates if order is ascending (true) or descending (false)
true / false Required
dataOrder Column name from data source used to order
Required
onCreateFormAdd
$("#demo").uiplot({
onCreateFormAdd: function (form) { }
});
![Page 28: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/28.jpg)
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) { }
});
![Page 29: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/29.jpg)
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.
![Page 30: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/30.jpg)
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.
![Page 31: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/31.jpg)
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);
![Page 32: 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 Bootstrap 4. It makes HTML T ab l e s and C ar d D e c k s super easy to use](https://reader033.vdocuments.us/reader033/viewer/2022041620/5e3e4fd4e3e144476b489dae/html5/thumbnails/32.jpg)
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.