当前位置: 首页 > 工具软件 > xm-select > 使用案例 >

xm-select树形下拉框渲染,取值,赋值

那绪
2023-12-01
//下拉树渲染
<div id="demo3" class="xm-select-demo" style="width: 300px;"></div>
						<script>
							var demo3 = xmSelect.render({
								el: '#demo3', 
								model: { label: { type: 'text' } },
								radio: true,
								clickClose: true,
								tree: {
									show: true,
									strict: false,
									expandedKeys: [ -1 ],
								},
								height: 'auto',
								data:[]
							})
							$.ajax({
							  type: 'get',
							  url: 'json/tree.json', //请求数据的地址
							  dataType: "json", //返回数据形式为json
							  success: function(param) {
									function filter(data, pid) {
								 	var treedata = [];
								 	var temp;
								 	for (var i = 0; i < data.length; i++) {
								 		if (data[i].pid == pid) {
								 			var obj = data[i];
								 			temp = filter(data, data[i].id);
								 			if (temp.length > 0) {
								 				obj.children = temp;
								 				obj.name = data[i].oname
												obj.value=data[i].id
								 			}
								 			obj.name = data[i].oname
											obj.value=data[i].id
								 			treedata.push(obj);
								 		}
								 	}
								 	return treedata;
								 }
									var res = filter(param, 0);
										demo3.update({
											data: res,
											autoRow: true,
										})
							},
							})



json数据格式
[
	{
		"id":1,
		"pid":0,
		"oname":"网服"
	},
	{
		"id":2,
		"pid":1,
		"oname":"广州分公司"
	},
	{
		"id":3,
		"pid":2,
		"oname":"前端"
	},
	{
		"id":4,
		"pid":1,
		"oname":"后端"
	}
]
//取值
demo3.getValue("value")  //[2]
demo3.getValue("valustr")  //2
demo3.getValue("name")  //["广州分公司"]
demo3.getValue("nameStr")  //广州分公司




//赋值
var value1 = {
	name: text,//text是取到的name值
    value: fid//fid是取到的value值
}

demo3.setValue([value1])

 类似资料: