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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。