easyui解析树形

时间 2019-11-19

标签 easyui 解析繁體版

原文原文链接

EASYUI解析treejavascript

1.首先须要导入须要的js以及css文件

在头部<head>中导入css

<link rel="stylesheet" type="text/css" href="../easyui/easyui.css">
	<link rel="stylesheet" type="text/css" href="../easyui/icon.css">
	<script type="text/javascript" src="../easyui/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

1.1示例在body中加入

<!--easyui-->
<div class="easyui-panel" style="padding:5px">
		<ul class="easyui-tree">
			<li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'closed'">
						<span>Photos</span>
						<ul>
							<li>
								<span>Friend</span>
							</li>
							<li>
								<span>Wife</span>
							</li>
							<li>
								<span>Company</span>
							</li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li>Intel</li>
							<li>Java</li>
							<li>Microsoft Office</li>
							<li>Games</li>
						</ul>
					</li>
					<li>index.html</li>
					<li>about.html</li>
					<li>welcome.html</li>
				</ul>
			</li>
		</ul>
	</div>

此时能够运行查看是否显示正常html

1.2给出javascript中树形结构，做参考

<select>
    <optgroup label="人力资源部">
        <option>小花</option>
        <option>小梅</option>
    </optgroup>
    <optgroup label="研发部">
        <option>小明</option>
        <option>发仔</option>
    </optgroup>
	<option>test</option>
</select>

2.项目中经常使用配合jquery解析树形

<input id="materialTypeCode2" name="materialTypeCode" type="text" value="" />

<!--末尾加入script-->
<script>

	$("#materialTypeCode2").combotree({
		url: 'tree_data.json',
		onBeforeSelect: function(node) {
            if (!$(this).tree('isLeaf', node.target)) {
                return false;
            }
        },
        onClick: function(node) {
            if (!$(this).tree('isLeaf', node.target)) {
                $("#materialTypeCode2").combo('showPanel');
            }
        },
        onLoadSuccess:function(node){
        	$("#materialTypeCode2").combotree('tree').tree("collapseAll");
        }	   
	});	

</script>

onBeforeSelect：点击以前加载事件java

onClick：点击事件node

onLoadSuccess：点击完成后事件jquery

.tree('isLeaf', node.target)：是否叶节点json