-
Notifications
You must be signed in to change notification settings - Fork 424
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
remove jQuery from example and add frozen rows/hidden cols example
- Loading branch information
Showing
2 changed files
with
276 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
228 changes: 228 additions & 0 deletions
228
examples/example-frozen-columns-and-column-group-hidden-col.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | ||
| <link rel="shortcut icon" type="image/ico" href="favicon.ico" /> | ||
| <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> | ||
| <link rel="stylesheet" href="examples.css" type="text/css"/> | ||
| <link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/> | ||
| <link rel="stylesheet" href="../controls/slick.gridmenu.css" type="text/css"/> | ||
| <style> | ||
| .slick-preheader-panel.ui-state-default { | ||
| width: 100%; | ||
| overflow: hidden; | ||
| border-left: 0px !important; | ||
| border-bottom: 0px !important; | ||
| } | ||
| .slick-preheader-panel .slick-header-columns { | ||
| border-bottom: 0px !important; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div style="position:relative"> | ||
| <div style="width:600px;"> | ||
| <div id="myGrid" style="width:100%;height:500px;"></div> | ||
| </div> | ||
|
|
||
| <div class="options-panel"> | ||
| <h2>Demonstrates:</h2> | ||
| <ul> | ||
| <li>Frozen columns with extra header row grouping columns into categories</li> | ||
| </ul> | ||
| <div style="margin-bottom:10px"> | ||
| <button onclick="setFrozenColumns(-1)">Remove Frozen Columns</button> | ||
| <button onclick="setFrozenColumns(2)">Set 3 Frozen Columns</button> | ||
| </div> | ||
| <br/> | ||
| <input id="chkHideColumn1" type="checkbox"/> Hide Duration Column | ||
| <br/><br/> | ||
| <input id="chkHideColumn2" type="checkbox"/> Hide Finish Column | ||
| <br/> | ||
| <h2>View Source:</h2> | ||
| <ul> | ||
| <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-frozen-columns-and-column-group.html" target="_sourcewindow"> View the source for this example on Github</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="../lib/firebugx.js"></script> | ||
|
|
||
| <script src="../lib/jquery-3.1.0.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script> | ||
|
|
||
| <script src="../slick.core.js"></script> | ||
| <script src="../slick.interactions.js"></script> | ||
| <script src="../slick.dataview.js"></script> | ||
| <script src="../slick.grid.js"></script> | ||
| <script src="../controls/slick.columnpicker.js"></script> | ||
| <script src="../controls/slick.gridmenu.js"></script> | ||
|
|
||
| <script> | ||
| function CreateAddlHeaderRow() { | ||
| // when it's a frozen grid, we need to render both side (left/right) | ||
| if (options.frozenColumn >=0) { | ||
| // Add column groups to left panel | ||
| var $preHeaderPanel = $(grid.getPreHeaderPanelLeft()); | ||
| renderHeaderGroups($preHeaderPanel, 0, options.frozenColumn + 1, columns.length); | ||
|
|
||
| // Add column groups to right panel | ||
| $preHeaderPanel = $(grid.getPreHeaderPanelRight()); | ||
| renderHeaderGroups($preHeaderPanel, options.frozenColumn + 1, columns.length); | ||
| } else { | ||
| // when it's a regular grid (without frozen rows), after clearning frozen columns, we re-render everything on the left | ||
| var $preHeaderPanel = $(grid.getPreHeaderPanelLeft()); | ||
| renderHeaderGroups($preHeaderPanel, 0, columns.length); | ||
| } | ||
|
|
||
| function renderHeaderGroups(preHeaderPanel, start, end) { | ||
| preHeaderPanel.empty() | ||
| .addClass("slick-header-columns") | ||
| .css('left','-1000px') | ||
| .width(grid.getHeadersWidth()); | ||
| preHeaderPanel.parent().addClass("slick-header"); | ||
|
|
||
| var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff(); | ||
| var m, header, lastColumnGroup = '', widthTotal = 0; | ||
|
|
||
| for (var i = start; i < end; i++) { | ||
| m = columns[i]; | ||
| if (lastColumnGroup === m.columnGroup && i>start) { | ||
| widthTotal += m.width; | ||
| header.width(widthTotal - headerColumnWidthDiff) | ||
| } else { | ||
| widthTotal = m.width; | ||
| header = $("<div class='ui-state-default slick-header-column' />") | ||
| .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>") | ||
| .width(m.width - headerColumnWidthDiff) | ||
| .appendTo(preHeaderPanel); | ||
| } | ||
| lastColumnGroup = m.columnGroup; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function setFrozenColumns(frozenCols) { | ||
| grid.setOptions({ frozenColumn: frozenCols }); | ||
| options = grid.getOptions(); | ||
| CreateAddlHeaderRow(); | ||
| } | ||
|
|
||
| function pickerHeaderColumnValueExtractor(column) { | ||
| var headerGroup = column.columnGroup || ''; | ||
| if (headerGroup) { | ||
| return headerGroup + ' - ' + column.name; | ||
| } | ||
| return column.name; | ||
| } | ||
|
|
||
| var dataView; | ||
| var grid; | ||
| var data = []; | ||
| var columnpicker; | ||
| var gridMenuControl; | ||
| var options = { | ||
| enableCellNavigation: true, | ||
| enableColumnReorder: false, | ||
| createPreHeaderPanel: true, | ||
| showPreHeaderPanel: true, | ||
| preHeaderPanelHeight: 23, | ||
| explicitInitialization: true, | ||
| frozenColumn: 2, | ||
|
|
||
| // if you wish to include the columnGroup as part of the pickers, you can do so with following code | ||
| columnPicker: { | ||
| headerColumnValueExtractor: pickerHeaderColumnValueExtractor | ||
| }, | ||
| gridMenu: { | ||
| headerColumnValueExtractor: pickerHeaderColumnValueExtractor, | ||
| customTitle: "Commands", | ||
| columnTitle: "Columns", | ||
| customItems: [ | ||
| { | ||
| iconImage: "../images/delete.png", | ||
| title: "Clear Frozen Columns", | ||
| disabled: false, | ||
| command: "clear-frozen-columns", | ||
| cssClass: 'bold', // container css class | ||
| textCssClass: 'red' // just the text css class | ||
| } | ||
| ] | ||
| }, | ||
| }; | ||
| var columns = [ | ||
| {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false }, | ||
| {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", columnGroup:"Common Factor"}, | ||
| {id: "duration", name: "Duration", field: "duration", columnGroup:"Common Factor"}, | ||
| {id: "start", name: "Start", field: "start", minWidth: 140, columnGroup:"Period"}, | ||
| {id: "finish", name: "Finish", field: "finish", minWidth: 140, columnGroup:"Period"}, | ||
| {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 140, resizable: false, columnGroup:"Analysis"}, | ||
| {id: "effort-driven", name: "Effort Driven", width: 140, minWidth: 20, maxWidth: 140, field: "effortDriven", columnGroup:"Analysis"} | ||
| ]; | ||
|
|
||
| $(function () { | ||
| for (var i = 0; i < 50000; i++) { | ||
| var d = (data[i] = {}); | ||
|
|
||
| d["id"] = "id_" + i; | ||
| d["num"] = i; | ||
| d["title"] = "Task " + i; | ||
| d["duration"] = "5 days"; | ||
| d["start"] = "01/01/2009"; | ||
| d["finish"] = "01/05/2009"; | ||
| d["percentComplete"] = Math.round(Math.random() * 100); | ||
| d["effortDriven"] = (i % 5 == 0); | ||
| } | ||
|
|
||
| dataView = new Slick.Data.DataView(); | ||
| grid = new Slick.Grid("#myGrid", dataView, columns, options); | ||
| columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); | ||
| gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options); | ||
|
|
||
| dataView.onRowCountChanged.subscribe(function (e, args) { | ||
| grid.updateRowCount(); | ||
| grid.render(); | ||
| }); | ||
|
|
||
| dataView.onRowsChanged.subscribe(function (e, args) { | ||
| grid.invalidateRows(args.rows); | ||
| grid.render(); | ||
| }); | ||
|
|
||
| grid.init(); | ||
|
|
||
| grid.onColumnsResized.subscribe(function (e, args) { | ||
| CreateAddlHeaderRow(); | ||
| }); | ||
|
|
||
| // subscribe to Grid Menu event(s) | ||
| gridMenuControl.onCommand.subscribe(function(e, args) { | ||
| if(args.command === "clear-frozen-columns") { | ||
| setFrozenColumns(-1); | ||
| } | ||
| }); | ||
|
|
||
| document.querySelector('#chkHideColumn1').addEventListener("change", function(e) { | ||
| //$("#chkHideColumn").change(function () { | ||
| var hideCol = document.querySelector('#chkHideColumn1').checked || false; | ||
| columns[2].hidden = hideCol; | ||
| grid.setColumns(columns); | ||
| }); | ||
|
|
||
| document.querySelector('#chkHideColumn2').addEventListener("change", function(e) { | ||
| //$("#chkHideColumn").change(function () { | ||
| var hideCol = document.querySelector('#chkHideColumn2').checked || false; | ||
| columns[4].hidden = hideCol; | ||
| grid.setColumns(columns); | ||
| }); | ||
|
|
||
| // Initialise data | ||
| dataView.beginUpdate(); | ||
| dataView.setItems(data); | ||
| dataView.endUpdate(); | ||
|
|
||
| CreateAddlHeaderRow(); | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> |