Mui级联组件从后台获取数据

最新推荐文章于 2021-12-01 10:36:12 发布

原创

最新推荐文章于 2021-12-01 10:36:12 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#mui #级联 #从后台获取数据

本文介绍如何在开发中利用Mui组件库创建3级级联选择器，并从后台获取数据。通过调整后台返回的JSON数据格式，使其符合Mui组件的要求，然后使用setData方法更新组件数据。在实现过程中，确保引入必要的JS文件。

开发中用到picker组件，3级级联。选择省市县。
参考Mui官方文档，做些修改即可实现功能。
官方的数据是写死的，如果想从后台那数据的话，要让后台把数据改成这种样式的Json数据。

[{
	"value": "110000",
	"text": "北京市",
	children: [{
		"value": "110100",
		"text": "北京市",
		children: [{
			"value": "110101",
			"text": "东城区"
		}, {
			value: "110102",
			text: "西城区"
		}]
	}]
}]

然后我们就可以直接用setData方法调用了。
注意要引用这两个js文件，在Hello Mui里有。

	<script src="mui.picker.js"></script>
	<script src="mui.poppicker.js"></script>

代码：

$.plusReady(function() {
			//ajax向后台请求数据 官方有详细文档。
			mui.ajax({
					dataType:'json',
					type:'get',
					url :'这里填你的后台数据地址',
					success: succFunction,//请求成功的回调函数；
					error: function(xhr,type,errorThrown){
						console.log(type);
					}
				});
				
				//回调函数执行的操作
				function succFunction(data){
					
			//参考Hello Mui里的picker组件 这是为了避免第三级数据为空。
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};
			var cityPicker3