共同使用YUI TreeView和数据表»雅虎的用户界面博客（YUIBlog）

共同使用YUI TreeView和数据表

10月12日下午05:33 2009年由卡洛斯布埃诺|开发| 4评论

当您想要到目前复杂的层次结构，并列出属性，TreeView 的和 DataTable控制YUI的2个工作很好地结合起来。

对于这个技巧，我们将Web服务器日志的浏览器。 TreeView中会显示文件和文件夹路径，DataTable将显示个别行日志。单击树中的文件或文件夹，将导致DataTable中筛选出所有，但该路径。（点击这里工作演示。）

为了简洁起见，我将使用静态数据。在实践中，你会使用动态数据进行详细的技术在这里和这里，并在服务器上过滤。静态的例子后，我们将谈论更详细的动态数据。

要注意的是该位之间的TreeView的labelClicked labelClicked事件和数据源sendRequest()方法。（你可以找到所有在这个例子依赖YUI的2配置）。

 < - 组合处理YUI的CSS文件： - >
 <链接REL =“样式表”类型=“文/ CSS”
 < - 组合处理YUI的JS文件： - >
 <脚本类型=“text / javascript中”的 

 <！ - 创建了TreeView和DataTable容器的DIV - >
 <body class="yui-skin-sam">
   <TABLE>
   <TR>
     <td valign="top">
     <div id="myTree" style="width:160px"> </ DIV>
     </ TD>
     <td valign="top">
     <div id="myContainer"> </ DIV>
     </ TD>
   </ TR>
 </ TABLE>
 </ BODY>

 <SCRIPT>
 YAHOO.util.Event.addListener（“窗口”载入“
函数（）{

   /****的DataTable ****/

   / /定义DataTable的列
   VAR myColumnDefs = [
     {键：“IP”标签：“IP地址”}，
     {键：“路径”标签：“路径”}，
     {键：“状态”标签：“状态”}，
     {键：“毫秒，标签：”时代“}，
     {键：“字节”，标签：“大小”}，
     {键：“TS，标签：”时间戳“}
   ;

   / /虚拟数据表。
   VAR MYDATA = [
     {TS：“10月10日2009年14时33分26秒”，IP：'1 .2.3.4'，路径：“/ favicon.ico”，状态：200毫秒：123字节：616}，
     {TS：“2009年10月10日日14时33分26秒”，IP：'1 .2.3.4'，路径：'/图像/ logo.gif“，状态：200毫秒：213字节：7891}，
     {TS：“2009年10月10日日14时33分26秒”，IP：'1 .2.3.4'，路径：“/图像/ welcome.gif”，状态：200毫秒：872字节：19357}，
     {TS：“2009年10月10日日14时33分26秒”，IP：'1 .2.3.4'，路径：“/ index.html的”，状态：200毫秒：901字节：13453}，
     {TS：“2009年10月10日日14时33分27秒”，IP：'4 .5.6.7'，路径：“/ favicon.ico”，状态：304毫秒：110字节：616}，
     {TS：“2009年10月10日日14时33分27秒”，IP：'4 .5.6.7'，路径：“/图像/ logo.gif”，状态：304毫秒：432字节：7891}，
     {TS：“2009年10月10日日14时33分27秒”，IP：'4 .5.6.7'，路径：“/图像/ welcome.gif”，状态：304毫秒：528字节：19357}，
     {TS：“2009年10月10日日14时33分27秒”，IP：'4 .5.6.7'，路径：“/ index.html的”，状态：304毫秒：562字节：13453}，
     {TS：“10月10日2009年14时33分28秒”，IP：'3 .4.5.6'，路径：“/ favicon.ico”，状态：200毫秒：313字节：616}，
     {TS：“10月10日2009年14时33分28秒”，IP：'3 .4.5.6'，路径：“/图像/ logo.gif”，状态：200毫秒：215字节：7891}，
     {TS：“10月10日2009年14时33分28秒”，IP：'3 .4.5.6'，路径：“/图像/ welcome.gif”，状态：200毫秒：324字节：19357}，
     {TS：“2009年10月10日日14时33分28秒”，IP：'3 .4.5.6'，路径：“/ index.html的”，状态：200毫秒：818字节：13453}，
     {TS：“10月10日2009年十四时33分29秒”，IP：'7 .8.9.5'，路径：“/ favicon.ico”，状态：200毫秒：786字节：616}，
     {TS：“10月10日2009年十四时33分29秒”，IP：'7 .8.9.5'，路径：“/图像/ logo.gif”，状态：200毫秒：604字节：7891}，
     {TS：“10月10日2009年十四时33分29秒”，IP：'7 .8.9.5'，路径：“/图像/ welcome.gif”，状态：200毫秒：803字节：19357}，
     {TS：“2009年10月10日日十四时33分29秒”，IP：'7 .8.9.5'，路径：“/ index.html的”，状态：200毫秒：934字节：13453}
   ;

   / /创建一个静态的“JSARRAY”数据源与适当的领域。
   VAR myDataSource =新YAHOO.util.DataSource（MYDATA）;
   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
   myDataSource.responseSchema = {
    领域：[“IP”，“路径”，“地位”，“毫秒”，“字节”，“TS”]
   };

   / /创建一个过滤器的任何时间sendRequest（）被调用函数将被调用。
   / /返回唯一的结果，其路径匹配给定的前缀。
   myDataSource.doBeforeCallback =功能（路径，原材料，RES）{
     VAR数据= res.results | | [];
     VAR过滤= [];
     （路径）{
       （VAR我= 0;我<data.length; I + +）{
         （数据[I]。path.indexOf（路径）=== 0）{
           filtered.push（数据[I]）;
         }
       }
       res.results =过滤;
     }
    返回水库;
   };

   / /创建DataTable实例的HTML元素，列DEFS和数据源。
   VAR myDataTable =新YAHOO.widget.DataTable（“myContainer”，myColumnDefs，myDataSource）;

   /****的TreeView ****/

   / /假树的数据，描述了一个文件夹和一些文件。
   VAR myTreeData = [
    名称：“图像”，儿童：[
        {名称：“logo.gif”}，
        {名称：“welcome.gif”}
      ]}，
     {名称：“的index.html'}，
     {名称：“favicon.ico”}
   ;

   VAR myTree的=新YAHOO.widget.TreeView（“myTree的”）;

   / /递归树数据，建立节点。
   / /展开的第二个层次的文件及文件夹，但隐藏保持休息。
  功能buildNodes（parentNode，treeData，parentPath，扩大）{
     （VAR我= 0;我<treeData.length; I + +）{
       nodeData = treeData [我];
       VAR节点=新YAHOO.widget.TextNode（nodeData.name，parentNode，扩大）;

       / /建立以供将来参考节点的完整路径。
       node.path = parentPath +'/'+ node.label;

       / /递归向下如果此节点有孩子。
       （nodeData.children）{
         buildNodes（节点，nodeData.children，node.path，假）;
       }
     }
   }
   buildNodes（myTree.getRoot（），myTreeData，''，TRUE）;

   / /当点击树节点，筛选DataTable的记录
   / /戳的DataSource的sendRequest（）方法。
   myTree.subscribe（“labelClick”功能（节点）{
     myDataSource.sendRequest（node.path，{
      成功：myDataTable.onDataReturnInitializeTable
      失败：myDataTable.onDataReturnInitializeTable
       myDataTable范围：
      参数：myDataTable.getState（）
     }）;

   }）;

   myTree.draw（）;

 }）;

 </ SCRIPT>

使用动态数据的TreeView和DataTable

要使用动态的数据，服务器端分页和排序与一个DataTable ，看看这个例子。要在TreeView中使用的动态数据，参考此例。在loadNodeData功能，您可以添加到呼叫myDataSource.sendRequest()像这样：

   / /构造一个服务器端调用将返回匹配给定的路径的日志
   VAR nodePath = encodeURIComponent（node.path）;
   requestString =“路径=”+ nodePath +'＆排序= TS＆DIR = ASC的startIndex = 0＆结果= 25“;

   / /捅在DataSource的使用sendRequest（）
   VAR oCallback = {
    成功：myDataTable.onDataReturnSetRows
    失败：myDataTable.onDataReturnSetRows
     myDataTable范围：
    参数：myDataTable.getState（）
   };
   myDataSource.sendRequest（requestString，oCallback）;

分享和扩展：书签del.icio.us | Digg它！ | 书签交易！

4评论

这是我们依靠我们的产品在相当的，我相信这仅仅是YUI的迷死人的最真棒显示。我们添加上下文菜单树和额外的乐趣功能表。我们已经有百万计的记录，以搜寻/浏览/管理系统的客户，和YUI帮助我们把它可用。真棒。
评论布赖恩赫鲁伯- 2009年10月12日＃
所以，让我们说，我用的是asp.net MVC和我推JSON数据视图。
什么是最好的方式然后：
VAR myDataSource =新YAHOO.util.DataSource（MYDATA）;
我不认为把服务器端标记可能在JavaScript中的权利？
IE浏览器。
VAR myDataSource =新YAHOO.util.DataSource（）;
假设这里Model.ToJson提供正是你的“MYDATA”。
如果我可以通过理解“融合”这一数据从服务器获取到JavaScript，它会去了解如何使用这些'控制'的一个很长的路要走。
（如果你想给我发电子邮件）
伟大的职位 - 感谢！
评论由史蒂夫 - 2009年10月26日＃
它发生在服务器标签后，我到家：）
我是想表明，使用服务器端标签的数据源调用传递ViewData.Model
评论由史蒂夫 - 2009年10月26日＃
有没有一种方法，以防止产生另一个请求的过滤？我只想抢建表和树的初始请求一堆从另一页的数据，然后点击树更改表。
评论由乔- 2010年3月17日，＃

抱歉，评论形式此时关闭。

支持WordPress的关于雅虎虚拟主机。

Yahoo!用户界面博客（YUIBlog）