树形结构：

http://www.jeasyui.com/documentation/index.php

网上有对这个插件的说明，总的来说这个插件将selected和checked作为两种状态：

1、鼠标在tree中选中一行（不勾选）用getselected方法获取，因为selected不能多选，所以getselected获取到的是一个tree对象

2、鼠标在tree中勾选中的文件/文件夹用getchecked方法获取，返回的是一个多对象列表

获取到的对象target有很多方法，具体参考插件说明

对于空文件夹的展示考虑了两种方法：

1、空文件夹中新建一个隐藏文件

2、在json中给空文件夹设置成文件，并一个iconCls属性，样式为文件夹不打开的图标，属性如下，添加到jquery-easyui-1.4.4/themes/icon.css

.icon-empty-folder{

    background:url('default/images/tree_icons.png') no-repeat -208px 0;

}

下面是针对空文件夹处理方法2的文件展开和收缩的js，注意展开和收缩都是selected属性

function collapseall(){

        var node = $('#file_list').tree('getSelected');

        var leaf = $('#file_list').tree('isLeaf', node.target);

        if (node){

            if (leaf && node.iconCls != 'icon-empty-folder'){

                alert("这是一个文件，不能收缩");

            }

            else if (leaf && node.iconCls == 'icon-empty-folder'){

                alert("这是一个空文件夹，不能收缩");

            }

            else {

                $('#file_list').tree('collapseAll', node.target);

            }

        }

        else {

            $('#file_list').tree('collapseAll');

        }

    }

function expandall(){

        var node = $('#file_list').tree('getSelected');

        var leaf = $('#file_list').tree('isLeaf', node.target);

        if (node){

            if (leaf && node.iconCls != 'icon-empty-folder'){

                alert("这是一个文件，不能展开");

            }

            else if (leaf && node.iconCls == 'icon-empty-folder'){

                alert("这是一个空文件夹，不能展开");

            }

            else {

                $('#file_list').tree('expandAll', node.target);

            }

        }

        else {

            $('#file_list').tree('expandAll');

        }

    }

代码展示语法高亮：

http://alexgorbatchev.com/SyntaxHighlighter/

参考：

http://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.html

http://blog.csdn.net/zk437092645/article/details/8641495

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title> python代码高亮 </title>

    <link rel="stylesheet" type="text/css"href="/static/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>

    <script type="text/javascript"src="/static/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>

    <script type="text/javascript"src="/static/syntaxhighlighter_3.0.83/scripts/shBrushPython.js"></script>

    <script type="text/javascript">SyntaxHighlighter.all();</script>

    </head>

<body style="background: white; font-family: Helvetica">

<header class="title" style="position:fixed;left:3.5%;width:95.1%;height:51px;background:rgb(102, 102, 126);z-index: 999;">

    <div style="font-size:26px;font-weight:bold;color:#fff;text-align: center;line-height:51px;">

        python代码路径：

    </div>

</header>

<br>

<br>

<br>

<pre class="brush: py;">
  ... 代码内容 ...

</pre>

</body>

</html>

支持左右移动选择框：

http://loudev.com/#demos

【JavaScript】前端插件的更多相关文章

  1. 前端插件@user

    分享一个 @user 前端插件   开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...

  2. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  3. VScode前端插件推荐

    工欲善其事,必先利其器,安利一波前端插件. Chinese (Simplified) Language Pack for Visual Studio CodeVScode汉化插件 Beautify代码 ...

  4. JavaScript前端框架的思考

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...

  5. javascript日历插件

    原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...

  6. 一个JavaScript触发器插件，可通过指定频次、指定时间内触发指定的处理函数

    js-trigger是一个JavaScript触发器插件,可通过指定频次.指定时间内触发指定的处理函数 Tango<tanwei_yx@126.com> 特性 支持AMD/CMD/Comm ...

  7. JavaScript前端和Java后端的AES加密和解密

    在实际开发项目中,有些数据在前后端的传输过程中需要进行加密,那就需要保证前端和后端的加解密需要统一.这里给大家简单演示AES在JavaScript前端和Java后端是如何实现加密和解密的. 直接上代码 ...

  8. 我发起并创立了一个 Javascript 前端库 开源项目 jWebForm

    在线演示地址: ( 在线演示 云平台 由 Kooboo 提供  https://www.kooboo.com/ ) 按钮:      http://iwebform.kgeking.kooboo.si ...

  9. Advanced Javascript outlining插件说明

    Advanced Javascript outlining插件 用途:在js文件中写入#region/#endregion代码组合段,可收缩和展开.类似于后台页面的region用法. 效果截图如下(前 ...

  10. Django之前端插件定制之表头

    什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写 ...

随机推荐

  1. PHPExcel 导出表格 不知道好不好用

    PHPExcel类是php一个excel表格处理插件了,下面我来给大家介绍利用PHPExcel类来导入与导出excel表格的应用方法,有需要了解的朋友不防参考参考(PHPExcel自己百度下载这里不介 ...

  2. C语言修炼－第2天

    从昨天被打击到下定决心以来,还是觉得学习代码是能让自己真正觉得充实的事情.其实潜意识里一直是这样的不是吗?从开始选择工科就没有后悔过,更不应该现在就放弃,其实自己的缺点本来就是不够扎实,给自己150天 ...

  3. Struts 2之动态方法调用，不会的赶紧来

    学习Struts2框架以来为了减少Action 的数量,我们可以使用动态方法进行处理. 动态方法调用(Dynamic Method Invocation,DMI)是指表单元素的Action并不是直接等 ...

  4. windows7共享硬盘 虚拟机Mac访问windows7硬盘

    选择本地磁盘(G)-->右键-->共享-->高级共享点击高级共享 确定   完成共享 虚拟机Mac 访问共享磁盘 2.苹果MAC系统,点击桌面.打开顶部菜单 “前往”.   3.菜单 ...

  5. LintCode Binary Tree Preorder Traversal

    Given a binary tree, return the preorder traversal of its nodes' values. Given: 1 / \ 2 3 / \ 4 5 re ...

  6. C++ Primer : 第十三章 : 拷贝控制之拷贝控制和资源管理

    定义行为像值的类 行为像值的类,例如标准库容器和std::string这样的类一样,类似这样的类我们可以简单的实现一个这样的类HasPtr. 在实现之前,我们需要: 定义一个拷贝构造函数,完成stri ...

  7. JS判断是否来自手机移动端的访问,并跳转

    var browserName_ = navigator.userAgent ; &&browserName_.indexOf(&&browserName_.index ...

  8. 解决Ubuntu输入正确密码后无法进入桌面，一直停留在登陆界面的问题

    在登陆界面按下Ctrl + Shift + F1 进入命令行模式,输入你的用户名和密码之后,敲入下面几行命令就可以了! $ cd - $ sudo chown 你的用户名:你的用户名 .Xauthor ...

  9. Java加密算法 RSA

    Java加密算法 RSA 2015-06-06 08:44 511人阅读 评论(0) 收藏 举报  分类: JAVA(57)  公钥加密也称为非对称加密.速度慢.加密和解密的钥匙不相同,某一个人持有私 ...

  10. SSIS 参数与环境

    微软 BI 系列随笔 - SSIS 基础 - 参数与环境 简介 在上一篇博客中,主要讲述了如何实现SSIS的项目部署,参见 微软 BI 系列随笔 - SSIS 2012 基础 - SSIS 项目部署模 ...