EasyUI combotree扩展支持自定义idField和textField

程序员文章站 2022-05-18 20:49:53

...

combotreeExtend.js

$.fn.tree.defaults.loadFilter = function(data, parent) {
	var options = $(this).data().tree.options;
	var idField = options.idField || 'id',
	textField = options.textField || 'text',
	iconField = options.iconField || 'iconCls',

	attributes = options.attributes || [];

	var transform = function(node) {
		if (!node['id'] && node[idField]) 
			node['id'] = node[idField];
		if (!node['text'] && node[textField]) 
			node['text'] = node[textField];
		if (!node['iconCls'] && node[iconField]) 
			node['iconCls'] = node[iconField];
	
		if (attributes && $.isArray(attributes)) {
			if (!node['attributes']) {
				node['attributes'] = {};
			}

			for (var i = 0; i < attributes.length; i++) {
				node['attributes'][attributes[i]] = node[attributes[i]];
			}
		}

		if (node['children']) {
			for (var i = 0; i < node['children'].length; i++) {
				transform(node['children'][i]);
			}
		}
	}

	for (var i = 0; i < data.length; i++) {
		transform(data[i]);
	}

	return data;
}

$.fn.combotree.defaults.loadFilter = $.fn.tree.defaults.loadFilter;

demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="./css/easyui.css">
<link rel="stylesheet" type="text/css" href="./css/icon.css">
<link rel="stylesheet" type="text/css" href="./css/demo.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./js/comboTreeExtend.js"></script>
</head>
<body>
<h2>Basic ComboTree</h2>
<p>
	Click the right arrow button to show the tree panel.
</p>
<div style="margin:20px 0">
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
	<div style="margin-bottom:20px">
		<input class="easyui-combotree" id="combotree" style="width:100%">
	</div>
</div>
<script type="text/javascript">
	var jsondata=[{
	"code":1,
	"name":"My Documents",
	"children":[{
		"code":11,
		"name":"Photos",
		"state":"closed",
		"children":[{
			"code":111,
			"name":"Friend"
		},{
			"code":112,
			"name":"Wife"
		},{
			"code":113,
			"name":"Company"
		}]
	},{
		"code":12,
		"name":"Program Files",
		"children":[{
			"code":121,
			"name":"Intel"
		},{
			"code":122,
			"name":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"code":123,
			"name":"Microsoft Office"
		},{
			"code":124,
			"name":"Games",
			"checked":true
		}]
	},{
		"code":13,
		"name":"index.html"
	},{
		"code":14,
		"name":"about.html"
	},{
		"code":15,
		"name":"welcome.html"
	}]
}];
	$(function() {
		$("#combotree").combotree({
			method: 'get',
			data: jsondata,
			idField: 'code',
			textField: 'name'
		});
	});
	</script>
</body>
</html>

demo下载