带子项的展开收缩。

 
代码：
<!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. Oracle Flashback Technologies - 闪回被drop的表

    Oracle Flashback Technologies - 闪回被drop的表 在oracle10g中,drop一个表后,表没有真正被删除,支持被rename后放在recyclebin中. #新建 ...

  2. mysql参数sql_log_bin

    如果想在主库上执行一些操作,但不复制到slave库上,可以通过修改参数sql_log_bin来实现. 比如想在主库上修改某个表的定义,但是在slave库上不做修改: master mysql> ...

  3. ASPNET服务端控件练习(一个机试题)

    简单记录: 模糊查询的select语句的拼写 public List<Model.Student> GetWhereStudent(string name, string sub, str ...

  4. csuoj 1334: 好老师

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1334 1334: 好老师 Time Limit: 1 Sec  Memory Limit: 128 ...

  5. [原创]java WEB学习笔记55：Struts2学习之路---详解struts2 中 Action，如何访问web 资源，解耦方式(使用 ActionContext，实现 XxxAware 接口)，耦合方式（通过ServletActionContext，通过实现 ServletRequestAware, ServletContextAware 等接口的方式）

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

  6. 每天一个java基础知识--static

    内存总体一共分为了 4个部分(stack segment.heap segment.code segment.data segment) 当我们在程序中,申明一个局部变量的时候,此变量就存放在了 st ...

  7. Hashing function

    Hashing function (散列函式) 在网页应用中被广泛采用,从数码签署.错误检测.登入验证.到压缩储存空间,由于它的原理比较复杂,很多人把它跟加密函式混淆,对于如何运用hash funct ...

  8. C# WinForm动态添加MSChart控件

    添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization     MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提 ...

  9. 找到多个与名为“Index”的控制器匹配的类型的解决方法！

    “/”应用程序中的服务器错误. 找到多个与名为“Index”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由在搜索匹配此请求的控制器时没有指定 ...

  10. 关于科台斯k97gprs调试记录（1）

    模块调试 1.gprs模块了解 用流量上网的模块,可以发短信,打电话. 2.AT指令的学习 AT+UART=波特率,流控位,数据位长度,校验控制,停止位长度 AT+NET=TCP/UDP 选择,APN ...