📄 checkbox_webfxtreeitem_ex.js
字号:
/* * Sub class that adds a check box in front of the tree item icon * * Created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik) * * Disclaimer: This is not any official WebFX component. It was created due to * demand and is just a quick and dirty implementation. If you are * interested in this functionality the contact us * http://webfx.eae.net/contact.html * * Notice that you'll need to add a css rule the sets the size of the input box. * Something like this will do fairly good in both Moz and IE * * input.tree-check-box {
* width: auto;
* margin: 0;
* padding: 0;
* height: 14px;
* vertical-align: middle;
* } * */ /* * updated history author zww * * method : Constructor * function : added id property, make id set by youself * upDate : 2004-7-15 * * method : WebFXCheckBoxTreeItem.prototype.toString : * function : added hasCheckBox switch for tree * upDate : 2004-7-15 * * method : WebFXCheckBoxTreeItem.prototype.setCheckedAll : * WebFXCheckBoxTreeItem.prototype.setCheckedChildren : * function : once this onclick, setCheckedAll happened and its children.checked equals this.checked * upDate : 2004-7-15 * * method : WebFXCheckBoxTreeItem.prototype.hasCheckedAll : * WebFXCheckBoxTreeItem.prototype.hasCheckedChildren : * function : if there is node checked in sub tree whose root is this, return true; else return false * upDate : 2004-7-15 * * method : WebFXCheckBoxTreeItem.prototype.setExpand : * WebFXCheckBoxTreeItem.prototype.setExpandChildren : * function : if this.children.checked , this.expand() * upDate : 2004-7-15 * */var WebFXCheckBoxTreeConfig = { autoExpand : true};/* * WebFXTreeCheckBoxTree class */function WebFXCheckBoxTree(sText, sId, sAction, sTarget, hasCheckBox, bChecked, checkBoxName, hasCheck, sBehavior, sIcon, sOpenIcon) { this.base = WebFXTree; this.base(sText, sId, sAction, sTarget, sBehavior, sIcon, sOpenIcon); this._hasCheckBox = hasCheckBox || false; this._checked = bChecked || false; this._checkBoxName = checkBoxName || "webFXCheckbox";} WebFXCheckBoxTree.prototype = new WebFXTree;WebFXCheckBoxTree.prototype.expand = function() { this.doExpand(); if(WebFXCheckBoxTreeConfig.autoExpand) { for (var i = 0; i < this.childNodes.length; i++) { this.childNodes[i].setExpand(); } }}WebFXTree.prototype.toString = function() { var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">"; // insert check box if(this._hasCheckBox) { str += "<input type=\"checkbox\"" + " name=\"" + this._checkBoxName + "\"" + " value=\"" + this.text + "\"" + " class=\"tree-check-box\"" + (this._checked ? " checked=\"checked\"" : "") + //" onclick=\"webFXTreeHandler.all[this.parentNode.id].setCheckedAll(this.checked)\"" + " />"; } // end insert checkbox str += "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\">" + "<span id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\"" + (this.target ? " target=\"" + this.target + "\"" : "") + ">" + this.text + "</span></div>" + "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">"; var sb = []; for (var i = 0; i < this.childNodes.length; i++) { sb[i] = this.childNodes[i].toString(i, this.childNodes.length); } this.rendered = true; return str + sb.join("") + "</div>";};/* * WebFXCheckBoxTreeItem class */function WebFXCheckBoxTreeItem(sText, sId, sAction, sTarget, hasCheckBox, bChecked, checkBoxName, eParent, sIcon, sOpenIcon) { this.base = WebFXTreeItem; this.base(sText, sId, sAction, sTarget, eParent, sIcon, sOpenIcon); this._hasCheckBox = hasCheckBox || false; this._checked = bChecked || false; this._checkBoxName = checkBoxName || "webFXCheckbox";}WebFXCheckBoxTreeItem.prototype = new WebFXTreeItem;//edited 2004-7-15 by zww//can get treeItem with checkbox use idWebFXCheckBoxTreeItem.prototype.toString = function (nItem, nItemCount) { var foo = this.parentNode; var indent = ''; if (nItem + 1 == nItemCount) { this.parentNode._last = true; } var i = 0; while (foo.parentNode) { foo = foo.parentNode; indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent; i++; } this._level = i; if (this.childNodes.length) { this.folder = 1; } else { this.open = false; } if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) { if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; } if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; } } else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; } var label = this.text.replace(/</g, '<').replace(/>/g, '>'); var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">"; str += indent; str += "<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">" // insert check box if(this._hasCheckBox) { str += "<input type=\"checkbox\"" + " name=\"" + this._checkBoxName + "\"" + " value=\"" + this.text + "\"" + " class=\"tree-check-box\"" + (this._checked ? " checked=\"checked\"" : "") + //" onclick=\"webFXTreeHandler.all[this.parentNode.id].setCheckedAll(this.checked)\"" + " />"; } // end insert checkbox str += "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\"><span target=\"" + this.target + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\">" + label + "</span></div>"; str += "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">"; for (var i = 0; i < this.childNodes.length; i++) { str += this.childNodes[i].toString(i,this.childNodes.length); } str += "</div>"; this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon); this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon); return str;}WebFXCheckBoxTreeItem.prototype.getChecked = function () { var divEl = document.getElementById(this.id); var inputEl = divEl.getElementsByTagName("INPUT")[0]; return this._checked = inputEl.checked;};WebFXCheckBoxTreeItem.prototype.setChecked = function (bChecked) { if (bChecked != this.getChecked()) { var divEl = document.getElementById(this.id); var inputEl = divEl.getElementsByTagName("INPUT")[0]; this._checked = inputEl.checked = bChecked; if (typeof this.onchange == "function") this.onchange(); }};//added bu zww 2004-7-14 //once this onclick, setCheckedAll happened and its children.checked equals this.checked WebFXCheckBoxTreeItem.prototype.setCheckedAll = function (bChecked) { this.expandAll(); this.setChecked(bChecked); this.setCheckedChildren(bChecked); };WebFXCheckBoxTreeItem.prototype.setCheckedChildren = function (bChecked) { for (var i = 0; i < this.childNodes.length; i++) { this.childNodes[i].setCheckedAll(bChecked); } };//added bu zww 2004-7-14 //if there is node checked in sub tree whose root is this, return true; else return falseWebFXCheckBoxTreeItem.prototype.hasCheckedAll = function () { if(this.hasCheckedChildren()) { return true; } if(this._checked) { return true; }};WebFXCheckBoxTreeItem.prototype.hasCheckedChildren = function () { for (var i = 0; i < this.childNodes.length; i++) { this.childNodes[i].setCheckedAll(); } };//added bu zww 2004-7-14 //if this.children.checked , this.expand(); WebFXCheckBoxTreeItem.prototype.setExpand = function () { //this.expandAll(); if(this.setExpandChildren()) { this.expand(); return true; } if(this._checked) { return true; } };WebFXCheckBoxTreeItem.prototype.setExpandChildren = function () { var isChecked = false; for (var i = 0; i < this.childNodes.length; i++) { if(this.childNodes[i].setExpand()) { isChecked = true; } } return isChecked;};
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -