带子项的展开收缩。

 
代码：
<!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:带子项的展开收缩的更多相关文章

  1. 点击UITableView的cell展开收缩

    在项目中有个需求,点击表视图的单元格展开,再点击另外一个单元格或者本身又收缩,经过一段时间尝试,实现了该功能,现在记录分享总结下.   首先要理解UITableView代理方法调用的先后顺序.   当 ...

  2. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  3. 展开/收缩 ul

    了一个展开收缩的东东,留着以后万一用到 后台递归生成的函数(这里是一个反射参数展示,支持多层级展开显示,后台反射如何多层级解析的方法有时间再补上吧) /// <summary> /// 递 ...

  4. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  5. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

  6. dhtmlxtree 节点 展开收缩：新增了直接点 文本内容 也 实现了 展开收缩 功能（并记住了展开、收缩状态）

    dhtmlxtree 节点 展开收缩通常情况我们按 +- 就实现了 展开收缩 功能,为了方便我们新增了直接点 文本内容 也 实现了 展开收缩 功能(并记住了展开.收缩状态) tree = new dh ...

  7. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  8. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  9. 修改mui accordion（折叠面板）默认展开收缩行为

    mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...

随机推荐

  1. spring mvc 的Controller类默认Scope是单例(singleton)的

    使用Spring MVC有一段时间了,之前一直使用Struts2,在struts2中action都是原型(prototype)的, 说是因为线程安全问题,对于Spring MVC中bean默认都是(s ...

  2. 伪类写border， transform: scale3d() 及兼容性

    .top::before { content: ""; position: absolute; left: 0; width: 200%; height: 0; border-to ...

  3. Lintcode: Singleton && Summary: Synchronization and OOD

    Singleton is a most widely used design pattern. If a class has and only has one instance at every mo ...

  4. Linux 硬盘分区

    Linux系统中的重要概念,一切资源都看做是文件,包括硬件设备. 1. 基本概念 1)MBR:Master Boot Recorder,存放主引导记录,446字节的引导代码. 2)主分区表:存放主分区 ...

  5. C#: 启动画面设计

    Windows Form经常会在启动主界面的时候预先有启动画面,这也是因为用户体验的需要,用户知道已经启动application,而不是在load resource的时候等待.因此这里不能用单线程的思 ...

  6. Server.Transfer,Response.Redirect用法点睛

    Server.Transfer,Response.Redirect的区别 如果你读过很多行业杂志和 ASP.NET 示例,你会发现,大多数人使用 Response.Redirect 将用户引导到另一个 ...

  7. javascript 判断浏览器的ie版本，替换html标签

    /* var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(&quo ...

  8. 比较二个文件的最后修改时间FileListener

    import java.io.File; import java.text.SimpleDateFormat; import java.util.Timer; import java.util.Tim ...

  9. EBS R12中重新enable失效用户之后，丢失职责

    以下请求跑完不能立即生效,需要等上一段时间! oracle support说这并不是一个bug,是一个问题,呵呵,bug和问题,都是你的错,oracle! 工 作中将某个用户失效之后,有可能又需要重新 ...

  10. stdlib 头文件

    stdlib 头文件即standard library标准库头文件.stdlib.h里面定义了五种类型.一些宏和通用工具函数. 类型例如size_t.wchar_t.div_t.ldiv_t和lldi ...