工具位置

  • 左侧移动端app控件下


画面效果

说明

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

方法

  • setStyle(objectname, text:{active-color,inactive-color},bgcolor)
  • 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);
  • getValue(objectname),获得复选框选中的节点。
    • 示例:pktree.getValue('treeBox'); 返回示例:[{title: '油条',id: 5},{title: '包子',id: 6},{title: '豆浆',id: 7}]
  • refresh(objectname),刷新树控件
    • 示例:pktree.refresh('treeBox');

专有事件

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

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

专有动画关联

专有属性配置对话框

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


  • 无标签