内容简介：Provide the Excel slicer capability to websites. Simple implementation to help filter table or datasets using visual feedback.Optional
Slicer-JS
Provide the Excel slicer capability to websites. Simple implementation to help filter table or datasets using visual feedback.
Dependencies
- jQuery (3.4.1) - so I don't need to worry about cross browser issues LOL
- jQuery-UI (1.12.1) - for resize and draggable (cause HTML5 drag-n-drop scares me)
- Bootstrap (4.0.0) - mainly used for theoption
- FontAwesome (5.10.0) - button icons on slicer title bar
Install
<link type="text/css" rel="stylesheet" href="../dist/css/slicer-js.min.css" /> <script type="text/javascript" src="../dist/js/slicer-js.min.js"></script>
Usage
<script type="application/javascript">
document.addEventListener('DOMContentLoaded', function(){
//BASIC CREATE
(new Slicer())
.attach({
container: $('#example'),
field: 'Position'})
.make_editable();
//ALL OPTIONS CREATE
(new Slicer())
.attach({
container: $('#example'),
dataset: null,
style: 'secondary',
title: 'Age of Staff',
field: 'Age',
top: '100px',
left: '300px',
width: '180px',
height: '300px',
on_change: function(){
console.log('START save change to age')
},
on_before_change: function(){
console.log('STOP save change to age')
}
})
.make_editable();
});
</script>
Options
container
Optional
Only ommit this value (or set it to null ) if you are providing thevalue.
Container into which the slicer should be created. If no dataset is provided, it will assume the container is an HTML table and then convert it to a dataset.
field
Mandatory
This is the field whose unique list of value should be shown in the slicer
dataset
Optional
Default : null
Only omit this value if you are providing an HTML table in thefield.
Object representing the data to render into the slicer.
{
name : "unique-name", //string value
header : [...], //array representing the header row
rows : [[...]], //array of arrays representing the data rows in the table
}
title
Optional
Default : When omited it will use thevalue
Title to display for the slicer. When the title is omited it will use the field value.
width
Optional
Default : 400px
Width of slicer
height
Optional
Default : 200px
Height of slicer
top
Optional
Default : 200px
Absolute "top" position relative to the page
left
Optional
Default : 200px
Absolute "left" position relative to the page
style
Optional
Default : primary
This is a combination of the "default" bootstrap themes and some custom themes which is defined in the css files provided possible values are:
Bootstrap colors
- light
- primary
- warning
- danger
Custom colors
- heritage-green
- fresh-green
- future-green
- sky
- sun
- naartjie
- cerise
on_change
Optional
Callback function after the user made a selection on the page
function(){
console.log('call after user selected items on slicer');
}
on_before_change
Optional
Callback function BEFORE the user selection is applied to the table/dataset
function(){
console.log('call made before selection is applied');
}
Related
This is one of the components used in the biznous.net platform
Licence
The javascript component slicer-js is released under the MIT license
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
