zoukankan      html  css  js  c++  java
  • Tree( 树) 组件[3]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖
    动)和 Droppable(放置)组件。
    一. 事件列表
    很多事件的回调函数都包含'node'参数,其具备如下属性:
    id:绑定节点的标识值。
    text:显示的节点文本。
    iconCls:显示的节点图标 CSS 类 ID。
    checked:该节点是否被选中。
    state:节点状态,'open' 或 'closed'。
    attributes:绑定该节点的自定义属性。
    target:目标 DOM 对象。

    //部分事件
    $('#box').tree({
    url : 'tree.php',
    lines : true,
    checkbox : true,
    onlyLeafCheck : true,
    dnd : true,
    onClick : function (node) {
    console.log(node);
    },
    onDblClick : function (node) {
    console.log(node);
    },
    onBeforeLoad : function (node, param) {
    console.log(node);
    console.log(param);
    //return false;
    },
    onBeforeLoad : function (node,param) {
    console.log(node);
    console.log(param);
    },
    onLoadError : function (arguments) {
    console.log(arguments);
    },
    onBeforeExpand : function (node) {
    console.log(node);
    },
    onExpand : function (node) {
    console.log(node);
    },
    onBeforeCollapse : function (node) {
    console.log(node);
    },
    onCollapse : function (node) {

    console.log(node);
    },
    onBeforeCheck : function (node) {
    console.log(node);
    },
    onCheck : function (node, checked) {
    console.log(node);
    console.log(checked);
    },
    onBeforeSelect : function (node) {
    console.log(node);
    },
    onContextMenu: function(e, node){
    e.preventDefault();
    // 查找节点
    $('#box').tree('select', node.target);
    // 显示快捷菜单
    $('#menu').menu('show', {
    left: e.pageX,
    top: e.pageY
    });
    }
    onBeforeDrag : function (node) {
    console.log(node);
    },
    onDragEnter : function (target, source) {
    console.log(target);
    console.log(source);
    },
    onBeforeDrop : function (target, source, point) {
    console.log(target);
    console.log(source);
    console.log(point);
    },
    });

  • 相关阅读:
    (17)打鸡儿教你Vue.js
    (16)打鸡儿教你Vue.js
    (15)打鸡儿教你Vue.js
    (14)打鸡儿教你Vue.js
    (13)打鸡儿教你Vue.js
    Webpack 入门教程
    ios textfield如何设置,只能输入1.0-9.9内的数字,并实现时时监测效果
    安卓edittext实现输入数字限制条件的效果
    js动态设置根元素的rem方案
    Fresco使用之OOM问题记录
  • 原文地址:https://www.cnblogs.com/qinsilandiao/p/5016701.html
Copyright © 2011-2022 走看看