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.cascader

无限级联选择器做为地区等无线级分类选择必备神器,在日常开发中扮演着重要角色。
依赖加载模块:cascader
<input type="text" name="area" id="area" class="wui-input">

<script type="text/javascript">
    wui.use(["cascader"], function(){
        var cascader = wui.cascader;

        //这里主要展示数据格式
        var data = [{
            value: '11',
            label: '北京',
            children: [{
                value: '1101',
                label: '北京市',
                children: [{
                    value: '110101',
                    label: '东城区'
                }]
            }]
        },
            {
                value: '12',
                label: '浙江'
            }]

        var area = cascader({
            elem: "#area",
            data: data
        });

    });
</script>

怎么样,是不是很简单还很实用呢!

参数选项 说明 类型 默认值
elem 指向 input 的容器,值可以是容器ID、CLASS类。如:
#cascader , .cascader
目前只支持 input 输入框
String -
data 需要的静态数据,格式如:
var data = [{
 value: '11',
 label: '北京',
 children: [{
  value: '1101',
  label: '北京市',
  children: [{
    value: '110101',
    label: '东城区'
   }]
  }]
},
{
 value: '12',
 label: '浙江'
}]
Array -
url 异步获取的数据地址,data 与 url 两个参数二选一 Array -
type 可选
异步获取的方式,post/get
String get
where 可选
异步传入的参数,格式:
where: {
a: "aaa",
b: "bbb"
}
String -
triggerType 可选
触发方式,可选项:
click:鼠标点击触发
change:鼠标移入触发
String click
showLastLevels 可选
输入框是否只显示最后一级
Boolean false
value 可选
传入的初始值,值为 data 的 value 值
格式如:value: ["A", "AA1"]
Array -
success 可选
回调函数,选择完成之后的回调函数
//valData:value数组
//labelData:label数组,可为选
success: function (valData,labelData) {
 ... ...
}
String -

重新渲染数据。

<input type="text" name="area" id="area" class="wui-input">

<script type="text/javascript">
    wui.use(["cascader"], function(){
        var cascader = wui.cascader;

        var area = cascader({
            elem: "#area",
            data: data
        });

        area.reload()

    });
</script>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile