带子项的展开收缩。

 
代码：
<!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. docker operation method note

    docker stop script #!/bin/bash CID_LIST=$(docker ps -q | xargs)if [ "$CID_LIST" = "&q ...

  2. Ways to access Oracle Database in PostgreSQL

    Today, organizations stores information(data) in different database systems. Each database system ha ...

  3. PostgreSQL 非持久化设置(Non-Durable Settings)

    Durability is a database feature that guarantees the recording of committed transactions even if the ...

  4. PostgreSQL rule view materialized view examples

    warehouse_db=# create table tab_view(emp_id int not null,emp_name varchar(10),emp_city varchar(10)); ...

  5. M面经Prepare: Delete Words Starting With One Character

    给定一个char array, 这个array是一个句子,然后给定一个字母,把这个array里面带有这个字母开头的单次删掉,操作是要求in place. 检测   array[i]==' ' & ...

  6. 如何抠PSD素材中的图片

    在网上经常可以找到一些好看呢的PSD素材,如何才能将这些素材抠出来 存成一张张的png图片呢? 在PhotoShop中 1·隐藏无用的图层,然后窗口中仅剩需要看到的那个素材图 2·用工具选择该区域(注 ...

  7. JSP 使用框架frame

    JSP使用框架放在<head>标签里面.如果放在<body>标签里面,用Tomcat打开,是不会显示的.

  8. 无序数组的中位数（set+deque）hdu5249

    KPI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. [原创]java WEB学习笔记77：Hibernate学习之路---Hibernate 版本 helloword 与 解析，.环境搭建，hibernate.cfg.xml文件及参数说明，持久化类，对象-关系映射文件.hbm.xml，Hibernate API (Configuration 类,SessionFactory 接口,Session 接口,Transaction(事务))

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  10. C++之路进阶——codevs1204（寻找子串位置）

    1204 寻找子串位置  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze     题目描述 Description 给出字符串a和字符串b,保证b是a的一个子 ...