树形结构:

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. EF 自定义校验设置和捕获异常

    一.定义 public class MyItem: IValidatableObject { [Key] public long Id { get; set; } [Range(0, 100, Err ...

  2. github的注册过程

    带着疑问打开了github.这是一个神奇的网站,因为它到处都是英语,对于我这种英语盲这简直太痛苦了.借助了百度翻译,我还是马马虎虎的完成了github的制作. 首先在它的登录界面下面有一个sign u ...

  3. LeetCode 笔记系列 20 Interleaving String [动态规划的抽象]

    题目: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given: ...

  4. windows系统常用快捷键及其作用

    使用windows快捷键,使得工作起来事半功倍,你都懂了么? win 7操作系统快捷键,其余的操作系统有部分不一致,但总体都差不多 win+D: 显示桌面/隐藏桌面 (再次按win+D,下同) (wi ...

  5. fastcoloredtextbox控件 看下是否解决了中文

    该控件解决中文网址     未测试是否解决   想保存 http://www.dullong.com/share-a-code-can-be-highlighted-components-fastco ...

  6. TCP状态变迁流程

    主动建立TCP链接情况: 被动建立TCP链接情况 主动断开链接的情况 被动断开连接的情况 在TIME_WAIT阶段需要停留2倍的MSL,MSL即Maximum Segment Lifetime,表示任 ...

  7. c++标准模板库algorithm头文件中accumulate算法的代码

    template <typename T>T algorithm(T* start, T* end, T total)//把[start, end)标记范围内所有元素累加到total中{  ...

  8. JVM byte code

    http://blog.jamesdbloom.com/JVMInternals.html#constant_pool http://grepcode.com/file/repository.grep ...

  9. java.outOfMemory

    http://www.kdgregory.com/index.php?page=java.outOfMemory Java Platform, Standard Edition HotSpot Vir ...

  10. selenium下拉框选择

    下拉框结构如下,我需要选择的是new: html为: <select id="condition_type" name="condition_type" ...