bui.levelselect Class
Constructor
bui.levelselect
(
-
option
Parameters:
-
optionObject-
[data] [渲染的二维数据]Array optional -
[template] [ 1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据]Function optional -
[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] [ 是否弹出, 为true 下面效果才会有效]Boolean optional -
[autoClose] [ 点击最后一个是否关闭]Boolean optional -
[height] [ 弹出的高度默认300]Number optional -
[mask] [ true | false 是否显示遮罩]Boolean optional -
[showValue] [ true | false 是否在弹出层显示选中值]Boolean optional -
[fullscreen] [ false | true 是否全屏]Boolean optional -
[effect] [出现的效果,更多参考{{#crossLink "bui.toggle"}}{{/crossLink}}]String optional -
[position] [ 显示的位置 top | bottom | center]String optional -
[onChange] [ 1.5.6新增后面2个参数, 每次点击的回调,有3个参数, e (dom本身), currentData (当前层的数据), nextData( 下一层的数据)]Function optional -
[onBeforeInit] [ 1.5.1新增 初始化前触发]Function optional -
[onInited] [ 1.5.1新增 初始化以后触发]Function optional -
[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
destroy
()
[销毁控件]
Example:
//销毁
citySelect.destroy();
hide
()
chainable
隐藏窗口
Example:
//显示菜单
citySelect.hide();
next
()
chainable
下一个,1.5 新增
Example:
//下一个
citySelect.next();
option
(
chainable
-
[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] -
[value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]
获取设置参数
Parameters:
-
[key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]String | object optional -
[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
重置
Example:
//重置
citySelect.reset();
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] [ 依赖控件名 dialog, slide, select]
获取依赖的控件
Parameters:
-
[name] [ 依赖控件名 dialog, slide, select]String optional
Example:
//获取依赖控件
var citySelectWidget = citySelect.widget();
Events
off
为控件取消绑定事件
Event Payload:
-
[type] [ 事件类型: "change"(点击选择框改变的时候触发) | "lastchange"(点击最后一个层级的时候,触发)]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
citySelect.off("change");
on
为控件绑定事件
Event Payload:
-
[type] [ 事件类型: "change"(点击选择框改变的时候触发) | "lastchange"(点击最后一个层级的时候,触发)]String optional -
[callback] [ 绑定的事件, this 为当前点击的菜单]Function optional
Example:
citySelect.on("change",function () {
// 点击的菜单
console.log(this);
});