フィルター

テーブルシートは、テキスト数値日付の条件を含む、Excelライクなフィルターダイアログをサポートします。大量のデータでも、高速なフィルタリングが可能です。また、allowSortallowFilterByValueallowFilterByListを使用して、特定の列の表示について、領域の表示でフィルターの設定や、並べ替えをサポートします。

テーブルシートは、テキスト、数値、日付の条件を含む、Excelライクなフィルターをサポートします。 大量のデータがある場合の、フィルターダイアログのパフォーマンスを向上させるために、テーブルシートには特定のフィールドフィルターインデックスをキャッシュするオプションが用意されています。 チェックリストなど、フィルターダイアログの一部が不要な場合、フィルターダイアログの各部分の表示を制御する、いくつかの列のオプションを用意しています。 allowSort、allowFilterByValue、allowFilterByListがすべてfalseのとき、列ヘッダーのフィルターボタンは表示されません。
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var tableName = "Employee"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var sheet, spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); //register self-defined row action command initSpread(); bindEvents(); }; function initSpread() { spread = GC.Spread.Sheets.findControl(document.getElementById("ss")); spread.suspendPaint(); //1. init a sheet spread.clearSheets(); spread.clearSheetTabs(); sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); var data = generateData(+getElementById("dataRows").value); var timeBeforeCreate = new Date(); var dataManager = spread.dataManager(); var employeeTable = dataManager.addTable("employeeTable", { data: data.employees, schema: { columns: { id: { indexed: getProperty("createIdIndexes", 'checked') }, birth: { indexed: getProperty("createBirthIndexes", 'checked') } } } }); var departmentTable = dataManager.addTable("departmentTable", { data: data.departments }); dataManager.addRelationship(employeeTable, "dept", "department", departmentTable, "dept_no", "employees"); dataManager.addRelationship(departmentTable, "leader_id", "manager", employeeTable, "id", "a"); spread.resumePaint(); var numericStyle = new GC.Spread.Sheets.Style(); numericStyle.formatter = "$ #,##0.00"; var formatStringStyle = new GC.Spread.Sheets.Style(); formatStringStyle.formatter = 'yyyy-mm-dd'; var visibleInfo_id = {}; if (!getProperty("sortByValue_id", 'checked')) { visibleInfo_id.sortByValue = false; } if (!getProperty("filterByValue_id", 'checked')) { visibleInfo_id.filterByValue = false; } if (!getProperty("listFilterArea_id", 'checked')) { visibleInfo_id.listFilterArea = false; } var visibleInfo_birthday = {}; if (!getProperty("sortByValue_birthday", 'checked')) { visibleInfo_birthday.sortByValue = false; } if (!getProperty("filterByValue_birthday", 'checked')) { visibleInfo_birthday.filterByValue = false; } if (!getProperty("listFilterArea_birthday", 'checked')) { visibleInfo_birthday.listFilterArea = false; } var cols = [ { value: 'id', caption: 'ID', allowSort: visibleInfo_id.sortByValue, allowFilterByValue: visibleInfo_id.filterByValue, allowFilterByList: visibleInfo_id.listFilterArea}, { value: 'firstName', caption: 'First Name', width: 100}, { value: 'lastName', caption: 'Last Name', width: 100}, { value: 'birth', caption: 'Birthday', width: 100, style: formatStringStyle, allowSort: visibleInfo_birthday.sortByValue_birthday, allowFilterByValue: visibleInfo_birthday.filterByValue_birthday, allowFilterByList: visibleInfo_birthday.listFilterArea_birthday}, { value: 'state', caption: 'State', width: 100}, { value: 'dept', caption: 'Department No', width: 130}, { value: 'title', caption: 'Title', width: 120}, { value: 'salary', caption: 'Salary', style: numericStyle, width: 100}, ]; var employeeView = employeeTable.addView("employeeView", cols, undefined); employeeView.fetch().then(function (args) { sheet.suspendPaint(); sheet.setDataView(employeeView); sheet.resumePaint(); var timeGap = new Date() - timeBeforeCreate; getElementById('showEventArgs').value = ("Fetch data and paint - " + (timeGap) + " ms"); }); } function randomFromList(list) { return list[~~(Math.random() * list.length)]; } function generateData(itemCount) { var data = {employees:[], departments: departments}; var states = ["Texas", "New York", "Florida", "Washington", "Ohio"]; var department_id = ["D001", "D002", "D003", "D004", "D005", "D006", "D007", "D008", "D009"]; var title = ["Senior Engineer", "Staff", "Engineer", "Senior Staff", "Assistant Engineer", "Technique Leader", "Manager"]; for (var i = 0; i < itemCount; i++) { var date = new Date(parseInt(Math.random() * 12052666) * 24 * 3600); //The timestamp date.setHours(0,0,0,0); var item = { id: i + 1, firstName: randomFromList(firstNames), lastName: randomFromList(lastNames), birth: date, state: randomFromList(states), dept: i < 9 ? department_id[i] : randomFromList(department_id), title: i < 9 ? "Manager" : randomFromList(title), salary: 3000 + parseInt(Math.random() * 100) * 500, }; data.employees.push(item); } return data; } function bindEvents() { var showButton = document.getElementById('setDataSource'); showButton.addEventListener('click', function () { initSpread(); }); var sortStart; spread.bind(GC.Spread.Sheets.Events.RangeSorting, function(e,args) { sortStart = new Date(); }); spread.bind(GC.Spread.Sheets.Events.RangeSorted, function(e,args) { getElementById('showEventArgs').value = (getElementById('showEventArgs').value + "\r\nSort - " + (new Date()-sortStart) + " ms"); }); var filterStart; spread.bind(GC.Spread.Sheets.Events.RangeFiltering, function(e,args) { filterStart = new Date(); }); spread.bind(GC.Spread.Sheets.Events.RangeFiltered, function(e,args) { getElementById('showEventArgs').value = (getElementById('showEventArgs').value + "\r\nFilter - " + (new Date()-filterStart) + " ms"); }); } function setTooltip(options, tooltip) { options.tooltip = tooltip; return options; } function getProperty(domId, prop) { return getElementById(domId)[prop]; } function getElementById (domId) { return document.getElementById(domId); } function setProperty(domId, prop, value) { getElementById(domId)[prop] = value; } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/departments.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div id="options-container" class="options-container"> <label for="dataRows">行数:</label> <select id="dataRows"> <option value="10">10</option> <option value="30">30</option> <option value="50" selected="selected">50</option> <option value="100">100</option> <option value="1000">1000</option> <option value="10000">10000</option> <option value="100000">100000</option> <option value="1000000">1000000</option> </select> <br> <fieldset> <legend>フィルターインデックスの作成</legend> <input type="checkbox" id="createIdIndexes" checked/> <label for="createIdIndexes">IDインデックスの作成</label> <br> <input type="checkbox" id="createBirthIndexes" checked/> <label for="createBirthIndexes">Birthdayインデックスの作成</label> <br> </fieldset> <fieldset> <legend>ID列のフィルターダイアログオプション</legend> <input type="checkbox" id="sortByValue_id" checked/> <label for="sortByValue_id">並べ替えを許可する</label> <br> <input type="checkbox" id="filterByValue_id" checked/> <label for="filterByValue_id">値によるフィルターを許可する</label> <br> <input type="checkbox" id="listFilterArea_id" checked/> <label for="listFilterArea_id">リストによるフィルターを許可する</label> <br> </fieldset> <fieldset> <legend>Birthday列のフィルターダイアログオプション</legend> <input type="checkbox" id="sortByValue_birthday" checked/> <label for="sortByValue_birthday">並べ替えを許可する</label> <br> <input type="checkbox" id="filterByValue_birthday" checked/> <label for="filterByValue_birthday">値によるフィルターを許可する</label> <br> <input type="checkbox" id="listFilterArea_birthday" checked/> <label for="listFilterArea_birthday">リストによるフィルターを許可する</label> <br> </fieldset> <input type="button" style="margin-left: 30px; margin-top: 10px;width:200px;" id="setDataSource" value="データソースを設定する"/> <fieldset style="height: 155px;"> <legend>パフォーマンス</legend> <textarea id="showEventArgs" style="width: 236px;height: 135px;" cols="64" rows="15"></textarea> </fieldset> </div> </div> </body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } fieldset { padding: 6px; margin: 0; margin-top: 10px; } .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; } fieldset span, fieldset input, fieldset select { display: inline-block; text-align: left; } fieldset span { width: 50px; } fieldset input[type=text] { width: calc(100% - 58px); } fieldset input[type=button] { width: 100%; text-align: center; } fieldset select { width: calc(100% - 50px); } .field-line { margin-top: 4px; }