📄 treecheck.html
字号:
<!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>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -