开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 网页特效 > 其他 >  jQuery 可排序列表视图 treeSortable

jQuery 可排序列表视图 treeSortable

  • 源码大小：16.83KB
  • 所需积分：1积分
  • 源码编号：19JP-3361
  • 浏览次数：603次
  • 最后更新：2023年06月05日
  • 所属栏目：其他
我要下载 浏览效果
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板
[后台模板] 后台数据统计Bootstrap5模板

简介

一个最小可排序树jQuery插件，使用户可以通过拖放对列表树中的项目进行重新排序。基于jQuery UI的可排序功能。

如何使用它:

1.在文档中加载必要的jQuery和jQuery UI。

  1. <link rel="stylesheet" href="/path/to/cdn/jquery-ui.css" />
  2. <script src="/path/to/cdn/jquery-ui.min.js"></script>
  3. <script src="/path/to/cdn/jquery.slim.min.js"></script>

2.在结束body标记之前加载jQuery treeSortable插件的脚本。

  1. <script src="./js/treeSortable.js"></script>

3.创建一个空ul可排序树的元素：

  1. <ul id="tree"></ul>

4.在JS数组中定义您自己的树数据：

  1. const data = [
  2.   {
  3.     id: 1,
  4.     parent_id: 0,
  5.     title: "Branch 1",
  6.     level: 1,
  7.   },
  8.   {
  9.     id: 2,
  10.     parent_id: 1,
  11.     title: "Branch 1",
  12.     level: 2,
  13.   },
  14.   {
  15.     id: 3,
  16.     parent_id: 1,
  17.     title: "Branch 3",
  18.     level: 2,
  19.   },
  20.   // ...
  21. ];

5.初始化可排序树并完成：

  1. const sortable = new TreeSortable();
  2.  
  3. const $tree = $("#tree");
  4. const $content = data.map(sortable.createBranch);
  5. $tree.html($content);
  6.  
  7. sortable.run();

6.您还可以将静态树数据插入到树中，如下所示：

  1. <ul id="tree">
  2.   <li class="tree-branch branch-level-1">
  3.     <div class="contents">
  4.       <div class="branch-drag-handler">
  5.         <span class="branch-title">Branch 1</span>
  6.       </div>
  7.     </div>
  8.     <div class="children-bus"></div>
  9.   </li>
  10.   <li class="tree-branch branch-level-2">
  11.     <div class="contents">
  12.       <div class="branch-drag-handler">
  13.         <span class="branch-title">Branch 2</span>
  14.       </div>
  15.     </div>
  16.     <div class="children-bus"></div>
  17.   </li>
  18.   <li class="tree-branch branch-level-2">
  19.     <div class="contents">
  20.       <div class="branch-drag-handler">
  21.         <span class="branch-title">Branch 3</span>
  22.       </div>
  23.     </div>
  24.     <div class="children-bus"></div>
  25.   </li>
  26.   <li class="tree-branch branch-level-3">
  27.     <div class="contents">
  28.       <div class="branch-drag-handler">
  29.         <span class="branch-title">Branch 4</span>
  30.       </div>
  31.     </div>
  32.     <div class="children-bus"></div>
  33.   </li>
  34.   <li class="tree-branch branch-level-3">
  35.     <div class="contents">
  36.       <div class="branch-drag-handler">
  37.         <span class="branch-title">Branch 5</span>
  38.       </div>
  39.     </div>
  40.     <div class="children-bus"></div>
  41.   </li>
  42.   <li class="tree-branch branch-level-2">
  43.     <div class="contents">
  44.       <div class="branch-drag-handler">
  45.         <span class="branch-title">Branch 6</span>
  46.       </div>
  47.     </div>
  48.     <div class="children-bus"></div>
  49.   </li>
  50.   <li class="tree-branch branch-level-1">
  51.     <div class="contents">
  52.       <div class="branch-drag-handler">
  53.         <span class="branch-title">Branch 7</span>
  54.       </div>
  55.     </div>
  56.     <div class="children-bus"></div>
  57.   </li>
  58. </ul>

7.以下是可排序树的CSS样式示例。可以随意覆盖它们来创建自己的树样式。

  1. .tree-branch .branch-editor {
  2.   display: none;
  3. }
  4.  
  5. #tree,
  6. #tree-level-1 {
  7.   padding: 0.1em 0;
  8.   list-style: none;
  9.   margin: 0;
  10. }
  11.  
  12. .tree-branch,
  13. .tree-branch {
  14.   margin-bottom: 0;
  15.   position: relative;
  16.   user-select: none;
  17. }
  18.  
  19. .tree-branch > .contents .branch-wrapper {
  20.   display: flex;
  21.   align-items: center;
  22.   justify-content: space-between;
  23.   width: 100%;
  24.   background: #fff;
  25.   border: 1px solid #fff;
  26.   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
  27.   border-radius: 3px;
  28.   min-height: 20px;
  29.   max-width: 450px;
  30.   width: 100%;
  31.   position: relative;
  32.   padding: 10px 15px;
  33.   height: auto;
  34.   gap: 12px;
  35.  
  36.   line-height: 2.3076923;
  37.   overflow: hidden;
  38.   word-wrap: break-word;
  39. }
  40.  
  41. .tree-branch > .contents .branch-wrapper .left-sidebar {
  42.   display: flex;
  43.   gap: 12px;
  44.   align-items: center;
  45.   max-width: 280px;
  46.   width: 100%;
  47. }
  48.  
  49. .right-sidebar {
  50.   opacity: 0;
  51.   transition: 0.3s;
  52. }
  53.  
  54. .branch-wrapper:hover .right-sidebar {
  55.   opacity: 1;
  56. }
  57.  
  58. .tree-branch > .contents .branch-wrapper .left-sidebar {
  59.   cursor: pointer;
  60. }
  61.  
  62. .tree-branch > .contents {
  63.   clear: both;
  64.   line-height: 1.5;
  65.   position: relative;
  66.   margin: 10px 0 0;
  67. }
  68.  
  69. .contents .branch-drag-handler {
  70.   cursor: move;
  71. }
  72.  
  73. .branch-drag-handler .icon {
  74.   color: #504e4e;
  75.   margin-right: 5px;
  76. }
  77.  
  78. .sortable-placeholder {
  79.   border: 1px dashed rgb(63, 63, 63);
  80.   height: 35px;
  81.   max-width: 450px;
  82.   width: 100%;
  83.   margin-top: 10px;
  84. }
  85.  
  86. .tree-branch.ui-sortable-helper .contents {
  87.   margin-top: 0;
  88. }
  89.  
  90. .tree-branch.ui-sortable-helper .children-bus .contents {
  91.   margin-top: 10px;
  92. }
  93.  
  94. .tree-branch .children-bus:empty {
  95.   display: none;
  96. }
  97.  
  98. .branch-level-1 {
  99.   margin-left: 0px;
  100. }
  101. .branch-level-2 {
  102.   margin-left: 30px;
  103. }
  104. .branch-level-3 {
  105.   margin-left: 60px;
  106. }
  107. .branch-level-4 {
  108.   margin-left: 90px;
  109. }
  110. .branch-level-5 {
  111.   margin-left: 120px;
  112. }
  113. .branch-level-6 {
  114.   margin-left: 150px;
  115. }
  116. .branch-level-7 {
  117.   margin-left: 180px;
  118. }
  119. .branch-level-8 {
  120.   margin-left: 210px;
  121. }
  122. .branch-level-9 {
  123.   margin-left: 240px;
  124. }
  125. .branch-level-10 {
  126.   margin-left: 270px;
  127. }
  128.  
  129. .branch-level-1 .children-bus {
  130.   margin-left: 0px;
  131. }
  132. .branch-level-2 .children-bus {
  133.   margin-left: -30px;
  134. }
  135. .branch-level-3 .children-bus {
  136.   margin-left: -60px;
  137. }
  138. .branch-level-4 .children-bus {
  139.   margin-left: -90px;
  140. }
  141. .branch-level-5 .children-bus {
  142.   margin-left: -120px;
  143. }
  144. .branch-level-6 .children-bus {
  145.   margin-left: -150px;
  146. }
  147. .branch-level-7 .children-bus {
  148.   margin-left: -180px;
  149. }
  150. .branch-level-8 .children-bus {
  151.   margin-left: -210px;
  152. }
  153. .branch-level-9 .children-bus {
  154.   margin-left: -240px;
  155. }
  156. .branch-level-10 .children-bus {
  157.   margin-left: -270px;
  158. }
  159.  
  160. .branch-path {
  161.   display: block;
  162.   position: absolute;
  163.   width: 30px;
  164.   height: 98px;
  165.   bottom: 50%;
  166.   left: -12px;
  167.   border: 2px solid #565656;
  168.   border-top: 0;
  169.   border-right: 0;
  170.   padding: 4px 0 0;
  171.   padding-top: 3px;
  172.   border-bottom-left-radius: 6px;
  173.   z-index: -1;
  174. }

8.默认插件选项。

  1. const sortable = new TreeSortable({
  2.  
  3.   // the Depth of a child branch
  4.   depth: 30,
  5.  
  6.   // default selectors
  7.   treeSelector: "#tree",
  8.   branchSelector: ".tree-branch",
  9.   branchPathSelector: ".branch-path",
  10.   dragHandlerSelector: ".branch-drag-handler",
  11.   placeholderName: "sortable-placeholder",
  12.   childrenBusSelector: ".children-bus",
  13.   levelPrefix: "branch-level",
  14.  
  15.   // max number of levels
  16.   maxLevel: 10,
  17.  
  18.   // default data attributes
  19.   dataAttributes: {
  20.     id: "id",
  21.     parent: "parent",
  22.     level: "level",
  23.   },
  24.   
  25. });

9.在对树进行排序后启动一个事件。

  1. sortable.onSortCompleted(async (event, ui) => {
  2.   // do something
  3. });

10.API方法。

  1. // add child branch
  2. $('.add').addChildBranch();
  3.  
  4. // add sibling branch
  5. $('.add').addSiblingBranch();
  6.  
  7. // remove a branch
  8. $('.remove').removeBranch();

更新日志：

2022-10-11

  • 修复使用分支路径高度删除分支的问题

2022-10-08

  • 更新库，使此库更具体于实例

2022-09-10

  • 修复找不到变量的一个小错误

2022-08-03

  • 修复创建分支时的数据属性问题

2022-04-16

  • 添加新的treeSortable实现，使用函数方式

2021-02-09

  • JS更新

预览截图

相关热词： treeSortable视图列表排序jQuery
上一篇：用户友好 谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：简单快捷 jQuery数字格式插件

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1