特效描述:jquery treetable 树形表格菜单 菜单插件。jQuery treetable树形表格插件,多级的树形表格菜单展开代码。
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
jQuery treetable
$("#example-basic-static").treetable();
Basic Expandable Tree
app |
controllers |
application_controller.rb |
helpers |
models |
views |
$("#example-basic-expandable").treetable({ expandable: true });
Complex Tree With Drag and Drop
This example uses jQuery UI's Draggable and Droppable components. The tree has 459 nodes.
Examples: 2-1-1, 3-1-1-2-2 and 3-2-1-2-3-1-2-2-1-1-1-1-2-5
NameKindSize
Acknowledgements.rtfFile480.95 KB CHUDFolder-- amberFolder-- AmberTraceFormats.pdfFile124.46 KB BigTopFolder-- BigTopUserGuide.pdfFile1314.71 KB SaturnFolder-- SaturnUserGuide.pdfFile694.29 KB SharkFolder-- SharkUserGuide.pdfFile12902.51 KB simg4Folder-- simg4_plusFolder-- simg5Folder-- DocSetsFolder-- com.apple.ADC_Reference_Library.CoreReference.docsetFolder-- ContentsFolder-- Info.plistFile1.23 KB ResourcesFolder-- docSet.dsidxFile41504 KB docSet.skidxFile43072 KB DocumentsFolder-- documentationFolder-- AccessibilityFolder-- ReferenceFolder-- AccessibilityCarbonRefFolder-- CarbonAXRefRevisionsFolder-- CarbonAXRefRevisions.htmlFile7.44 KB IndexFolder-- index_of_book.htmlFile174.1 KB index.htmlFile1.1 KB ReferenceFolder-- reference.htmlFile196.28 KB toc.htmlFile15.92 KB AccessibilityLowlevelFolder-- accessibilityFolder-- CompositePage.htmlFile5.7 KB index.htmlFile1.67 KB toc.htmlFile2.87 KB accessibility-constants.htmlFile26.94 KB accessibility-datatypes.htmlFile11.02 KB accessibility-functions.htmlFile15.55 KB accessibility-mpindex.htmlFile9.87 KB AXActionConstantsFolder-- CompositePage.htmlFile15.08 KB index.htmlFile1.67 KB toc.htmlFile4.9 KB AXAttributeConstantsFolder-- AXErrorFolder-- AXNotificationConstantsFolder-- AXRoleConstantsFolder-- AXTextAttributedStringFolder-- AXUIElementFolder-- AXValueFolder-- AXValueConstantsFolder-- index.htmlFile10.1 KB UniversalAccessFolder-- adcstyle.cssFile15.86 KB AppleApplicationsFolder-- ReferenceFolder-- AddressBookC_CollectionFolder-- IndexFolder-- index_of_book.htmlFile153.98 KB index.htmlFile13.62 KB IntroductionFolder-- Introduction.htmlFile5.41 KB RevisionHistory.htmlFile4.66 KB AddressBookRefUpdateFolder-- ArticlesFolder-- AddressBook_10.1-10.2_SymbolChanges.htmlFile80.84 KB AddressBook_10.2-10.3_SymbolChanges.htmlFile54.2 KB AddressBook_10.3-10.4_SymbolChanges.htmlFile14.78 KB AddressBook_10.4-10.5_SymbolChanges.htmlFile11.03 KB Introduction.htmlFile7.3 KB RevisionHistory.htmlFile6.19 KB index.htmlFile1.08 KB toc.htmlFile2.84 KB AMWorkflow_classFolder-- AMWorkflowController_classFolder-- AMWorkflowView_ClassFolder-- AppleApp_Aperture_002Folder-- Automator_constantsFolder-- AutomatorFrameworkFolder-- AutomatorReferenceFolder-- AutomatorRefUpdateFolder-- CalendarStoreFrameworkFolder-- CalendarStoreReferenceFolder-- CalendarStoreRefUpdateFolder-- Dashboard_RefFolder-- FinalCutPro_XMLFolder-- InstantMessageFrameworkFolder-- InstantMessageFrameworkRefFolder-- InstantMessageRefUpdateFolder-- iSyncJavaScriptRefFolder-- iSyncManualTestSuiteRefFolder-- iSyncSyncMLRefFolder-- MessageFrameworkReferenceFolder-- Motion_FXPlug_RefFolder-- SafariCSSRefFolder-- SafariHTMLRefFolder-- SyncServicesRefUpdateFolder-- SyncServicesSchemaRefFolder-- WebKitDOMRefFolder-- AppleScriptFolder-- ReferenceFolder-- StudioReferenceFolder-- artFolder-- boxes.gifFile11.52 KB browser.gifFile26.04 KB button_in_window.gifFile8.17 KB cc_app_info_window.gifFile24.36 KB circular_prog_indicator.gifFile0.65 KB color_panel.jpgFile24.91 KB color_well.gifFile7.58 KB combobox.gifFile1.44 KB comboboxlist.gifFile4.12 KB display_alert.gifFile28.69 KB display_dialog.gifFile28.42 KB doc_exp_groups.gifFile22.52 KB drawer.gifFile34.4 KB drawer_content_view.gifFile8.21 KB drawer_instances_in_nib.gifFile20.97 KB drawers_in_palette.gifFile17.34 KB files_owner_in_nib.gifFile15.24 KB font_panel.gifFile17.16 KB hw_exp_grps_files.gifFile15.35 KB ib_number_formatter.gifFile1.46 KB image_tab_mainmenu_nib.gifFile12.33 KB image_view_from_app.gifFile17.18 KB matrix.gifFile7.36 KB menu_item.gifFile16.85 KB menu_showing_file_menu.gifFile17 KB movie_view.gifFile34.76 KB number_formatter_info.gifFile24.8 KB open_panel.gifFile32.06 KB outline_view.gifFile18.7 KB popup_button.gifFile6.76 KB progindindet.gifFile3.78 KB save_panel.gifFile39.43 KB secure_text_field.gifFile9.91 KB simple_toolbar.gifFile10.4 KB sliders.gifFile11.01 KB sounds_in_nib_window.gifFile22.26 KB split_view.gifFile15.73 KB stepper.gifFile1.08 KB table_app.gifFile22.72 KB table_view.gifFile14.55 KB tabview.gifFile24.86 KB text_fields.gifFile7.1 KB text_view.gifFile12.18 KB to_do_outline.gifFile15.4 KB window.gifFile6.41 KB IndexFolder-- index.htmlFile1.13 KB sr10_panel_suiteFolder-- sr10_pplugin_suiteFolder-- sr11_textview_suiteFolder-- sr1_aboutFolder-- sr2_fundamentalsFolder-- sr3_app_suiteFolder-- sr4_container_suiteFolder-- sr5_control_suiteFolder-- sr6_data_suiteFolder-- sr7_doc_suiteFolder-- sr8_drag_drop_suiteFolder-- sr9_menu_suiteFolder-- sr_historyFolder-- toc.htmlFile132.84 KB CarbonFolder-- CocoaFolder-- CoreFoundationFolder-- cssFolder-- DarwinFolder-- DeveloperToolsFolder-- DeviceDriversFolder-- GamesFolder-- GraphicsImagingFolder-- HardwareFolder-- HardwareDriversFolder-- imagesFolder-- index-date.htmlFile74.06 KB index-date0.htmlFile284.1 KB index-date2.htmlFile73.94 KB index-date3.htmlFile74.4 KB index-date4.htmlFile75.11 KB index-date5.htmlFile41.11 KB index-rev-date.htmlFile49.03 KB index-rev-revision.htmlFile49.01 KB index-rev-title.htmlFile49.03 KB index-rev-topic.htmlFile71.41 KB index-rev-topic0.htmlFile93.76 KB index-rev-topic2.htmlFile29.61 KB index-title.htmlFile73.91 KB index-title0.htmlFile284.11 KB index-title2.htmlFile74.7 KB index-title3.htmlFile73 KB index-title4.htmlFile74.15 KB index-title5.htmlFile42.91 KB index-topic.htmlFile72.46 KB index-topic0.htmlFile601.26 KB index-topic10.htmlFile74.41 KB index-topic2.htmlFile73.6 KB index-topic3.htmlFile72.47 KB index-topic4.htmlFile71.89 KB index-topic5.htmlFile73.89 KB index-topic6.htmlFile73.1 KB index-topic7.htmlFile70.55 KB index-topic8.htmlFile71.25 KB index-topic9.htmlFile72.56 KB index.htmlFile20.65 KB InternationalizationFolder-- InternetWebFolder-- iPhoneFolder-- jsFolder-- LegacyTechnologiesFolder-- MacOSXFolder-- MacOSXServerFolder-- MusicAudioFolder-- NetworkingFolder-- OpenSourceFolder-- PerformanceFolder-- PortingFolder-- PrintingFolder-- QuickTimeFolder-- ResourcesFolder-- ScriptingAutomationFolder-- SecurityFolder-- StorageFolder-- TextFontsFolder-- UserExperienceFolder-- WebObjectsFolder-- referencelibraryFolder-- adc.cssFile1.46 KB base.cssFile1.08 KB imagesFolder-- body_bg.gifFile0.24 KB main_bgbottom.gifFile2.35 KB main_bgtop.gifFile6.88 KB main_bgtop_stroke.gifFile7.62 KB UpdateBanner_core.pngFile24.25 KB index.htmlFile1.15 KB version.plistFile0.44 KB com.apple.ADC_Reference_Library.DeveloperTools.docsetFolder-- ContentsFolder-- Info.plistFile1.33 KB ResourcesFolder-- docSet.dsidxFile2752 KB docSet.skidxFile5664 KB DocumentsFolder-- documentationFolder-- adcstyle.cssFile15.86 KB AppleApplicationsFolder-- AppleApplications.htmlFile0.22 KB ConceptualFolder-- Dashcode_UserGuideFolder-- ContentsFolder-- ResourcesFolder-- de.lprojFolder-- AdvancedFolder-- chapter_8_section_1.htmlFile6.71 KB chapter_8_section_2.htmlFile7.93 KB chapter_8_section_3.htmlFile6.38 KB ArtFolder-- apple_birthday_widget.jpgFile33.5 KB canvas_inspector.jpgFile71.75 KB countdown_attributes.jpgFile46.69 KB project_window.jpgFile107.57 KB source_code_inspector.jpgFile76.19 KB webapp_add_code.jpgFile85.65 KB webapp_add_part.jpgFile108.16 KB webapp_first_test.jpgFile86.82 KB webapp_project_window.jpgFile152.27 KB chapter_999_section_1.htmlFile6.3 KB CodeAndDebuggingFolder-- Dashcode_UserGuide.pdfFile1875.27 KB DebuggingSharingFolder-- DesignToolsFolder-- index.htmlFile1.11 KB IntroductionFolder-- MakingaWebAppFolder-- MakingaWidgetwithDashcodeFolder-- PartsReferenceFolder-- TemplatesFolder-- toc.htmlFile38.57 KB WidgetProjectsFolder-- en.lprojFolder-- AdvancedFolder-- chapter_8_section_1.htmlFile6.6 KB chapter_8_section_2.htmlFile7.4 KB chapter_8_section_3.htmlFile6.24 KB ArtFolder-- chapter_999_section_1.htmlFile6.2 KB CodeAndDebuggingFolder-- Dashcode_UserGuide.pdfFile1087.36 KB DebuggingSharingFolder-- DesignToolsFolder-- index.htmlFile1.09 KB IntroductionFolder-- MakingaWebAppFolder-- MakingaWidgetwithDashcodeFolder-- PartsReferenceFolder-- TemplatesFolder-- toc.htmlFile38.11 KB WidgetProjectsFolder-- es.lprojFolder-- fr.lprojFolder-- it.lprojFolder-- ja.lprojFolder-- nl.lprojFolder-- zh.lprojFolder-- Dashboard-date.htmlFile10.88 KB Dashboard-rev-date.htmlFile8.85 KB Dashboard-rev-revision.htmlFile8.83 KB Dashboard-rev-title.htmlFile8.85 KB Dashboard-title.htmlFile10.71 KB index-date.htmlFile11.79 KB index-rev-date.htmlFile9.38 KB index-rev-revision.htmlFile9.36 KB index-rev-title.htmlFile9.37 KB index-rev-topic.htmlFile9.37 KB index-title.htmlFile11.78 KB index-topic.htmlFile12.39 KB index.htmlFile7.24 KB iSync-date.htmlFile8.17 KB iSync-title.htmlFile8 KB CarbonFolder-- Carbon.htmlFile0.21 KB DesignGuidelines-date.htmlFile9.93 KB DesignGuidelines-rev-date.htmlFile7.45 KB DesignGuidelines-rev-revision.htmlFile7.44 KB DesignGuidelines-rev-title.htmlFile7.45 KB DesignGuidelines-title.htmlFile9.77 KB index-date.htmlFile19.66 KB index-rev-date.htmlFile12.35 KB index-rev-revision.htmlFile12.33 KB index-rev-title.htmlFile12.34 KB index-rev-topic.htmlFile12.98 KB index-title.htmlFile19.65 KB index-topic.htmlFile22.64 KB index.htmlFile10.96 KB IntelBasedMacs-date.htmlFile10.5 KB IntelBasedMacs-title.htmlFile10.33 KB Performance-date.htmlFile9.14 KB Performance-title.htmlFile8.98 KB Porting-date.htmlFile8.78 KB Porting-title.htmlFile8.63 KB Tools-date.htmlFile16.03 KB Tools-rev-date.htmlFile10.85 KB Tools-rev-revision.htmlFile10.83 KB Tools-rev-title.htmlFile10.84 KB Tools-title.htmlFile15.88 KB UserExperience-date.htmlFile8.85 KB UserExperience-title.htmlFile8.69 KB CocoaFolder-- CoreFoundationFolder-- cssFolder-- DarwinFolder-- DeveloperToolsFolder-- GraphicsImagingFolder-- HardwareDriversFolder-- imagesFolder-- index-date.htmlFile38.14 KB index-rev-date.htmlFile20.91 KB index-rev-revision.htmlFile20.89 KB index-rev-title.htmlFile20.9 KB index-rev-topic.htmlFile45.06 KB index-title.htmlFile38.14 KB index-topic.htmlFile77.78 KB index.htmlFile17.08 KB InternationalizationFolder-- InternetWebFolder-- JavaFolder-- jsFolder-- LegacyTechnologiesFolder-- MacOSXFolder-- OpenSourceFolder-- PerformanceFolder-- PortingFolder-- ResourcesFolder-- ScriptingAutomationFolder-- UserExperienceFolder-- XcodeFolder-- featuredarticlesFolder-- adcstyle.cssFile15.86 KB AppleApplicationsFolder-- idxDashboard-date.htmlFile8.35 KB idxDashboard-title.htmlFile8.24 KB index-date.htmlFile8.52 KB index-title.htmlFile8.51 KB index-topic.htmlFile8.51 KB index.htmlFile6.46 KB CarbonFolder-- CocoaFolder-- cssFolder-- DeveloperToolsFolder-- GamesFolder-- imagesFolder-- index-date.htmlFile16.03 KB index-title.htmlFile16.03 KB index-topic.htmlFile19.32 KB index.htmlFile10.98 KB jsFolder-- LegacyTechnologiesFolder-- ScriptingAutomationFolder-- UserExperienceFolder-- index.htmlFile0.23 KB qaFolder-- referenceFolder-- referencelibraryFolder-- releasenotesFolder-- samplecodeFolder-- technicalnotesFolder-- technicalqasFolder-- technotesFolder-- version.plistFile0.44 KB iPhone SDK License.rtfFile37.93 KB PerlFolder-- wxPerlFolder-- INSTALL.podFile8.26 KB todo.txtFile2.3 KB PythonFolder-- PyObjCFolder-- announcement.txtFile2.33 KB api-notes-macosx.htmlFile30.09 KB api-notes-macosx.txtFile18.37 KB C-API.htmlFile11 KB C-API.txtFile8.67 KB coding-style.htmlFile4.53 KB coding-style.txtFile2.92 KB gnustep.htmlFile1.96 KB gnustep.txtFile1.52 KB index.htmlFile2.75 KB index.txtFile2.64 KB intro.htmlFile44.82 KB intro.txtFile38.38 KB protocols.htmlFile3.48 KB protocols.txtFile2.79 KB PyObjCTools.htmlFile10.96 KB PyObjCTools.txtFile7.9 KB QuartzFolder-- api-notes.txtFile1.47 KB release-process.htmlFile3.83 KB release-process.txtFile2.65 KB structure.htmlFile6.55 KB structure.txtFile5.1 KB TODO.htmlFile13.49 KB TODO.txtFile9.06 KB tutorialFolder-- tutorial_embedFolder-- tutorial_reading.htmlFile12.85 KB tutorial_reading.txtFile11.12 KB website.lstFile0.58 KB wrapping.htmlFile6.04 KB wrapping.txtFile5.2 KB xcodeFolder-- Xcode-Templates.htmlFile13.97 KB wxPythonFolder-- RubyCocoaFolder-- wxWidgetsFolder-- Xcode Tools License.rtfFile18.79 KB$("#example-advanced").treetable({ expandable: true });
// Highlight selected row
$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("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("#example-advanced 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"));
}
}
});
});
$("#example-basic").treetable({ expandable: true });
$("#example-basic-static").treetable();
$("#example-basic-expandable").treetable({ expandable: true });
$("#example-advanced").treetable({ expandable: true });
// Highlight selected row
$("#example-advanced tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
// Drag & Drop Example Code
$("#example-advanced .file, #example-advanced .folder").draggable({
helper: "clone",
opacity: .75,
refreshPositions: true, // Performance?
revert: "invalid",
revertDuration: 300,
scroll: true
});
$("#example-advanced .folder").each(function() {
$(this).parents("#example-advanced 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"));
}
}
});
});
$("form#reveal").submit(function() {
var nodeId = $("#revealNodeId").val()
try {
$("#example-advanced").treetable("reveal", nodeId);
}
catch(error) {
alert(error.message);
}
return false;
});