BUI

其它版本:

API for BUI 1.5.3

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] Object optional

      [1.4.5新增 默认,{ name: "n", data: ["c","a"] }]

      • [name] String optional
        [ 数据的文本字段 ]
      • [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 ]

    • [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

hide

() chainable

隐藏窗口

Example:

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

next

() chainable

下一个,1.5 新增

Example:

       //下一个
       citySelect.next();

prev

() chainable

上一个,1.5 新增

Example:

       //上一个
       citySelect.prev();

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]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 dialog, slide, select ]

Example:

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

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

       citySelect.off("change");

on

为控件绑定事件

Event Payload:

  • [type] String optional

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

  • [callback] Function optional

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

Example:

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