jQuery树型表格插件jQuery treetable

所属分类:导航-文件树

 5813  15  查看评论 (0)
jQuery树型表格插件jQuery treetable ie兼容8

jQuery-treetable

有了这个插件,你可以在一个HTML表格中显示树,即目录结构或嵌套列表。它使你的HTML文件干净的,展现出树状表格插件,你只需要每一行数据添加特定的数据属性。该插件使用这些属性来确定你的树看起来像。 特点 它可以显示在表列中的数据树。 它可以折叠和展开想到的目录结构。 它支持无限制树的深度。

使用方法

引用所需要的文件

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link href="path/to/jquery.treetable.css" rel="stylesheet" type="text/css" />
<script src="path/to/jquery.treetable.js"></script>

初始化插件

<script>
    $("#your_table_id").treetable();
</script>

支持拖拽

$("#example-advanced").treetable({ expandable: true });
 
// Highlight selected row
$("#example-advanced tbody tr").mousedown(function() {
  $("tr.selected").removeClass("selected");
  $(this).addClass("selected");
});
 
// Drag & Drop Example Code
$("#example-advanced .file, #example-advanced .folder").draggable({
  helper: "clone",
  opacity: .75,
  refreshPositions: true,
  revert: "invalid",
  revertDuration: 300,
  scroll: true
});
 
$("#example-advanced .folder").each(function() {
  $(this).parents("tr").droppable({
    accept: ".file, .folder",
    drop: function(e, ui) {
      var droppedEl = ui.draggable.parents("tr");
      $("#example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
    },
    hoverClass: "accept",
    over: function(e, ui) {
      var droppedEl = ui.draggable.parents("tr");
      if(this != droppedEl[0] && !$(this).is(".expanded")) {
        $("#example-advanced").treetable("expandNode", $(this).data("ttId"));
      }
    }
  });
});

样式自定义 默认使用的文件样式表jquery.treetable.theme.default.css的,你也可以自定义自己的风格的模板。

相关插件-文件树

jQuery多级列表树插件bootstrap-treeview

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。
  文件树
 69111  133

jQuery树形结构插件ngJsTree

使用ngJsTree可以很方便的通过简单的配置快速实现复杂的树形结构,支持模糊查询、动态加载。
  文件树
 11930  20

jquery.treeview.js树控件

jquery.treeview.js树控件
  文件树
 91297  54

dtree权限控制复选框插件

dtree权限控制复选框插件
  文件树
 23780  130

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复