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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");

  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>&nbsp;" + value;

    } else {

      return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;

    }

  } else {

    return spacer + " <span class='toggle'></span>&nbsp;" + 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:带子项的展开收缩的更多相关文章

点击UITableView的cell展开收缩
在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下. 首先要理解UITableView代理方法调用的先后顺序. 当 ...
HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
展开/收缩 ul
了一个展开收缩的东东,留着以后万一用到后台递归生成的函数(这里是一个反射参数展示,支持多层级展开显示,后台反射如何多层级解析的方法有时间再补上吧) /// <summary> /// 递 ...
js实现的侧边栏展开收缩效果
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...
WordPress文章页添加展开/收缩功能
很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...
dhtmlxtree 节点展开收缩：新增了直接点文本内容也实现了展开收缩功能（并记住了展开、收缩状态）
dhtmlxtree 节点展开收缩通常情况我们按 +- 就实现了展开收缩功能,为了方便我们新增了直接点文本内容也实现了展开收缩功能(并记住了展开.收缩状态) tree = new dh ...
js之展开收缩菜单，用到window.onload ,onclick,
目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果一.准备阶段 html文件 <!DOCTYPE html&g ...
jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <hea ...
修改mui accordion（折叠面板）默认展开收缩行为
mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...

随机推荐

Java基础之集合框架——使用集合Vector<>挑选演员（TryVector）
控制台程序. public class Person implements Comparable<Person> { // Constructor public Person(String ...
mongodb的基本操作与插入文档(document)
一.mongodb的基本操作: 1.查看mongodb当前所有的databases : show dbs 2.选择数据库(database) : use databaseName(该数据库不存在则会自 ...
c++怎么将一个类，拆分出接口类，和实现类
还拿上一遍中定义的GradeBook类来实现: #include <iostream> using std::cout; using std::endl; #include <str ...
mysql查找字符串出现位置
MySQL中的LOCATE和POSITION函数使用方法 FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中,则返回值的范围在 1 到 ...
SQL事物
事务:保障流程的完整执行就像银行取钱,先在你账上扣钱,然后存入别人的账上:但是从你账上扣完钱了,突然网断了,对方没有收到钱,那么此时你的钱也没了,别人的钱也没加上,为了防止此类情况的出现,事务. be ...
demo02TextView
main.xml----- /layout/activity_main.xml <RelativeLayout xmlns:android="http://schemas.androi ...
android复习第一天-----简单的android常识
前言:要去面试了,这些天花一些事件把android中简单的知识点来串联的复习一下 1,android中的工程结构 src文件夹:存储android文件的源代码 gen文件夹:有工具自动生成,不要去修改 ...
(转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
paper 44 ：颜色矩和颜色相关图（color correlogram）
react绑定事件
1.显示隐藏 2.输入框输入内容,立即显示出来代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的j ...

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

SlickGrid example 5:带子项的展开收缩的更多相关文章

随机推荐

热门专题