【Aplicativo ztree】Efeito de dobramento da pasta Ztree com função de recuperação baseada em jquery (download do código-fonte anexado)

---

---

escrito na frente

Há alguns dias, o líder solicitou a criação de uma ferramenta para gerenciamento de banco de dados. O objetivo principal era dar suporte a algumas operações em lote. A demanda do cliente vinha principalmente da operação anterior incorreta e exclusão errônea de dados, que afetava o negócio de produção e prejudicava grande impacto na empresa, então eu queria usá-lo. Os programas são usados ​​para controlar a execução. Claro, a principal capacidade de implementação está nos scripts Python. A principal coisa que o front-end faz é mostrar o quão intuitivo ele é. Acabei de pensar no componente ztree. Com base nos componentes existentes, a implementação é relativamente rápida, mas a capacidade de ajuste é ruim. Hoje, deixe-me explicar a você o exemplo de aplicação do ztree.

conhecimento envolvido

O aplicativo de exemplo do Ztree, baseado em jquery para realizar o efeito de dobragem de pastas, como realizar a função de hierarquia de pastas, ztree realiza o efeito de pasta, aplicação flexível de ztree, efeito de dobragem de pastas ztree com função de recuperação.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

Mostrar resultados

Isso é principalmente para fornecer um feedback sobre o efeito final da implementação, e o link de compartilhamento do pacote de código completo está anexado no final do artigo.

1. Construir domínio

Na verdade, a implementação principal aqui ainda depende de componentes, por isso é muito simples construir o dom. Ele fornece principalmente um contêiner ul, como segue:

<div class="row" style="margin: 50px;">
        <ul id="tree" class="ztree"></ul>
        <div class="sm">原创于CSDN博主 - <br>《拄杖盲学轻声码》</div>
    </div>

O núcleo é definir o id para a árvore.

2. Apresentar ztree e jquery

Componentes de estilo dependentes:

• 
  Componentes js dependentes de css/zTreeStyle/zTreeStyle.css
• js/jquery.min.js
• js/jquery-migrate-1.2.1.js
• js/jquery.ztree.all-3.5.min.js
• js/jquery.ztree.exhide-3.5.min.js

Os principais são os componentes de estilo do ztree e os componentes funcionais do jquery e do ztree.Claro, há um download completo do pacote fonte no final do artigo.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

3. Realize a função de pesquisa e ligue

Na verdade, aqui eu encapsularei principalmente um componente funcional MtrSearchZTree.js, que é usado para pesquisar a hierarquia. Vale a pena notar que os dados falsos (dados retornados pela interface) precisam ter uma distinção de estrutura pai-filho. Caso contrário, você precisa convertê-lo você mesmo. Eu não o tinha em meu projeto real, e então o percorri e juntei.
O método de chamar ztree é basicamente o seguinte:

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
    
    };
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [{
    
    
    name: "test0",
    open: true,
    children: [{
    
    
        name: "test0_1"
    }, {
    
    
        name: "test0_2"
    }, {
    
    
        name: "test0",
        open: true,
        children: [{
    
    
            name: "CSDN博主.doc"
        }, {
    
    
            name: "拄杖盲学轻声码.doc"
        }]
    }]
}, {
    
    
    name: "test1",
    open: true,
    children: [{
    
    
        name: "test1_1"
    }, {
    
    
        name: "test1_2"
    }, {
    
    
        name: "test1",
        open: true,
        children: [{
    
    
            name: "养成记.exe"
        }, {
    
    
            name: "演员的自我修养.html"
        }]
    }]
},
{
    
    
    name: "test2",
    open: true,
    children: [{
    
    
        name: "轻舟已过万重山.pdf"
    }, {
    
    
        name: "两岸猿声啼不住.ppt"
    }]
}
];
$.fn.zTree.init($("#tree"), setting, zNodes);
new MtrSearchZTree();

A função de pesquisa precisa apresentar os componentes que encapsulei e o pacote completo é baixado no final do artigo

• MtrSearchZTree.js

4. Compartilhamento de código-fonte

1) Baidu Netdisk

Link: https://pan.baidu.com/s/1Wd2bdBmWFmsCMlqgUoG7BA
Código de extração: hdd6

2) 123 disco de nuvem

Link: https://www.123pan.com/s/ZxkUVv-wxI4.html
Código de extração: hdd6

3) Mensagem de e-mail

Deixe seu e-mail na área de comentários e o blogueiro enviará para você assim que o vir. Desejo-lhe uma vida feliz!

---

Resumir

O acima é o que eu quero falar hoje. Este artigo apresenta principalmente a aplicação de exemplo do Ztree, realiza o efeito de dobragem de pastas com base em jquery, como realizar a função de hierarquia de pastas, ztree realiza o efeito de pastas, aplicação flexível de ztree, pasta ztree com recuperação função Efeito dobrável, também espero o progresso de todos juntos, vamos trabalhar juntos em 2023! ! !

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。