## 6.3.1.快速使用 :id=start
```html
<input id="demoCascader1" placeholder="請選擇" class="layui-hide"/>
<script>
layui.use(['cascader'], function () {
var $ = layui.jquery;
var cascader = layui.cascader;
cascader.render({
elem: '#demoCascader1',
data: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宮'
},
{
value: 'tiantan',
label: '天壇'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}]
});
});
</script>
```
## 6.3.2.異步加載 :id=async
```html
<input id="demoCascader1" placeholder="請選擇" class="layui-hide"/>
<script>
layui.use(['cascader'], function () {
var $ = layui.jquery;
var cascader = layui.cascader;
cascader.render({
elem: '#demoCascader1',
reqData: function (values, callback, data) {
// values是當前所有選中的值，data是當前選中的對象
$.get('xxxx.json', { id: data.value }, function(res){
callback(res.data); // 數據請求完成通過callback回調
},'json');
}
});
});
</script>
```
異步加載的數據格式為：
```
[
{value: 'beijing', label: '北京', haveChildren: true},
{value: 'jiangsu', label: '江蘇', haveChildren: true}
]
```
通過haveChildren字段來標識是否還有子節點，如果你的后臺數據格式不是這樣，可以在callback之前格式化：
```js
cascader.render({
elem: '#demoCascader1',
reqData: function (values, callback, data) {
// values是當前所有選中的值，data是當前選中的對象
$.get('xxxx.json', { id: data.value }, function(res){
var newList = [];
for(var i=0;i<res.data.length;i++){
var item = res.data[i];
newList.push({
value: item.id,
label: item.name,
haveChildren: item.haveChildren
});
}
callback(newList); // 數據請求完成通過callback回調
},'json');
}
});
```
## 6.3.3.自定義分隔符 :id=format
```html
<input id="demoCascader1" placeholder="請選擇" class="layui-hide"/>
<script>
layui.use(['cascader'], function () {
var $ = layui.jquery;
var cascader = layui.cascader;
cascader.render({
elem: '#demoCascader1',
data: [],
renderFormat: function (labels, values) {
return labels.join(' / '); // 默認是用斜杠分割，可以自定義
}
});
});
</script>
```
## 6.3.4.搜索功能 :id=search
```html
<input id="demoCascader1" placeholder="請選擇" class="layui-hide"/>
<script>
layui.use(['cascader'], function () {
var $ = layui.jquery;
var cascader = layui.cascader;
cascader.render({
elem: '#demoCascader1',
data: [],
filterable: true // 這個參數是開啟搜索功能
});
// 自定義搜索
cascader.render({
elem: '#demoCascader1',
data: [],
filterable: true,
reqSearch: function (keyword, callback, dataList) {
// keyword是搜索的關鍵字，dataList是當前的全部數據集合
$.get('xxx.json', { keyword: keyword }, function(res){
callback(res);
},'json')
}
});
});
</script>
```
搜索后端接口返回的數據格式為:
```json
[
{"value": "1,2", "label": "北京 / 王府井"},
{"value": "1,3", "label": "北京 / 故宮"}
]
```
如果要標記關鍵字為紅色：`<span class=\"search-keyword\">北京</span> / 王府井`
## 6.3.5.省市區級聯選擇 :id=city
```html
<input id="demoCascader1" placeholder="請選擇" class="layui-hide"/>
<script type="text/javascript" src="/assets/module/cascader/citys-data.js"></script>
<script>
layui.use(['cascader'], function () {
var $ = layui.jquery;
var cascader = layui.cascader;
cascader.render({
elem: '#demoCascader1',
data: citysData,
itemHeight: '250px',
filterable: true
});
});
</script>
```
省市區的數據已經封裝好了，只需要引入數據的js即可，項目里面的數據value是區號，如果你的數據庫直接存中文，可以使用下面的數據：
[citys-data.js](http://whvse.gitee.io/html-test/file/citys-data.js) 未壓縮(311kb)、[citys-data.min.js](http://whvse.gitee.io/html-test/file/citys-data.min.js) 壓縮(136kb)。
如果想去掉區域，只顯示省和市，可以用js處理一下數據：
```javascript
// 去掉第三級的數據
for (var i = 0; i < citysData.length; i++) {
for (var j = 0; j < citysData[i].children.length; j++) {
delete citysData[i].children[j].children;
}
}
cascader.render({
elem: '#demoCascader11',
data: citysData
});
```
如果一個頁面同時有省市和省市區選擇，去掉第三級的時候應該克隆一下數據：
```javascript
var citysData2 = admin.util.deepClone(citysData);
for (var i = 0; i < citysData2.length; i++) {
for (var j = 0; j < citysData2[i].children.length; j++) {
delete citysData2[i].children[j].children;
}
}
cascader.render({
elem: '#demoCascader11',
data: citysData2
});
```
## 6.3.6.全部方法 :id=method
```html
<input id="demoCascader1" placeholder="請選擇" class="layui-hide"/>
<script>
layui.use(['cascader'], function () {
var $ = layui.jquery;
var cascader = layui.cascader;
var ins1 = cascader.render({
elem: '#demoCascader1',
data: []
});
ins1.data; // 獲取當前的數據
ins1.open(); // 展開
ins1.hide(); // 關閉
ins1.removeLoading(); // 移除加載中的狀態
ins1.setDisabled(true); // 禁用或取消禁用
ins1.getValue(); // 獲取選中的數據值
ins1.getLabel(); // 選取選中的數據名稱
ins1.setValue('1,2'); // 設置值
});
</script>
```
## 6.3.7.全部參數 :id=options
參數名稱 | 介紹 | 默認值
--- | --- | ---
elem | 需要渲染的元素 |
data | 數據 |
clearable | 是否開啟清除 | true
clearAllActive | 清除時清除所有列選中 | false
trigger | 次級菜單觸發方式，可選'hover' | 'click'
disabled | 是否禁用 | false
changeOnSelect | 是否點擊每一項都改變值 | false
filterable | 是否開啟搜索功能 | false
notFoundText | 搜索為空是提示文字 | '沒有匹配數據'
itemHeight | 下拉列表的高度 | '180px'
reqData(values, callback, data) | 異步獲取數據的方法 |
reqSearch(keyword, callback, dataList) | 自定義搜索的方法 |
renderFormat(labels, values) | 選擇后用于展示的函數 |
onChange(values, data) | 數據選擇改變的回調 |
onVisibleChange(isShow) | 展開和關閉的回調 |
