zoukankan      html  css  js  c++  java
  • easyui tree基本操作

    特定的业务场景,树控件节点全部采用异步方式加载,涉及到树控件节点的增,删,改操作,代码备忘

    首先要初始化一个根节点,并注册节点单击事件以及数据加载完成后默认选择选择第一个子节点。

    <ul id="tree" class="easyui-tree" 
    data-options="data: [{text: '根节点',id: 'root'}],
    animate:true,
    onClick:treeClick,
    lines: true,
    onLoadSuccess: function (node, data) {if(data.length>2){var n = $('#tree').tree('find', data[0].id);$('#tree').tree('select', n.target);}}">

     根据异步获取的后端数据增加节点

            function buildTree(data) {
                remove();
                var selected = $('#tree').tree('getSelected');
                var nodes = [];
                var ldata = eval(data);
                for (var d = 0; d < ldata.length; d++) {
                    var objNode = {};
                    objNode.id = "init-" + ldata[d].IDENTITY;
                    objNode.text = ldata[d].NAME;
                    nodes.push(objNode);
                }
                $('#tree').tree('append', {
                    parent: selected.target,
                    data: nodes
                });
            }

    修改节点

     function UpdateNode(content) {
                var selected = $('#tree').tree('getSelected');
                $('#tree').tree('update', {
                    target: selected.target,
                    text: content
                });
            }

    删除节点,删除除初始化的根节点外所有子节点

      function remove() {
                var objTree = $("#tree");
                var root = objTree.tree('find', 'root');
                var children = objTree.tree('getChildren', root.target);
                for (var temp in children) {
                    objTree.tree('remove', children[temp].target);
                }
                objTree.tree('select', root.target);
            }
  • 相关阅读:
    php设计模式 — 简单工厂模式(静态工厂方法模式)
    Vue-Router
    各种选项卡
    jq动画
    如何使用swiper写轮播
    Gulp代码压缩
    闭包
    jquery.validation校验
    grunt-js文件压缩
    CSS
  • 原文地址:https://www.cnblogs.com/jingsha/p/5782706.html
Copyright © 2011-2022 走看看