diff options
Diffstat (limited to 'examples/example4-model.html')
| -rw-r--r-- | examples/example4-model.html | 594 |
1 files changed, 297 insertions, 297 deletions
diff --git a/examples/example4-model.html b/examples/example4-model.html index 9b7fdc2..31b6466 100644 --- a/examples/example4-model.html +++ b/examples/example4-model.html @@ -1,297 +1,297 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>SlickGrid example</title>
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../slick.pager.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../css/custom-theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="../slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
- <style>
- .cell-title {
- font-weight: bold;
- }
-
- .cell-effort-driven {
- text-align: center;
- }
- </style>
- </head>
- <body>
- <script language="JavaScript" src="../lib/firebugx.js"></script>
- <script language="JavaScript" src="../lib/jquery-1.3.2.min.js"></script>
- <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
- <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script>
- <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script>
- <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script>
-
- <script language="JavaScript" src="../slick.editors.js"></script>
- <script language="JavaScript" src="../slick.grid.js"></script>
- <script language="JavaScript" src="../slick.globaleditorlock.js"></script>
- <script language="JavaScript" src="../slick.model.js"></script>
- <script language="JavaScript" src="../slick.pager.js"></script>
- <script language="JavaScript" src="../slick.columnpicker.js"></script>
-
-
- <div style="width:600px;float:left;">
- <div class="grid-header" style="width:100%">
- <label>SlickGrid</label>
- </div>
- <div id="myGrid" style="width:100%;height:500px;"></div>
- <div id="pager" style="width:100%;height:20px;"></div>
- </div>
-
- <div class="options-panel" style="width:320px;margin-left:650px;">
- <b>Search:</b>
- <hr/>
- <div style="padding:6px;">
- <label style="width:200px;float:left">Show tasks with % at least: </label>
- <div style="padding:2px;">
- <div style="width:100px;display:inline-block;" id="pcSlider"></div>
- </div>
- <br/>
- <label style="width:200px;float:left">And title including:</label>
- <input type=text id="txtSearch" style="width:100px;">
- <br/><br/>
- <button id="btnSelectRows">Select first 10 rows</button>
- </div>
- </div>
-
-
- <div style="margin-left:650px;margin-top:40px;;">
- <h2>Demonstrates:</h2>
-
- <ul>
- <li>a filtered Model (DataView) as a data source instead of a simple array</li>
- <li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li>
- <li>
- <b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/>
- The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.
- </li>
- <li>adding new rows, bidirectional sorting</li>
- <li>column options: setValueHandler, cannotTriggerInsert</li>
- <li><font color=red>NOTE:</font> all filters are immediately applied to new/edited rows</li>
- <li>Handling row selection against model changes.</li>
- <li>Paging.</li>
- </ul>
- </div>
-
-
- <script>
- var dataView;
- var grid;
- var data = [];
- var selectedRowIds = [];
-
- var columns = [
- {id:"sel", name:"#", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, sortable:false, unselectable:true },
- {id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem},
- {id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem},
- {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem},
- {id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
- {id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
- {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true}
- ];
-
- var options = {
- editable: true,
- enableAddRow: true,
- enableCellNavigation: true,
- asyncEditorLoading: true,
- forceFitColumns: true
- };
-
- var sortcol = "title";
- var sortdir = 1;
- var percentCompleteThreshold = 0;
- var searchString = "";
-
- function requiredFieldValidator(value) {
- if (value == null || value == undefined || !value.length)
- return {valid:false, msg:"This is a required field"};
- else
- return {valid:true, msg:null};
- }
-
- function myFilter(item) {
- if (item["percentComplete"] < percentCompleteThreshold)
- return false;
-
- if (searchString != "" && item["title"].indexOf(searchString) == -1)
- return false;
-
- return true;
- }
-
- function percentCompleteSort(a,b) {
- return a["percentComplete"] - b["percentComplete"];
- }
-
- function comparer(a,b) {
- var x = a[sortcol], y = b[sortcol];
- return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
- }
-
- function updateItem(value,columnDef,item) {
- item[columnDef.field] = value;
- dataView.updateItem(item.id,item);
- }
-
- function addItem(columnDef,value) {
- var item = {"id": "new_" + (Math.round(Math.random()*10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false};
- item[columnDef.field] = value;
- dataView.addItem(item);
- }
-
-
-
-
- $(function()
- {
- // prepare the data
- for (var i=0; i<50000; i++) {
- var d = (data[i] = {});
-
- d["id"] = "id_" + i;
- d["title"] = "Task " + i;
- d["duration"] = "5 days";
- d["percentComplete"] = Math.round(Math.random() * 100);
- d["start"] = "01/01/2009";
- d["finish"] = "01/05/2009";
- d["effortDriven"] = (i % 5 == 0);
- }
-
-
- dataView = new DataView();
- grid = new SlickGrid($("#myGrid"), dataView.rows, columns, options);
- var pager = new SlickGridPager(dataView, grid, $("#pager"));
- var columnpicker = new SlickColumnPicker(columns, grid);
-
- grid.onAddNewRow = addItem;
-
- grid.onKeyDown = function(e) {
- // select all rows on ctrl-a
- if (e.which != 65 || !e.ctrlKey)
- return false;
-
- var rows = [];
- selectedRowIds = [];
-
- for (var i=0; i<dataView.rows.length; i++) {
- rows.push(i);
- selectedRowIds.push(dataView.rows[i].id);
- }
-
- grid.setSelectedRows(rows);
-
- return true;
- }
-
- grid.onSelectedRowsChanged = function() {
- selectedRowIds = [];
- var rows = grid.getSelectedRows();
- for (var i=0, l=rows.length; i<l; i++) {
- selectedRowIds.push(rows[i].id);
- }
- }
-
- grid.onSort = function(sortCol,sortAsc) {
- sortdir = sortAsc?1:-1;
- sortcol = sortCol.field;
- dataView.sort(comparer);
- }
-
- // wire up model events to drive the grid
- dataView.onRowCountChanged.subscribe(function(args) {
- grid.updateRowCount();
- });
-
- dataView.onRowsChanged.subscribe(function(rows) {
- grid.removeRows(rows);
- grid.render();
-
- if (selectedRowIds.length > 0)
- {
- // since how the original data maps onto rows has changed,
- // the selected rows in the grid need to be updated
- var rows = [];
- for (var i = 0; i < selectedRowIds.length; i++)
- {
- var idx = dataView.getRowById(selectedRowIds[i]);
- if (idx != undefined)
- rows.push(idx);
- }
-
- grid.setSelectedRows(rows);
- }
- });
-
- dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
- var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
- grid.setOptions({enableAddRow:isLastPage||pagingInfo.pageSize==0});
- });
-
-
-
- var h_runfilters = null;
-
- // wire up the slider to apply the filter to the model
- $("#pcSlider").slider({
- "range": "min",
- "slide": function(event,ui) {
- if (GlobalEditorLock.isEditing())
- GlobalEditorLock.cancelCurrentEdit();
-
- if (percentCompleteThreshold != ui.value)
- {
- window.clearTimeout(h_runfilters);
- h_runfilters = window.setTimeout(dataView.refresh, 10);
- percentCompleteThreshold = ui.value;
- }
- }
- });
-
-
- // wire up the search textbox to apply the filter to the model
- $("#txtSearch").keyup(function(e) {
- if (GlobalEditorLock.isEditing())
- GlobalEditorLock.cancelCurrentEdit();
-
- // clear on Esc
- if (e.which == 27)
- this.value = "";
-
- searchString = this.value;
- dataView.refresh();
- });
-
- $("#btnSelectRows").click(function() {
- var rows = [];
- selectedRowIds = [];
-
- for (var i=0; i<10 && i<dataView.rows.length; i++) {
- rows.push(i);
- selectedRowIds.push(dataView.rows[i].id);
- }
-
- grid.setSelectedRows(rows);
- });
-
-
-
-
- // initialize the model after all the events have been hooked up
- dataView.beginUpdate();
- dataView.setItems(data);
- dataView.setFilter(myFilter);
- //dataView.setPagingOptions({pageSize:25});
- dataView.endUpdate();
-
- $("#gridContainer").resizable();
- })
-
- </script>
-
- </body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> + <link rel="stylesheet" href="../slick.pager.css" type="text/css" media="screen" charset="utf-8" /> + <link rel="stylesheet" href="../css/custom-theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" /> + <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> + <link rel="stylesheet" href="../slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" /> + <style> + .cell-title { + font-weight: bold; + } + + .cell-effort-driven { + text-align: center; + } + </style> + </head> + <body> + <script language="JavaScript" src="../lib/firebugx.js"></script> + <script language="JavaScript" src="../lib/jquery-1.3.2.min.js"></script> + <script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script> + <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script> + <script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script> + <script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script> + + <script language="JavaScript" src="../slick.editors.js"></script> + <script language="JavaScript" src="../slick.grid.js"></script> + <script language="JavaScript" src="../slick.globaleditorlock.js"></script> + <script language="JavaScript" src="../slick.model.js"></script> + <script language="JavaScript" src="../slick.pager.js"></script> + <script language="JavaScript" src="../slick.columnpicker.js"></script> + + + <div style="width:600px;float:left;"> + <div class="grid-header" style="width:100%"> + <label>SlickGrid</label> + </div> + <div id="myGrid" style="width:100%;height:500px;"></div> + <div id="pager" style="width:100%;height:20px;"></div> + </div> + + <div class="options-panel" style="width:320px;margin-left:650px;"> + <b>Search:</b> + <hr/> + <div style="padding:6px;"> + <label style="width:200px;float:left">Show tasks with % at least: </label> + <div style="padding:2px;"> + <div style="width:100px;display:inline-block;" id="pcSlider"></div> + </div> + <br/> + <label style="width:200px;float:left">And title including:</label> + <input type=text id="txtSearch" style="width:100px;"> + <br/><br/> + <button id="btnSelectRows">Select first 10 rows</button> + </div> + </div> + + + <div style="margin-left:650px;margin-top:40px;;"> + <h2>Demonstrates:</h2> + + <ul> + <li>a filtered Model (DataView) as a data source instead of a simple array</li> + <li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li> + <li> + <b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/> + The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows. + </li> + <li>adding new rows, bidirectional sorting</li> + <li>column options: setValueHandler, cannotTriggerInsert</li> + <li><font color=red>NOTE:</font> all filters are immediately applied to new/edited rows</li> + <li>Handling row selection against model changes.</li> + <li>Paging.</li> + </ul> + </div> + + + <script> + var dataView; + var grid; + var data = []; + var selectedRowIds = []; + + var columns = [ + {id:"sel", name:"#", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, sortable:false, unselectable:true }, + {id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem}, + {id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem}, + {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem}, + {id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem}, + {id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem}, + {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true} + ]; + + var options = { + editable: true, + enableAddRow: true, + enableCellNavigation: true, + asyncEditorLoading: true, + forceFitColumns: true + }; + + var sortcol = "title"; + var sortdir = 1; + var percentCompleteThreshold = 0; + var searchString = ""; + + function requiredFieldValidator(value) { + if (value == null || value == undefined || !value.length) + return {valid:false, msg:"This is a required field"}; + else + return {valid:true, msg:null}; + } + + function myFilter(item) { + if (item["percentComplete"] < percentCompleteThreshold) + return false; + + if (searchString != "" && item["title"].indexOf(searchString) == -1) + return false; + + return true; + } + + function percentCompleteSort(a,b) { + return a["percentComplete"] - b["percentComplete"]; + } + + function comparer(a,b) { + var x = a[sortcol], y = b[sortcol]; + return sortdir * (x == y ? 0 : (x > y ? 1 : -1)); + } + + function updateItem(value,columnDef,item) { + item[columnDef.field] = value; + dataView.updateItem(item.id,item); + } + + function addItem(columnDef,value) { + var item = {"id": "new_" + (Math.round(Math.random()*10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false}; + item[columnDef.field] = value; + dataView.addItem(item); + } + + + + + $(function() + { + // prepare the data + for (var i=0; i<50000; i++) { + var d = (data[i] = {}); + + d["id"] = "id_" + i; + d["title"] = "Task " + i; + d["duration"] = "5 days"; + d["percentComplete"] = Math.round(Math.random() * 100); + d["start"] = "01/01/2009"; + d["finish"] = "01/05/2009"; + d["effortDriven"] = (i % 5 == 0); + } + + + dataView = new DataView(); + grid = new SlickGrid($("#myGrid"), dataView.rows, columns, options); + var pager = new SlickGridPager(dataView, grid, $("#pager")); + var columnpicker = new SlickColumnPicker(columns, grid); + + grid.onAddNewRow = addItem; + + grid.onKeyDown = function(e) { + // select all rows on ctrl-a + if (e.which != 65 || !e.ctrlKey) + return false; + + var rows = []; + selectedRowIds = []; + + for (var i=0; i<dataView.rows.length; i++) { + rows.push(i); + selectedRowIds.push(dataView.rows[i].id); + } + + grid.setSelectedRows(rows); + + return true; + } + + grid.onSelectedRowsChanged = function() { + selectedRowIds = []; + var rows = grid.getSelectedRows(); + for (var i=0, l=rows.length; i<l; i++) { + selectedRowIds.push(rows[i].id); + } + } + + grid.onSort = function(sortCol,sortAsc) { + sortdir = sortAsc?1:-1; + sortcol = sortCol.field; + dataView.sort(comparer); + } + + // wire up model events to drive the grid + dataView.onRowCountChanged.subscribe(function(args) { + grid.updateRowCount(); + }); + + dataView.onRowsChanged.subscribe(function(rows) { + grid.removeRows(rows); + grid.render(); + + if (selectedRowIds.length > 0) + { + // since how the original data maps onto rows has changed, + // the selected rows in the grid need to be updated + var rows = []; + for (var i = 0; i < selectedRowIds.length; i++) + { + var idx = dataView.getRowById(selectedRowIds[i]); + if (idx != undefined) + rows.push(idx); + } + + grid.setSelectedRows(rows); + } + }); + + dataView.onPagingInfoChanged.subscribe(function(pagingInfo) { + var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows; + grid.setOptions({enableAddRow:isLastPage||pagingInfo.pageSize==0}); + }); + + + + var h_runfilters = null; + + // wire up the slider to apply the filter to the model + $("#pcSlider").slider({ + "range": "min", + "slide": function(event,ui) { + if (GlobalEditorLock.isEditing()) + GlobalEditorLock.cancelCurrentEdit(); + + if (percentCompleteThreshold != ui.value) + { + window.clearTimeout(h_runfilters); + h_runfilters = window.setTimeout(dataView.refresh, 10); + percentCompleteThreshold = ui.value; + } + } + }); + + + // wire up the search textbox to apply the filter to the model + $("#txtSearch").keyup(function(e) { + if (GlobalEditorLock.isEditing()) + GlobalEditorLock.cancelCurrentEdit(); + + // clear on Esc + if (e.which == 27) + this.value = ""; + + searchString = this.value; + dataView.refresh(); + }); + + $("#btnSelectRows").click(function() { + var rows = []; + selectedRowIds = []; + + for (var i=0; i<10 && i<dataView.rows.length; i++) { + rows.push(i); + selectedRowIds.push(dataView.rows[i].id); + } + + grid.setSelectedRows(rows); + }); + + + + + // initialize the model after all the events have been hooked up + dataView.beginUpdate(); + dataView.setItems(data); + dataView.setFilter(myFilter); + //dataView.setPagingOptions({pageSize:25}); + dataView.endUpdate(); + + $("#gridContainer").resizable(); + }) + + </script> + + </body> +</html> |