BUI

其它版本:

API for BUI 1.6.x

Show:

bui.levelselect Class

级联选择

预览地址: demo

方法说明:

show: 选中第几个数据
hide: 获取或者设置值
value: 获取或者设置文本

Constructor

bui.levelselect

(
  • option
)

Parameters:

  • option Object
    • [data] Array optional

      渲染的二维数据

    • [template] Function optional

      1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据

    • [appendTo] String | Object optional

      渲染到哪里去

    • [trigger] String optional

      触发弹出框的按钮样式名,层级有多少,这个样式就有多少个

    • [field] 1.4.5新增 默认,{ name: "n", data: ["c","a"] Object optional

      }

    • [field.name] String optional

      数据的文本字段

    • [field.data] Array optional

      下一级数组的所在字段,支持多个不同字段

    • [title] String optional

      弹出层的标题

    • [placeholder] String optional

      占位符: 默认:"请选择"

    • [value] 初始化选中的文本 例如:["广东","广州市","天河区"] Array optional
    • [popup] Boolean optional

      是否弹出, 为true 下面效果才会有效

    • [autoClose] Boolean optional

      点击最后一个是否关闭

    • [height] Number optional

      弹出的高度默认300

    • [mask] Boolean optional

      true | false 是否显示遮罩

    • [showValue] Boolean optional

      true | false 是否在弹出层显示选中值

    • [fullscreen] Boolean optional

      false | true 是否全屏

    • [effect] String optional

      出现的效果,更多参考bui.toggle

    • [position] String optional

      显示的位置 top | bottom | center

    • [onChange] Function optional

      1.5.6新增后面2个参数, 每次点击的回调,有3个参数, e (dom本身), currentData (当前层的数据), nextData( 下一层的数据)

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [appendTo] String | Object optional

      默认:""

Example:

   html:
                                       <div class="bui-box">
                                           <!-- .selected-val 跟你层级个数保持一致 -->
                                           <div class="selected-val"></div>
                                           <div class="selected-val"></div>
                                           <div class="selected-val"></div>
                                       </div>
                                    

js: // http://www.easybui.com/demo/json/citys.js

   // 普通初始化
                                       var citySelect = bui.levelselect({
                                           data: citys,
                                           title: "所在地区",
                                           trigger: ".selected-val",
                                           level: 3,
                                           field:{
                                               name: "n",
                                               data: ["c","a"],
                                           }
                                       })
                                    
                                       // 设置值
                                       var citySelect2 = bui.levelselect({
                                           data: citys,
                                           title: "所在地区",
                                           trigger: ".selected-vals",
                                           level: 3,
                                           field:{
                                               name: "n",
                                               data: ["c","a"],
                                           },
                                           value: ["广东","广州市","天河区"]
                                       })
                                    
                                       // 3. 自定义模板
                                       var citySelect2 = bui.levelselect({
                                           data: citys,
                                           title: "所在地区",
                                           trigger: ".selected-vals",
                                           level: 3,
                                           template: function(data) {
                                               var html = '';
                                               html += '<div class="bui-list bui-list-select">';
                                               data.forEach(function(item, i) {
                                                   var name = typeof item === "string" ? item : item.n;
                                                   html += `
                                                   <div class="bui-btn bui-box bui-btn-line">
                                                       <div class="span1">${ name}</div>
                                                       <input value="${name}" text="${name}" index="${i}" type="radio" class="bui-choose">
                                                   </div>`
                                               })
                                               html += '</div>';
                                    
                                               return html;
                                           }
                                       })
                                    

Item Index

Events

Methods

destroy

()

Defined in src/scripts/ui/bui.levelselect.js:755

Available since 1.6.0

[销毁控件]

Example:

       //销毁
                                                       citySelect.destroy();
                                                

hide

() chainable

隐藏窗口

Example:

       //显示菜单
                                                       citySelect.hide();
                                                

next

() chainable

下一个,1.5 新增

Example:

       //下一个
                                                       citySelect.next();
                                                

option

(
  • [key]
  • [value]
)
chainable

Defined in src/scripts/ui/bui.levelselect.js:729

Available since 1.6.0

获取设置参数

Parameters:

  • [key] String | object optional

    不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数

  • [value] String | number | boolean | function optional

    设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传

Example:

        //获取所有参数
                                                       var option = citySelect.option();
                                                
                                                       //获取某个参数
                                                       var id = citySelect.option( "id" );
                                                
                                                       //修改一个参数
                                                       citySelect.option( "popup",false );
                                                
                                                       //修改多个参数
                                                       citySelect.option( {"popup":false} );
                                                

prev

() chainable

上一个,1.5 新增

Example:

       //上一个
                                                       citySelect.prev();
                                                

reset

() chainable

Defined in src/scripts/ui/bui.levelselect.js:598

Available since 1.6.2

重置

Example:

       //重置
                                                       citySelect.reset();
                                                

setNav

(
  • index
  • text
)
chainable

Defined in src/scripts/ui/bui.levelselect.js:579

Available since 1.5.6

修改导航文本

Parameters:

  • index Number

    [第几个导航]

  • text String

    [内容]

Example:

       //设置值
                                                       citySelect.setNav(3,"请选择");
                                                

show

() chainable

显示窗口

Example:

       //显示菜单
                                                       citySelect.show();
                                                

to

() chainable

跳转到第几层 ,1.5 新增

Example:

       //跳转
                                                       citySelect.to(1);
                                                

value

() chainable

取值

Example:

       //取值
                                                       var value = citySelect.value();
                                                
                                                       // 返回 [{name:"广东",value:"广州市",index:"0"}]
                                                
                                                       //设置值
                                                       citySelect.value(["广东","广州市","天河区"]);
                                                
                                                       citySelect.value([{value:"广东"},{value:"广州市"},{value:"天河区"}]);
                                                

widget

(
  • [name]
)

Defined in src/scripts/ui/bui.levelselect.js:796

Available since 1.4.2

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名 dialog, slide, select

Example:

       //获取依赖控件
                                                       var citySelectWidget = citySelect.widget();
                                                

Events

off

Defined in src/scripts/ui/bui.levelselect.js:702

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "change"(点击选择框改变的时候触发) | "lastchange"(点击最后一个层级的时候,触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       citySelect.off("change");
                                                

on

Defined in src/scripts/ui/bui.levelselect.js:682

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "change"(点击选择框改变的时候触发) | "lastchange"(点击最后一个层级的时候,触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       citySelect.on("change",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });