bui.levelselect Class
Constructor
bui.levelselect
(
-
option
Parameters:
-
optionObject-
[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;
}
})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);
});