带子项的展开收缩。

 
代码：
<!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. C#并发处理-锁OR线程安全？

    每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客! 当然,题外话说多了,咱进入正题! 背景 基于任务的程序设计.命令式数据并行和任务并行都要求能够支持并发更新的数组.列表和集合 ...

  2. String的replaceAll方法中的正则表达式用法

    项目里面 需要对已手机号码进行 如下的显示 比如15088688388 要显示为150****8388的效果 实现这个简单的效果 方法有很多 我想试试用正则表达式去实现 查了点资料最终试出来以下方法可 ...

  3. mysql导sql脚本

    在navicat或sql yog ,或dos窗口中,如下 命令 ->mysql source d:\test.sql;

  4. 寻找第K大的数

    在一堆数据中查找到第k个大的值. 名称是:设计一组N个数,确定其中第k个最大值,这是一个选择问题,解决这个问题的方法很多. 所谓“第(前)k大数问题”指的是在长度为n(n>=k)的乱序数组中S找 ...

  5. [翻译] java NIO 教程－－－介绍

    原文地址:http://tutorials.jenkov.com/java-nio/index.html Java NIO(new IO)是从java1.4之后的对IO API的另一种选择,即对标准j ...

  6. 【IOS】2.基础

    1.Identifers命名规则 Identifers is combined with letters, underline, dollars, numbers must begin with le ...

  7. codeforces 446C DZY Loves Fibonacci Numbers（数学 or 数论+线段树）（两种方法）

    In mathematical terms, the sequence Fn of Fibonacci numbers is defined by the recurrence relation F1 ...

  8. 在EditText前面添加一个搜索的小图片

    1,这是EditText中的一个小的属性 代码: android:drawableLeft="@drawable/searchico" 效果图如下:

  9. 在C#中使用LOG4NET（winform程序

    http://www.csharpwin.com/csharpspace/678.shtml 1.下载log4net (Google log4net) 2.unzip log4net 3.运行VS,新 ...

  10. PTPX中的clock tree与LP design

    PTPX在加入CPF/UPF这样的文件后,可以分析multi-voltage,power-gating这样的设计. 针对某个power rail的cell,PTPX支持进行annotate. set_ ...