`
derek_z
  • 浏览: 17028 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

table 树

 
阅读更多

 <%@page pageEncoding="utf-8"%>
 <%@ include file="../base/tagslib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="<session:constant name="ContextPath"/>/js/jquery.tree.js"></script> 
 <script type="text/javascript">
  $(function(){
   $('#files').tree({
    expanded: 'li:first'
   });
  });
  function showItem(c,img){
   img.src = "../images/icon-folder-open.gif";
   //$(img).attr("onclick","hideItem('"+c+"',this);"); // 此方法IE8点击事件会失效 zhaochongli
   img.onclick = function onclick(event) {
    hideItem(c,this );
   };
  
   var list = $("." + c);
   for(var i=0;i<list.length;i++){
    //list[i].style.display='block';  此方法火狐会错位 zhaochongli
    $(list[i]).show();
   }
  }
  function hideItem(c,img){
   img.src = "../images/icon-folder.gif";
   //$(img).attr("onclick","showItem('"+c+"',this);"); // 此方法IE8点击事件会失效 zhaochongli
   img.onclick = function onclick(event) {
    showItem(c,this );
   };
   $('#productstable tr').each(function () {
    var classNme = this.className;
    if(classNme != "" && classNme.indexOf(c) != -1){
     //this.style.display='none';// 此方法火狐会错位 zhaochongli
     $(this).hide();
     if(classNme == c && classNme.split("_").length == 1){
      var td = $(this).find('td').eq(1)[0];
      var td_img = $(td).find("img")[0];
      td_img.src = "../images/icon-folder.gif";
      var args = td_img.outerHTML.split("'");
      if(args[1] != undefined){
       td_img.onclick = function onclick(event) {
        showItem(args[1],this );
       };
      }
     }
    }
   });
  }
  function test1(){
   alert('点击收拢');
  }
  function test(){
   $("#aaa").show();
  }
 </script>  
 <style type="text/css">
 *{margin:0;padding:0;list-style-type:none; }
 a,img{border:0;}
 #files{
  /**margin:100px auto;width:400px;*/
 }
 .tree,.tree ul,.tree li{list-style:none;margin:0;padding:0;zoom: 1;}
 .tree ul{margin-left:8px;}
 .tree li a{color:#555;padding:.1em 7px .1em 27px;display:block;text-decoration:none;border:1px dashed #fff;background:url(../images/icon-file.gif) 5px 50% no-repeat;}
 .tree li a.tree-parent{background:url(../images/icon-folder-open.gif) 5px 50% no-repeat;}
 .tree li a.tree-parent-collapsed{background:url(../images/icon-folder.gif) 5px 50% no-repeat;}
 .tree li a:hover,.tree li a.tree-parent:hover,.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{color:#000;border:1px solid#eee;background-color:#fafafa;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
 .tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{border:1px solid #e2f3fb;background-color:#f2fafd;}
 .tree ul.tree-group-collapsed{display:none;}
 
 #productstable {
  border-left: 1px solid #d4e7f0;
  border-right: 1px solid #d4e7f0;
  border-top: 1px solid #d4e7f0;
  border-colspan:colspan;
  cellpadding : 0px;
  cellspacing : 0px;
  margin-left: 20px;
 }
 #productstable td {
  border-bottom: 1px solid #d4e7f0;
     border-left: 1px solid #d4e7f0;
 } 
 
 </style>
 
</head>
<body> 

<div align="left">
  <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr height="25" style="text-align: center;" >
  <td width="80" align="center" class="button">
   <a href="<session:constant name='ContextPath'/>/special/editDeal.do?dealId=<c:out value="${dealId}"/>">Deal</a>
  </td>
  <td width="80" align="center" class="button">
   <a href="<session:constant name='ContextPath'/>/special/salesReps.do?dealId=<c:out value="${dealId}"/>">Sales Reps</a>
  </td>
  <td width="80" align="center" class="button">
   <a href="#">Resellers</a>
  </td>
  <td width="80" align="center" class="buttonCurrent">
   <a href="<session:constant name='ContextPath'/>/special/products.do?dealId=<c:out value="${dealId}"/>">Products</a>
  </td>
  <td width="80" align="center" class="button">
   <a href="#">Comments</a>
  </td>  
  <td width="80" align="center" class="button">
   <a href="#">EUV</a>
  </td>
 </tr>
 <tr>
  <td colspan="28" class="underline">&nbsp;</td>
 </tr>
   </table>
  
  
 <div style="margin: 20 0 10 20">
  <form action="importProducts.do">
   Import configuration  <input type="file" size="10" class="input-text lh30" name="file"/>
   <input type="submit" value="subimt" class="ext_btn"/>
  </form>
 </div>
    <table id="productstable" >
  <tr>
   <td colspan="11" class="tableThead" >Product Details</td>
  </tr>
     <tr>
      <td>Quotation Number</td>
      <td>PL</td>
      <td>SKU</td>
      <td>Description</td>
      <td>Qty</td>
      <td>List Price</td>
   <td>Request Disc</td>
   <td>Request Net Price</td>
   <td>Approved Disc</td>
   <td>Approved Net Price</td>
   <td>Product Family</td>     
     </tr>
     <tr>
      <td><img src="../images/icon-folder.gif" onclick="showItem('q001',this );" />  F4IT-73524-01</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>     
     </tr>
     <tr class="q001" style="display: none;">
      <td>&nbsp;</td>
      <td><img src="../images/icon-folder.gif" onclick="showItem('q001_pl001',this )" />SYL</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>     
     </tr>
     <tr class="q001_pl001" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     <tr class="q001_pl001" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     <tr class="q001" style="display: none;">
      <td>&nbsp;</td>
      <td><img src="../images/icon-folder.gif" onclick="showItem('q001_pl002',this )" />SYL2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>     
     </tr>
     <tr class="q001_pl002" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     <tr class="q001_pl002" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     
     
     
     <tr>
      <td><img src="../images/icon-folder.gif" onclick="showItem('q002',this);" />  F4IT-73524-01</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>     
     </tr>
     <tr class="q002" style="display: none;">
      <td>&nbsp;</td>
      <td><img src="../images/icon-folder.gif" onclick="showItem('q002_pl001',this)" />SYL</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>     
     </tr>
     <tr class="q002_pl001" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     <tr class="q002_pl001" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     <tr class="q002" style="display: none;">
      <td>&nbsp;</td>
      <td><img src="../images/icon-folder.gif" onclick="showItem('q002_pl002',this)" />SYL2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>     
     </tr>
     <tr class="q002_pl002" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
     <tr class="q002_pl002" style="display: none;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>691644-B21</td>
      <td>HP BLc7000 CTO 3 IN LCD Plat Enclosure</td>
      <td>22</td>
      <td>34564</td>
   <td>67.13%</td>
   <td>23456.12</td>
   <td>65.34%</td>
   <td>25437.89</td>
   <td>Blade Hardware-Mid Range [K5M]</td>     
     </tr>
    
     
 </table>
 
 
  
   </div>

</body>
</html>

分享到：
| AES
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    react-antd table树形数据默认展开行实现jsx文件

    react-antd table树形数据默认展开行实现jsx文件

    TableTree 表格树

    《TableTree：构建表格树形结构的实现与应用》 在数据展示中，有时我们需要将层级关系的数据以表格的形式呈现，这时，表格树形结构（TableTree）就显得尤为重要。它将传统二维表格与树状结构相结合，既保留了表格的...

    boostrapTable树

    "boostrapTable树"则是BootstrapTable的一个扩展功能，它允许用户以树形结构展示表格数据，适用于层级关系明显的数据组织。 BootstrapTable的核心特性包括： 1. **数据加载**：支持静态数据、动态数据和Ajax数据...

    boostrapTable表格树

    在"boostrapTable表格树"这个主题中，我们将深入探讨如何使用BootstrapTable实现表格树结构，以及它在实际项目中的应用。 BootstrapTable表格树是一种特殊的表格展示方式，它将数据以层次结构的形式展现，通常用于...

    el-table树形表格表单验证(列表生成序号)

    在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格...

    动态加载树(tree)和动态加载表格(table)

    动态加载树（Tree）和动态加载表格（Table）是两种常见的数据展示方式，它们在网页应用中广泛使用，特别是在需要显示层级结构数据（如组织结构、文件系统）和大量表格数据（如报表、用户列表）的情况下。 **动态...

    tabletree js树形结构

    "Tabletree"是一种基于JavaScript实现的树形结构展示方式，它将数据以表格的形式组织，并且支持节点的展开与折叠，使得大量层次关系的数据能够清晰、有效地展现出来。在网页应用中，这种树形表格常用于目录导航、...

    vxe-table vue table 表格组件功能

    vxe-table还支持展开行和树形表格功能，这使得表格可以展示更复杂的数据结构。例如，展开行功能可以将某一行的详细信息在下一行展示，而树形表格则可以展示层级关系的数据，这对于管理如组织结构这样的层级数据非常...

    table实现的树状菜单

    1. **HTML结构**：首先，我们需要创建一个表格，每个行（tr）代表树的一个节点，而单元格（td）则用于包含节点内容和控制展开/折叠的图标。利用HTML的`&lt;span&gt;`或`&lt;div&gt;`元素来创建可折叠的子菜单，初始状态默认隐藏...

    【JavaScript源代码】vue Element-ui表格实现树形结构表格.docx

    在本实例中，我们将关注如何使用Element UI的Table组件来实现树形结构的表格。树形结构表格在展示层级关系数据时非常有用，例如组织架构、文件系统或者有父子关系的数据。 首先，Element UI 的表格组件支持树形数据...

    vue +el + Sortable table列拖拽排序

    vue table 列拖拽排序例子

    定时局部刷新table

    ### 定时局部刷新table知识点解析 #### 一、知识点概览 在Web开发中，局部刷新是指在不重新加载整个页面的情况下更新页面中的部分数据或元素，这通常通过Ajax技术实现。局部刷新能够提高用户体验，减少服务器负载...

    懒加载版本表格树

    懒加载版本表格树是一种高效的数据显示技术，特别是在处理大数据量时尤为有用。在传统的表格或树形数据展示中，所有数据通常在初次加载时一次性加载到内存中，这可能导致页面加载速度慢，对用户来说响应时间长，特别...

    Ztree+treeTable实现 Java实现 树形菜单 树形表格

    实现treeTable时，你需要在HTML中创建一个`table`元素，然后使用Ztree的API将其转换为treeTable。每个表格行将对应Ztree中的一个节点，列数据可以从服务器获取并动态填充。 3. **Java后台支持**： 在Java后台，你...

    Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 ...

    改变选择table行的背景色

    ### 改变选择table行的背景色 在网页开发中，为了提高用户体验并增强界面的交互性，我们经常需要对用户的行为做出响应。一个常见的需求是当用户选中表格（`table`）中的某一行时，能够改变该行的背景颜色。这种方式...

    element树形控件懒加载的动态加载

    利用element树形控件菜单栏被触发时加载事件进行Element树形结构懒加载的动态加载。

    bootstraptable-treeview树形，树形空格缩进bug已解决

    在本文中，我们将深入探讨 "bootstraptable-treeview"，这是一个用于在 BootstrapTable 中实现树形结构的扩展。当我们处理树形数据时，正确地显示层次和缩进是非常重要的，因为它直接影响到用户对数据结构的理解和...

    基于vue和优秀的iView组件库的树型表格treetabletreegrid

    为了实现树型表格，我们需要对`Table`组件进行扩展，增加处理树形结构的能力，例如添加一个列来显示展开/折叠图标，处理数据的递归渲染。 6. **响应式更新**：当数据源发生变化时，Vue的响应式系统会自动更新表格，...

Magicbox
Global site tag (gtag.js) - Google Analytics