Javascript based excel slicer

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章