# 快速使用 ## 6.3.1.快速使用 ~~~ <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: '王府井' }] }] }); // 请求远程数据 cascader.render({ elem: '#demoCascader1', reqData: function (values, callback, data) { $.get('xxxx.json', function(res){ callback(res.data); // 数据请求完成通过callback回调 },'json'); } }); // 处理数据格式，如果你的数据没有value、label字段可以前端处理 cascader.render({ elem: '#demoCascader1', reqData: function (values, callback, data) { $.get('xxxx.json', function(res){ function each(data) { for (var i = 0; i < data.length; i++) { data[i].value = data[i].id; data[i].label = data[i].name; if (data[i].children) { each(data[i].children); } } } each(res.data); callback(res.data); },'json'); } }); // 如果你的数据不是children形式，可以前端转换 cascader.render({ elem: '#demoCascader1', reqData: function (values, callback, data) { $.get('xxxx.json', function(res){ callback(pidToChildren(res.data, 'id', 'pid', 0)); },'json'); } }); /* pid转children形式 */ function pidToChildren(data, idName, pidName, childName, pId) { if (!childName) childName = 'children'; var newList = []; for (var i = 0; i < data.length; i++) { if (data[i][idName] == data[i][pidName]) return; if (pId === undefined) pId = 0; if (data[i][pidName] == pId) { var children = pidToChildren(data, idName, pidName, childName, data[i][idName]); if (children.length > 0) data[i][childName] = children; newList.push(data[i]); } } return newList; } }); </script> ~~~