treecheck.html

来自「javascript ext1.X源码,主要用于界面」· HTML 代码 · 共 103 行

HTML
103 行
字号 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">

<head>
	<title>Tree with Checkbox Nodes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="extjs-1.0/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="extjs-1.0/examples.css" />
	<script type="text/javascript" src="extjs-1.0/adapter/yui/yui-utilities.js"></script>
	<script type="text/javascript" src="extjs-1.0/adapter/yui/ext-yui-adapter.js"></script>
	<script type="text/javascript" src="extjs-1.0/ext-all.js"></script>

	<script type="text/javascript" src="TreeCheckNode.js"></script>
	<link rel="stylesheet" type="text/css" href="TreeCheckNode.css" />
	
<script type="text/javascript"><!--
Ext.BLANK_IMAGE_URL = "extjs-1.0/resources/images/default/s.gif";
Ext.EventManager.onDocumentReady(function() {
	tree = new Ext.tree.TreePanel('tree-div', {
		animate:true,
		loader: new Ext.tree.CustomUITreeLoader({
			dataUrl:'treesample.json',
			baseAttr: {
				uiProvider: Ext.tree.CheckboxNodeUI
			}
		}),
		enableDD:false,
		containerScroll: true,
		rootUIProvider: Ext.tree.CheckboxNodeUI,
		selModel:new Ext.tree.CheckNodeMultiSelectionModel(),
		rootVisible:false
	});
	
	tree.on('check', function() {
		Ext.get('cn').dom.value = this.getChecked().join(',');
	}, tree);

	// set the root node
	root = new Ext.tree.AsyncTreeNode({
		text: 'root',
		draggable:false,
		id:'source',
		uiProvider: Ext.tree.CheckboxNodeUI
	});
	tree.setRootNode(root);

	// render the tree
	tree.render();
	root.expand(false, false, function() {
		root.firstChild.expand(false);
		Ext.get('cn').dom.value = tree.getChecked().join(',');
		ser();
	});
	
	Ext.get('exp').on('click', function() {
		tree.expandAll();
	});
	
	Ext.get('coll').on('click', function() {
		tree.collapseAll();
	});
	
	Ext.get('ser').on('click', ser);
});

ser = function() {
	var c = Ext.get('c');
	c.dom.style.display='block';
	c.dom.firstChild.innerHTML = tree.getChecked();
};


//--></script>
<style>
	#c {
		display:none;
	}
</style>
</head>
<body scroll="no">
	<p>
	<b>Tree with CheckBox nodes</b><br />
	An extension for Ext.tree.TreeNodeUI to allow nodes to be 'checked'.  Based on forum discussion and samples.   Includes basic (read: crude) serialization to retrieve all of the checked nodes.  It also extends Ext.tree.MultiSelectionModel to allow multiple nodes to be selected and then checked by pressing the space bar.  Checks cascade, so checking a child will check parents up the tree, and clearing a parent checkbox will clear all of it's children.
	</p>
	<p>
	Additional changes include allowing CTRL+click to deselect a selected node and shift+click to select a contiguous range of nodes.  Shift+Click only works with nodes at the same depth beneath the same parent.  You can click Blue and shift+click on Orange to select both nodes and everything between, but you cannot shift+click Horse and Red.
	<p>
	For more information see <a href="TreeCheckNode.js">TreeCheckNode.js</a> and <a href="TreeCheckNode.css">TreeCheckNode.css</a>
	</p>

	<input type="button" id="exp" value="Expand All Nodes" />
	<input type="button" id="coll" value="Collapse All Nodes" />
	<input type="button" id="ser" value="Serialize Checked Nodes" />
	<br />
	<div id="c"><pre class="code"></pre></div>
	<b>Checked Nodes: </b> <input type="text" id="cn" value="" size="40" autocomplete="off" /><br />
	<br />
<div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"></div>

</body>

</html>

treecheck.html - 源码说明

本页面展示了「javascript ext1.X源码,主要用于界面」中的 treecheck.html 源码文件，采用 HTML 编程语言编写，共 103 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?