要約: この記事は元々、Grape City の技術チームによって CSDN に公開されたものです。転載元を明記してください:グレープシティ公式ウェブサイト、グレープシティは、開発者に力を与えるための専門的な開発ツール、ソリューション、サービスを開発者に提供します。
序文
今日の情報爆発の時代では、大量のデータに直面し、より良い意思決定を行うためにそれらから貴重な情報を抽出する必要があることがよくあります。データ スクリーニングは、大量の情報の中から必要なものを素早く見つけるのに役立つ方法にすぎません。データ フィルタリング ツールを使用すると、特定の条件でデータを簡単に除外したり、データをフィルタリングして並べ替えたりして、データをよりよく分析して理解することができます。データ スクリーニングは、大量の情報を効果的に管理する手段であるだけでなく、最新のデータ処理技術の中核でもあります。ビッグデータの時代では、データ スクリーニング スキルを理解し、習熟することは、所有するデータ リソースをより深く理解し、使用するのに役立ちます。今回は、JavaScript を使用してレポートにデータ フィルター機能を導入する方法を編集者が紹介します。
この記事ではプログラミング環境として Visual Studio Code (以下、VSCode) というソフトウェアを使用していますので、管理者として実行してください。
この記事の内容:
1. デモの紹介
上図は表形式データフィルタリングデモの実行ページで、ページ内には営業担当者名、生年月日、営業エリア、営業担当者の総売上高、月次売上高、売上率の5つのデータ列が表示されています。 . 各列には 10 行のデータ情報が含まれます。
要件は次の 2 つです。
- 売場北の販売員情報や販売量を確認したい。
- ページ上の年齢に基づいてデータをフィルターしたいだけです。
解決策: 1. [地域] テーブルのドロップダウン ボックスをクリックし、[北] オプションを選択して、[OK] をクリックします。クエリされたデータには北の情報のみが含まれます。
2. 右側のオプションバーの「Birth（生年月日）」チェックボックスのみを選択すると、生年月日の情報のみがフィルタリングされます。
上記はテーブル フィルタリング機能の簡単な紹介であり、次に JavaScript を使用してこのデモを作成する方法を説明します。
2. コード
2.1 プロジェクトファイルの作成とリソースのインポート
最初のステップは、ファイル マネージャーで空のフォルダーをプロジェクトとして作成し、VSCode で開きます。
2 番目のステップでは、JS ファイルと CSS ファイルを保存するための 2 つの新しいフォルダーをプロジェクト内に作成します。
3 番目のステップは、必要な JS ファイルと CSS ファイルを導入することです。(完全なコードは、その他のリソースのソース リンクにあります)。
ここまででプロジェクトの作成とリソースのインポートまでが完了しましたので、ここからはJSの記述を紹介します。
2.2 JSファイルのインポート
最初のステップは、JS フォルダーに新しい .JS ファイルを作成することです。名前は任意です。
2 番目のステップは、必要な JavaScript メソッドを JS ファイルに導入することです。
1. ページに必要なデータと初期化方法を設定します。
//データを設定する
var salesData = [
["SalesPers", "Birth", "Region", "SaleAmt", "ComPct", "ComAmt"],
["Joe", new Date("2000/01/23"), "North", 260, 0.1, 26],
["Robert", new Date("1988/08/21"), "South", 660, 0.15, 99],
["Michelle", new Date("1995/08/03"), "East", 940, 0.15, 141],
["Erich", new Date("1994/05/23"), "West", 410, 0.12, 49.2],
["Dafna", new Date("1992/07/21"), "North", 800, 0.15, 120],
["Rob", new Date("1995/11/03"), "South", 900, 0.15, 135],
["Jonason", new Date("1987/02/11"), "West", 300, 0.17, 110],
["Enana", new Date("1997/04/01"), "West", 310, 0.16, 99.2],
["Dania", new Date("1997/02/15"), "North", 500, 0.10, 76],
["Robin", new Date("1991/12/28"), "East", 450, 0.18, 35]];
//页面加载
window.onload = function () {
tableColumnsContainer = _getElementById("tableColumnsContainer");
//设置
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 1});
//初始化方法
initSpread(spread);
};
2. initSpread メソッドを編集します。
(1)：データの絞り込み条件を追加します。
var sheet = spread.getSheet(0);
sheet.suspendPaint();
//设置表格是否可以溢出
sheet.options.allowCellOverflow = true;
sheet.name("FilterDialog");
sheet.setArray(1, 1, salesData);
//添加数据筛选
var filter = new spreadNS.Filter.HideRowFilter(new spreadNS.Range(2, 1, salesData.length - 1, salesData[0].length));
sheet.rowFilter(filter);
//选择想要筛选的数据
prepareFilterItems(sheet, salesData[0]);
sheet.defaults.rowHeight = 28;
sheet.setColumnWidth(1, 110);
sheet.setColumnWidth(2, 80);
sheet.setColumnWidth(3, 100);
sheet.setColumnWidth(4, 80);
sheet.setColumnWidth(5, 80);
sheet.setColumnWidth(6, 80);
sheet.getRange(2, 2, 10, 1).formatter("yyyy/mm/dd");
sheet.resumePaint();
(2) データオプションのフィルタリング方法を選択します。
//选择想要展示的数据筛选项
function prepareFilterItems(sheet, headers) {
var items = [];
var filter = sheet.rowFilter(),
range = filter.range,
startColumn = range.col;
//循环遍历想要获取的数据
for (var c = 0, length = headers.length; c < length; c++) {
var name = headers[c];
items.push('<div><label><input type="checkbox" checked data-index="' + (startColumn + c) + '">'+ name + '</label></div>');
}
tableColumnsContainer.innerHTML = items.join("");
var nodeList = tableColumnsContainer.querySelectorAll("input[type='checkbox']");
checkBoxes = [];
for (var i = 0, count = nodeList.length; i < count; i++) {
var element = nodeList[i];
checkBoxes.push(element);
//添加监听事件
element.addEventListener('change', function () {
var index = +this.dataset.index; // +this.getAttribute("data-index");
//判断是否显示筛选条件和筛选后的数据信息
if (filter) {
filter.filterButtonVisible(index, this.checked);
}
});
}
}
(3) すべての絞り込み条件を表示する方法と、すべての絞り込み条件を非表示にする方法。
// フィルター条件を表示する
_getElementById("showAll").addEventListener('click',function () {
if (filter) {
filter.filterButtonVisible(true);
checkBoxes.forEach(function(item) {
item.checked = true;
});
}
});
// フィルターを非表示にする
_getElementById("hideAll").addEventListener('click',function () {
if (filter) {
filter.filterButtonVisible(false);
checkBoxes.forEach(function(item) {
item.checked = false;
});
}
});
(4) 要素を取得するメソッド。
//要素を取得するメソッド
function _getElementById(id){
return document.getElementById(id);
}
ここまででJSファイルの導入は完了しましたので、以下にCSSの記述を紹介します。
2.3 CSS ファイルのインポート
最初の手順では、CSS フォルダーに新しい .CSS ファイルを作成します。名前は任意です。
2 番目のステップで記述された CSS スタイル:
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-group {
margin-bottom: 6px;
}
.option-group input[type="checkbox"] {
margin-right: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#ss {
height: 98vh;
float: left;
width: 85%;
/* left: auto; */
}
ここまででCSSファイルの導入が完了しました。次にHtmlファイルの準備について説明します。
2.4 HTMLファイルのインポート
最初の手順では、プロジェクト ファイルに .Html ファイルを作成します。名前は任意です。
2 番目のステップは、主にスパークライン コンポーネントを使用して、JS ファイル リソースを HTML ファイルにインポートすることです (他のコンポーネント リソースについては、ここをクリックしてください)。
<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>
<!-- 形状相关资源-->
<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>
</head>
3 番目のステップは、テーブルとフィルター列の形式を記述することです。
<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>
4 番目のステップは、JS ファイルと CSS ファイルをインポートすることです (注: SRC および HREF のファイル名は、2 番目と 3 番目のステップのファイル名と一致している必要があります。そうでない場合、インポートは失敗します)。
<head>
<script src="js/rowFilter.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/rowFilter.css">
</head>
ここまででHTMLファイルの導入は完了です。
2.5 コードを実行する
実行する前に、プラグイン Live Server をダウンロードしてインストールする必要があります。
(ライブサーバープラグイン)
プラグインをインストールした後、VSCode ソフトウェアを再起動し、HTML ファイル内の Open With The Live Server (ブラウザで開く) を右クリックして実行する必要があります。
3. さらなるリソース
3.1 完全なコードリソース
https://github.com/GrapeCityXA/SpreadJS-rowFilter/tree/main（Github）
https://gitee.com/GrapeCity/spread-js-row-filter (Gitee)
3.2 その他のフォームプラグインのデモ
JavaScript の使用に加えて、Vue や React などの一般的なフレームワークでもデータ フィルタリング機能を導入することができ、それだけでなく、データ バインディングやセル パースペクティブなど、テーブルをより見やすくするための多くの高度な操作も実装できます。インタラクティブで使いやすいセックス。