WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
树形组件 - wui.tree 更多 tree 示例

模块加载名称:tree
通过 tree.render() 方法指定一个元素,便可快速创建一个 tree 实例。
<div id="test1"></div>

<script>
wui.use('tree', function(){
   var tree = wui.tree;

   //渲染
   var inst1 = tree.render({
      elem: '#test1'  //绑定元素
      ,data: [{
        title: '江西' //一级菜单
        ,children: [{
          title: '南昌' //二级菜单
          ,children: [{
            title: '高新区' //三级菜单
            //…… //以此类推,可无限层级
          }]
        }]
      },{
        title: '陕西' //一级菜单
        ,children: [{
          title: '西安' //二级菜单
        }]
      }]
   });
});
</script>
目前 tree 组件提供以下基础参数,可根据需要进行相应的设置
参数选项 说明 类型 示例值
elem 指向容器选择器 String/Object -
data 数据源 Array 详见数据选项
id 设定实例唯一索引,用于基础方法传参使用。 String -
showCheckbox 是否显示复选框 Boolean false
edit 是否开启节点的操作图标。默认 false。
  • 若为 true,则默认显示“改删”图标
  • 若为 数组,则可自由配置操作图标的显示状态和顺序,目前支持的操作图标有:addupdatedel,如:

    edit: ['add', 'update', 'del']
Boolean/Array ['update', 'del']
accordion 是否开启手风琴模式,默认 false Boolean false
onlyIconControl 是否仅允许节点左侧图标控制展开收缩。默认 false(即点击节点本身也可控制)。若为 true,则只能通过节点左侧图标来展开收缩 Boolean false
isJump 是否允许点击节点时弹出新窗口跳转。默认 false,若开启,需在节点数据中设定 link 参数(值为 url 格式) Boolean false
showLine 是否开启连接线。默认 true,若设为 false,则节点左侧出现三角图标。 Boolean true
text 自定义各类默认文本,目前支持以下设定:
text: {
  defaultNodeName: '未命名' //节点默认名称
  ,none: '无数据' //数据为空时的提示文本
}             
Object -
我们将 data 参数称之为数据源,其内部支持设定以下选项
属性选项 说明 类型 示例值
title 节点标题 String 未命名
id 节点唯一索引值,用于对指定节点进行各类操作 String/Number 任意唯一的字符或数字
field 节点字段名 String 一般对应表字段名
children 子节点。支持设定选项同父节点 Array [{title: '子节点1', id: '111'}]
href 点击节点弹出新窗口对应的 url。需开启 isJump 参数 String 任意 URL
spread 节点是否初始展开,默认 false Boolean true
checked 节点是否初始为选中状态(如果开启复选框的话),默认 false Boolean true
disabled 节点是否为禁用状态。默认 false Boolean false
在节点被点击后触发,返回的参数如下:
tree.render({
  elem: '#test1'
  ,click: function(obj){
    console.log(obj.data); //得到当前点击的节点数据
    console.log(obj.state); //得到当前节点的展开状态:open、close、normal
    console.log(obj.elem); //得到当前节点元素

    console.log(obj.data.children); //当前节点下是否有子节点
  }
});
点击复选框时触发,返回的参数如下:
tree.render({
  elem: '#test1'
  ,oncheck: function(obj){
    console.log(obj.data); //得到当前点击的节点数据
    console.log(obj.checked); //得到当前节点的展开状态:open、close、normal
    console.log(obj.elem); //得到当前节点元素
  }
});
通过 operate 实现函数,对节点进行增删改等操作时,返回操作类型及操作节点
tree.render({
  elem: '#test1'
  ,operate: function(obj){
    var type = obj.type; //得到操作类型:add、edit、del
    var data = obj.data; //得到当前节点的数据
    var elem = obj.elem; //得到当前节点元素

    //Ajax 操作
    var id = data.id; //得到节点索引
    if(type === 'add'){ //增加节点
      //返回 key 值
      return 123;
    } else if(type === 'update'){ //修改节点
      console.log(elem.find('.wui-tree-txt').html()); //得到修改后的内容
    } else if(type === 'del'){ //删除节点

    };
  }
});
很多时候 tree 可能不仅仅只是一个树菜单,它还用于各种权限控制等场景,这个时候你需要获得选中的节点。
语法:tree.getChecked(id)
tree.render({
  elem: '#test'
  ,data: [] //数据源
  ,id: 'demoId' //定义索引
});

//获得选中的节点
var checkData = tree.getChecked('demoId');
除了通过 checked 参数对节点进行初始勾选之外,你还可以通过方法动态对节点执行勾选
语法: tree.setChecked(id, checkedId)
参数 checkedId:代表的是数据源中的节点 id
tree.render({
  elem: '#test'
  ,data: [] //数据源
  ,id: 'demoId' //定义索引
});

//执行节点勾选
tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点
重载一个已经创建的组件实例,被覆盖新的基础属性
tree.render({
  elem: '#test'
  ,data: []
  ,id: 'demoId' //定义索引
});

 //可以重载所有基础参数
tree.reload('demoId', {
  //新的参数
});
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile