SlickGrid example 5:带子项的展开收缩

最新推荐文章于 2024-12-01 23:53:54 发布

原创最新推荐文章于 2024-12-01 23:53:54 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#slickgrid #带子项的展开收缩

SlickGrid 专栏收录该内容

10 篇文章

订阅专栏

带子项的展开收缩。

代码：

<!DOCTYPE HTML>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=iso-8859-1">

<title>SlickGrid example 5:Collapsing</title>

<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>

</head>

<body>

<tr>

<tdvalign="top" width="50%">

<label>Show taskswith % at least: </label>

<divstyle="padding:4px;">

<divstyle="width:100px;"id="pcSlider"></div>

</div>

<br/>

<label>And titleincluding:</label>

</div>

<br/>

</td>

<tdvalign="top">

<h2>Demonstrates:</h2>

<ul>

<li>implementingexpand/collapse as a filter forDataView</li>

</ul>

</td>

</tr>

</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>

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 = "<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;

}

};

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: "EffortDriven", 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"] = "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();

})

</script>

</body>

</html>