spread-js-row-filter
/
rowFilter.html

<!doctype html>
<html style="height:100%;font-size:14px;">

<!--数据筛选-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="spreadjs culture" content="zh-cn" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据筛选</title>
    <!-- 引入SpreadJS相关的CSS,默认会有一个CSS
    SpreadJS默认提供了7种CSS，可以选择一个适合当前项目的引入
-->
    <link rel="stylesheet" type="text/css" href="./css/gc.spread.sheets.excel2013white.15.1.0.css" />
    <!-- 核心资源，最小依赖资源，只要引入了该资源，组件运行时就能显示出来 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.all.15.1.0.min.js"></script>
    <!-- 中文资源文件，组件运行时默认会用英文资源，使用中文资源需要引入并设置 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.resources.zh.15.1.0.min.js"></script>
    <!-- 导入导出excel文件的相关资源 -->
    <!-- <script type="text/javascript" src="./js/gc.spread.excelio.15.1.0.min.js"></script> -->
    <!-- 形状相关资源-->
    <script type="text/javascript" src="./js/gc.spread.sheets.shapes.15.1.0.min.js"></script>
    <!-- 透视表相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.pivot.pivottables.15.1.0.min.js"></script>
    <!-- 图表的相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.charts.15.1.0.min.js"></script>
    <!-- 二维码相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.barcode.15.1.0.min.js"></script>
    <!-- 打印相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.print.15.1.0.min.js"></script>
    <!-- PDF相关资源 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.pdf.15.1.0.min.js"></script>
    <!-- 集算表相关资源 集算表是SpreadJS特有的功能 -->
    <script type="text/javascript" src="./js/gc.spread.sheets.tablesheet.15.1.0.min.js"></script>
    <style>

    </style>
    <script src="js/rowFilter.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/rowFilter.css">
</head>
<body>

    <div class="sample-tutorial">
        <div id="ss" class="sample-spreadsheets"></div>
        <div class="options-container">
            <div class="option-group">
                <!--显示所有的筛选条件-->
                <input id="showAll" type="button" value="Show All" title="Show all filter buttons of the table"/>
                 <!--隐藏所有的筛选条件-->
                <input id="hideAll" type="button" value="Hide All" title="Hide all filter buttons of the table"/>
            </div>
            <div class="option-group">
                <h4>Show filter buttons:</h4>
                <div id="tableColumnsContainer"></div>
            </div>
        </div>
    </div>
</body>
</html>