首页 > 代码库 > SlickGrid example 5:带子项的展开收缩
SlickGrid example 5:带子项的展开收缩
带子项的展开收缩。
代码：
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>SlickGrid example 5: Collapsing</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> .cell-title { font-weight: bold; } .cell-effort-driven { text-align: center; } .toggle { height: 9px; width: 9px; display: inline-block; } .toggle.expand { background: url(../images/expand.gif) no-repeat center center; } .toggle.collapse { background: url(../images/collapse.gif) no-repeat center center; } </style></head><body><table width="100%"> <tr> <td valign="top" width="50%"> <div style="border:1px solid gray;background:wheat;padding:6px;"> <label>Show tasks with % at least: </label> <div style="padding:4px;"> <div style="width:100px;" id="pcSlider"></div> </div> <br/> <label>And title including:</label> <input type=text id="txtSearch"> </div> <br/> <div id="myGrid" style="width:600px;height:500px;"></div> </td> <td valign="top"> <h2>Demonstrates:</h2> <ul> <li>implementing expand/collapse as a filter for DataView</li> </ul> </td> </tr></table><script src="../lib/firebugx.js"></script><script src="../lib/jquery-1.7.min.js"></script><script src="../lib/jquery-ui-1.8.16.custom.min.js"></script><script src="../lib/jquery.event.drag-2.0.min.js"></script><script src="../slick.core.js"></script><script src="../slick.formatters.js"></script><script src="../slick.editors.js"></script><script src="../slick.grid.js"></script><script src="../slick.dataview.js"></script><script>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}; }}var TaskNameFormatter = function (row, cell, value, columnDef, dataContext) { value = value.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"); var spacer = "<span style=‘display:inline-block;height:1px;width:" + (15 。 dataContext["indent"]) + "px‘></span>"; var idx = dataView.getIdxById(dataContext.id); if (data[idx + 1] && data[idx + 1].indent > data[idx].indent) { if (dataContext._collapsed) { return spacer + " <span class=‘toggle expand‘></span> " + value; } else { return spacer + " <span class=‘toggle collapse‘></span> " + value; } } else { return spacer + " <span class=‘toggle‘></span> " + value; }};var dataView;var grid;var data = [];var columns = [ {id: "title", name: "Title", field: "title", width: 220, cssClass: "cell-title", formatter: TaskNameFormatter, editor: Slick.Editors.Text, validator: requiredFieldValidator}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true}];var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false};var percentCompleteThreshold = 0;var searchString = "";function myFilter(item) { if (item["percentComplete"] < percentCompleteThreshold) { return false; } if (searchString != "" && item["title"].indexOf(searchString) == -1) { return false; } if (item.parent != null) { var parent = data[item.parent]; while (parent) { if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1)) { return false; } parent = data[parent.parent]; } } return true;}function percentCompleteSort(a, b) { return a["percentComplete"] - b["percentComplete"];}$(function () { var indent = 0; var parents = []; // prepare the data for (var i = 0; i < 1000; i++) { var d = (data[i] = {}); var parent = null; if (Math.random() > 0.8) { indent++; parent = i - 1; parents.push(parent); } else if (Math.random() < 0.3 && indent > 0) { indent--; parent = parents.pop(); } else if (parents.length > 0) { parent = parents[parents.length - 1]; } if (indent == 0) { parent = null; } d["id"] = "id_" + i; d["indent"] = indent; d["parent"] = parent; 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); } // initialize the model dataView = new Slick.Data.DataView({ inlineFilters: true }); dataView.beginUpdate(); dataView.setItems(data); dataView.setFilter(myFilter); dataView.endUpdate(); // initialize the grid grid = new Slick.Grid("#myGrid", dataView, columns, options); grid.onCellChange.subscribe(function (e, args) { dataView.updateItem(args.item.id, args.item); }); grid.onAddNewRow.subscribe(function (e, args) { var item = { "id": "new_" + (Math.round(Math.random() * 10000)), "indent": 0, "title": "New task", "duration": "1 day", "percentComplete": 0, "start": "01/01/2009", "finish": "01/01/2009", "effortDriven": false}; $.extend(item, args.item); dataView.addItem(item); }); grid.onClick.subscribe(function (e, args) { if ($(e.target).hasClass("toggle")) { var item = dataView.getItem(args.row); if (item) { if (!item._collapsed) { item._collapsed = true; } else { item._collapsed = false; } dataView.updateItem(item.id, item); } e.stopImmediatePropagation(); } }); // wire up model events to drive the grid dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }); var h_runfilters = null; // wire up the slider to apply the filter to the model $("#pcSlider").slider({ "range": "min", "slide": function (event, ui) { Slick.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) { Slick.GlobalEditorLock.cancelCurrentEdit(); // clear on Esc if (e.which == 27) { this.value = ""; } searchString = this.value; dataView.refresh(); })})</script></body></html>
SlickGrid example 5:带子项的展开收缩
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。