版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

工具位置

  • 左侧移动端app控件下

Image Removed

画面效果

说明

  • 每个节点,title和id是必须的,其他可选。可随意定义自定义字段名称和值,点击按钮时会返回这些值。
  •  仅节点左侧图标控制收缩,点击文字部分会调用onClick事件

...

  • setData(objectname, data),设定属性控件的所有节点的信息,是一个数组,包含父子关系。

    • 示例:pktree.setData('treeBox',[{
      title: '江西'
      ,id: 1
      ,children: [{
      title: '南昌'
      ,id: 1000
      ,children: [{
      title: '青山湖区'
      ,id: 10001
      },{
      title: '高新区'
      ,id: 10002
      }]
      },{
      title: '九江'
      ,id: 1001
      },{
      title: '赣州'
      ,id: 1002
      }]
      },{
      title: '广西'
      ,id: 2
      ,children: [{
      title: '南宁'
      ,id: 2000
      },{
      title: '桂林'
      ,id: 2001
      }]
      },{
      title: '陕西'
      ,id: 3
      ,children: [{
      title: '西安'
      ,id: 3000
      },{
      title: '延安'
      ,id: 3001
      }]
      }])
  • showLine(objectname, data),是否开启连接线。

    • 是否开启连接线。默认 true,不开启连线,,若设为 false,则节点左侧出现三角图标。
    • 示例:pktree.showLine('treeBox',false);
  • showCheckBox(objectname, data),是否显示复选框。

    • 显示:true,不显示:false
    • pktree.showCheckBox('treeBox',true);
  • setStyle(objectname, data) 设置控件样式
    • 示例:pktree示例:pktree.setStyle('treeBox',{'bgColor':'bluecyan','fontColor':'whitered','iconColor':'yellow','activeBgcolor':'blue'})
      • bgColor:背景色
      • fontColor:文字颜色
      • iconColor:箭头图标颜色
      • activeBgcolor:鼠标移入状态背景色
  • $('.layui-tree-txt').css('color','#555'); value.elem.find('.layui-tree-txt').css('color','#FFB800')
    • 设置选中样式 在不显示复选框的时候要放在onClick里面使用  显示复选框之后可以在onChange里面使用
  • getValue(objectname)获得复选框选中的节点。,获得复选框选中的节点。 数据要有id才能用   要有复选框
    • 示例:pktree.getValue('treeBox'); 返回示例:[{title: '油条',id: 5},{title: '包子',id: 6},{title: '豆浆',id: 7}]
  • setChecked(objectname,idData),设置节点勾选
    •  objectname:控件名
    • idData:勾选节点id
    • 示例:pktree.setChecked('treeBox',1)     //单个勾选 id 为 1 的节点           pktree.setChecked('treeBox',[2, 3])     //批量勾选 id 为 2、3 的节点
  • refresh(objectname),刷新树控件
    • 示例:pktree.refresh('treeBox');
  • isShow(objectname)  显示控件

    • 示例:pktree.isShow('treeBox');
  • isHide(objectname)  隐藏控件

    • 示例:pktree.isHide('treeBox');

专有事件

  • onClick事件。当某个节点被点击或选中时,触发onClick事件。参数:objectname,value。

  • 其中value:返回的是选中节点的信息数组,至少包括id和title,其他属性根据setData时设定哪些就返回哪些

  • onChnage事件。针对带复选框的树形控件,当节点前的输入框选中状态发生变化时触发onClick事件。参数:objectname,value。

  • 其中value:返回的是选中节点的信息数组,至少包括id和title,checked表示当前复选框的选中状态true/false,其他属性根据setData时设定哪些就返回哪些

专有动画关联

专有属性配置对话框

  • 可以配置是否显示连接线
  • 可以配置是否显示复选框
  • 可以设定当前树的数据的json字符串,即setData的内容

...