【JavaScript】前端插件 - poorX

公告

昵称： poorX
园龄： 11年3个月
粉丝： 12
关注： 8

+加关注

随笔档案

阅读排行榜

评论排行榜

最新评论

1. Re:【Python】supervisor安装和管理celery
写得赞，但主要还是celery太难了。此国产分布式函数调度框架，从用法调用难度，用户所需代码量，超高并发性能，qps控频精确程度，支持的中间件类型，任务控制方式，稳定程度等19个方面全方位超过ce...
--北风之神0509
2. Re:【MySQL】InnoDB: Error: checksum mismatch in data file 报错
对我有启发
--lizhenlzlz
3. Re:【MySQL】frm文件解析
@如花是我的姜承尧的一本书里好像提起过，用了个工具忘了是自己写的还是hexdump，你可以翻翻...
--poorX
4. Re:【MySQL】frm文件解析
大佬你好，有个关于索引的问题想请教一下，我想查看一个二级索引B+树的高度，请问怎么通过文件来找到呢？
--如花是我的
5. Re:【MySQL】frm文件解析
@段旭辉 MySQL官网可以下载源码...
--poorX

【JavaScript】前端插件

树形结构：

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>