Javascript based excel slicer

栏目: IT技术 · 发布时间: 5年前

内容简介: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.

Javascript based excel slicer

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS权威指南(第三版)

CSS权威指南(第三版)

[美] Eric A.Meyer / 侯妍、尹志忠 / 中国电力出版社 / 2007-10 / 58.00

你是否既想获得丰富复杂的网页样式,同时又想节省时间和精力?本书为你展示了如何遵循CSS最新规范(CSS2和CSS2.1)将层叠样式表的方方面面应用于实践。 通过本书提供的诸多示例,你将了解如何做到仅在一处建立样式表就能创建或修改整个网站的外观,以及如何得到HTML力不能及的更丰富的表现效果。 资深CSS专家Eric A.Meyer。利用他独有的睿智和丰富的经验对属性、标记、标记属性和实......一起来看看 《CSS权威指南(第三版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码