利用jQuery可以制作出很好的树型结构。这里介绍一款最近才找到使用的Nestable
可以拖动。 网页中的效果 http://dbushell.github.com/Nestable/
具体详细介绍的地址下载https://github.com/dbushell/Nestable
精简后的实例:
<?php if($_POST['tree_data']) { echo '==>'.$_POST['tree_data'].'<pre>'; print_r(json_decode($_POST['tree_data'])); echo '</pre>'; die; } ?> <style type="text/css"> /** * Nestable */ .nestable { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; } .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; } .dd-list .dd-list { padding-left: 30px; } .dd-collapsed .dd-list { display: none; } .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; } .dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc; background: #fafafa; background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%); background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%); background: linear-gradient(top, #fafafa 0%, #eee 100%); -webkit-border-radius: 3px; border-radius: 3px; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-handle:hover { color: #2ea8e5; background: #fff; } .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; } .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; } .dd-item > button[data-action="collapse"]:before { content: '-'; } .dd-placeholder, .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; } .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-size: 60px 60px; background-position: 0 0, 30px 30px; } .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; } .dd-dragel > .dd-item .dd-handle { margin-top: 0; } .dd-dragel .dd-handle { -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1); } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.nestable.js"></script> <script> $(document).ready(function() { var updateOutput = function(e) { var list = e.length ? e : $(e.target), output = list.data('output'); if (window.JSON) output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2)); else output.val('JSON browser support required for this demo.'); }; // activate Nestable for list 1 $('#nestable').nestable({ group: 1 }).on('change', updateOutput); // output initial serialised data updateOutput($('#nestable').data('output', $('#nestable-output'))); $('#nestable-menu').on('click', function(e) { var target = $(e.target), action = target.data('action'); if (action === 'expand-all') $('.nestable').nestable('expandAll'); if (action === 'collapse-all') $('.nestable').nestable('collapseAll'); }); }); </script> </head> <body> <menu id="nestable-menu"> <button type="button" data-action="expand-all">Expand All</button> <button type="button" data-action="collapse-all">Collapse All</button> </menu> <div class="cf nestable-lists"> <div class="dd nestable" id="nestable"> <ol class="dd-list"> <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1</div> </li> <li class="dd-item" data-id="2"> <div class="dd-handle">Item 2</div> <ol class="dd-list"> <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li> <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li> <li class="dd-item" data-id="5"> <div class="dd-handle">Item 5</div> <ol class="dd-list"> <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li> <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li> <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li> </ol> </li> <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li> <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li> </ol> </li> <li class="dd-item" data-id="11"> <div class="dd-handle">Item 11</div> </li> <li class="dd-item" data-id="12"> <div class="dd-handle">Item 12</div> </li> </ol> </div> </div> <p><strong>Serialised Output (per list)</strong></p> <form method="post"> <textarea id="nestable-output" name="tree_data" style="width:400px;height:240px;"></textarea> <input type="submit" /> </form>
相关推荐
简单的jquery.netstable.js 示例
jquery拖动排序插件Nestable
NULL 博文链接:https://prisonbreak.iteye.com/blog/2179464
jquery.nestable是目前经常用的拖动排序插件。很多论文或者博客,都说用到了ace.min.css,但是好像这个下载的有点困难,于是笔者自己精简出这部分代码,形成了行内样式,同时提供了静态实例。
nestable插件实现拖拽排序功能,js操作,将排序后的结果提交后台
前端项目-Nestable,Nestable是一个实验性的例子,并不是在积极开发中。如果它符合您的要求,请随意扩展它!
拖动排序插件Nestable
前端项目-nestable2,拖放具有鼠标和触摸兼容性的分层列表
jQuery Mobile 中文参考手册 --------------------------------------------------------------------------------------
目录演示版安装npm install -save react-nestable用法import Nestable from 'react-nestable';每个项目都必须具有唯一的id以区分元素const items = [ { id: 0, text: 'Andy' }, { id: 1, text: 'Harry', children: ...
js-nestable
Laravel开发-laravel-nestable Laravel 5嵌套类别库
网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有: jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot ...
一共4个文件,注意下全了,注意下全了, 一共4个文件,注意下全了,注意下全了
自述文件 Yii2 nestablemenu使用jquery.nestable插件。 jquery.nestable插件: ://dbushell.github.io/Nestable/ 安装 安装此扩展的首选方法是通过 。 无论运行 ...或添加 "udamuri/yii2-nestablemenu": "*" ...
网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有: jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot ...
Yana Nestable 是一个带有拖放功能的 WUI 分层列表创建器。您可以轻松地在您的项目中使用此应用程序的源代码并玩得开心!...从未如此简单……每个可嵌套的项目都可以使用此模块创建并存储在数据库中!
Nestable lists plugin typeahead.js Dual listbox Multiselect jQuery raty The following is on to-do list and will be added to Ace in next updates: New features & elements such as : Wysiwyg editor (now...