带子项的展开收缩。
<metahttp-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 centercenter;
}
.toggle.collapse {
background: url(../images/collapse.gif) no-repeat centercenter;
}
</style>
<tr>
<tdvalign="top" width="50%">
<div style="border:1px solidgray;background:wheat;padding:6px;">
<label>Show taskswith % at least: </label>
<divstyle="padding:4px;">
<divstyle="width:100px;"id="pcSlider"></div>
</div>
<br/>
<label>And titleincluding:</label>
<input type=textid="txtSearch">
</div>
<br/>
<div id="myGrid"style="width:600px;height:500px;"></div>
</td>
<tdvalign="top">
<h2>Demonstrates:</h2>
<ul>
<li>implementingexpand/collapse as a filter forDataView</li>
</ul>
</td>
</tr>
if (value == null || value == undefined ||!value.length) {
return {valid: false,msg: "This is a required field"};
} else {
return {valid: true,msg: null};
}
value =value.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
var spacer = "<spanstyle='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='toggleexpand'></span> "+ value;
} else {
return spacer + " <span class='togglecollapse'></span> "+ value;
}
} else {
return spacer + "<spanclass='toggle'></span> "+ value;
}
{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: "EffortDriven", width: 80, minWidth: 20, maxWidth: 80, cssClass:"cell-effort-driven", field: "effortDriven", formatter:Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox,cannotTriggerInsert: true}
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false
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;
return a["percentComplete"] -b["percentComplete"];
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"] = "5days";
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")) {
varitem = 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 thegrid
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 filterto 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 thefilter to the model
$("#txtSearch").keyup(function (e) {
Slick.GlobalEditorLock.cancelCurrentEdit();
// clear on Esc
if (e.which == 27){
this.value = "";
}
searchString =this.value;
dataView.refresh();
})
代码:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table width="100%">
</table>
<scriptsrc="../lib/firebugx.js"></script>
<scriptsrc="../lib/jquery-1.7.min.js"></script>
<scriptsrc="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<scriptsrc="../lib/jquery.event.drag-2.0.min.js"></script>
<scriptsrc="../slick.core.js"></script>
<scriptsrc="../slick.formatters.js"></script>
<scriptsrc="../slick.editors.js"></script>
<scriptsrc="../slick.grid.js"></script>
<scriptsrc="../slick.dataview.js"></script>
<script>
function requiredFieldValidator(value) {
}
var TaskNameFormatter = function (row, cell, value, columnDef,dataContext) {
};
var dataView;
var grid;
var data = [];
var columns = [
];
var options = {
};
var percentCompleteThreshold
= 0;
var searchString = "";
function myFilter(item) {
}
function percentCompleteSort(a, b) {
}
$(function () {
})
</script>
</body>
</html>