ztree 使用基礎的整理
問題的演進過程
1 控件文本化
1.1 控件文本化
(function () {
window.node = new function () {
/**
* 將數據移入節點.
* @param treeNode 當前操做的是哪一個節點.
* @param node 操做節點須要追加到哪一個位置上.
* @param id html id名稱.
* @param operation 須要追加的操做, 是個數組.
* @returns {boolean}
* @private
*/
this.__addHoverDom = function (treeNode, node, id, operation) {
if (!$.isArray(operation)) {
return false;
}
for (var i = 0; i < operation.length; i++) {
if ($("#" + id + i + "_" + treeNode.id).length > 0) return;
}
var tmp = [];
for (var i = 0; i < operation.length; i++) {
tmp.push("<a id='" + id + i + "_" + treeNode.id + "'style='margin:0 0 0 5px;'>" + operation[i] + "</a>");
}
node.append(tmp.join(''));
}
/**
* 將鼠標移除節點.
* @param treeNode
* @param node
* @param id
* @param operation
* @returns {boolean}
* @private
*/
this.__removeHoverDom = function (treeNode, node, id, operation) {
if (!$.isArray(operation)) {
return false;
}
for (var i = 0; i < operation.length; i++) {
$("#" + id + i + "_" + treeNode.id).unbind().remove();
}
}
/**
* 給節點上綁定事件.
* @param id
* @param node
* @param treeNode
* @param operation
* @param eventType
* @param callback
* @returns {boolean}
* @private
*/
this.__bindEvent = function (id, node, treeNode, operation, eventType, callback) {
var index = $.inArray(node, operation);
if (-1 === index) {
return false;
}
var btn = $("#" + id + index + "_" + treeNode.id);
if (btn) btn.unbind(eventType);
if (btn) btn.bind(eventType, [treeNode], callback);
}
}
})();
2 控件圖片化
2.1 控件圖片化
(function () {
// <span class="button icon04" id="diyBtn_12" title="按鈕2" onfocus="this.blur();"></span
window.node_picture = new function () {
/**
* 將數據移入節點.
* @param treeNode 當前操做的是哪一個節點.
* @param node 操做節點須要追加到哪一個位置上.
* @param id html id名稱.
* @param operation 須要追加的操做, 是個數組.
* @returns {boolean}
* @private
*/
this.__addHoverDom = function (treeNode, node, id, operation) {
if (!$.isArray(operation)) {
return false;
}
for (var i = 0; i < operation.length; i++) {
if ($("#" + id + i + "_" + treeNode.id).length > 0) return;
}
var tmp = [];
for (var i = 0; i < operation.length; i++) {
tmp.push("<span class='button "+ operation[i] +"' id='"+id+i+"_"+treeNode.id + "' title='"+operation[i]+ "'></span>");
}
node.append(tmp.join(''));
}
/**
* 將鼠標移除節點.
* @param treeNode
* @param node
* @param id
* @param operation
* @returns {boolean}
* @private
*/
this.__removeHoverDom = function (treeNode, node, id, operation) {
if (!$.isArray(operation)) {
return false;
}
for (var i = 0; i < operation.length; i++) {
$("#" + id + i + "_" + treeNode.id).unbind().remove();
}
}
/**
* 給節點上綁定事件.
* @param id
* @param node
* @param treeNode
* @param operation
* @param eventType
* @param callback
* @returns {boolean}
* @private
*/
this.__bindEvent = function (id, node, treeNode, operation, eventType, callback) {
var index = $.inArray(node, operation);
if (-1 === index) {
return false;
}
var btn = $("#" + id + index + "_" + treeNode.id);
if (btn) btn.unbind(eventType);
if (btn) btn.bind(eventType, [treeNode], callback);
}
}
})();
3 調整顯示問題
3.1 節點上控件的顯示
該問題須要經過CSS來調整處理,不該該將樣式信息寫道js中,避免修改麻煩
<style>
.ztree li span.button.add{
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
}
</style>
4 處理控件的回調函數
+function () {
// 定義全局的變量.
var tree ,treeSelector='#treeDemo'; // 樹節點
var text,textNode,textSelector="#output"
var selected={}; // 選中的節點.
//var operation =['add','edit','remove','download','truncate'];
var operation =['add','edit','remove'];
// 添加節點的時候,
var newCount = 1;
// 添加節點的名稱.
var IDMark_Switch = "_switch",
IDMark_Icon = "_ico",
IDMark_Span = "_span",
IDMark_Input = "_input",
IDMark_Check = "_check",
IDMark_Edit = "_edit",
IDMark_Remove = "_remove",
IDMark_Ul = "_ul",
IDMark_A = "_a";
// 建立一個鏈表.
var createLinkList = function () {
var _this = {}, first = null;
_this.add = function (id, parent) {
first = {id: id, parent: parent, next: first || null}; //這句比較重要
};
_this.show = function (fn) {
var str = [];
for (temp = first; temp; temp = temp.next) {
str.push(temp.id + '<-' + temp.parent);
}
fn(str.join(','));
};
return _this;
}
var zNodes = [
{
id: 1, pId: 0, name: "hover事件顯示控件", open: true,
children: [
{id: 11, pId: 1, name: "按鈕1"},
{id: 12, pId: 1, name: "按鈕2"},
{id: 13, pId: 1, name: "下拉框"},
{id: 141, pId: 1, name: "文本1"},
{id: 142, pId: 1, name: "文本2"},
{id: 15, pId: 1, name: "超連接"}
]
}];
// 初始化節點
function init()
{
// 處理事件綁定, 資源查找.
textNode = $(textSelector);
}
function get() {
// 處理選中的節點,
// 處理選中的聯動的節點,
}
function set(sets) {
// 設置數據的回顯處理,
}
function reset() {
// 重置全局變量.
}
function select() {
//
}
/**
* 鼠標移入後
*/
function addHoverDom(treeId,treeNode) {
if (treeNode.parentNode && treeNode.parentNode.id != 1) return;
{
var aObj = $("#" + treeNode.tId + IDMark_A);
window.node_picture.__addHoverDom(treeNode, aObj, 'diyBtn', operation);
}
//在父節點上追加特殊.
if(treeNode.pId ===0 )
{
var obj = $("#"+treeNode.tId+IDMark_A);
if ($("#diyBtn6_" + treeNode.id).length > 0) return;
if ($("#diyBtn7_" + treeNode.id).length > 0) return;
var appStr = "<a id='diyBtn6_" + treeNode.id + "'style='margin:0 0 0 5px;'>查看選中</a>" +
"<a id='diyBtn7_" + treeNode.id + "'style='margin:0 0 0 5px;'>預留</a>";
aObj.append(appStr);
}
/**
* 添加節點的回調函數.
* @param event
* @returns {boolean}
*/
function addEvent(event) {
var treeNode = event.data[0];
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
return false;
}
/**
* 編輯節點的回調函數.
* @param event
* @returns {boolean}
*/
function editEvent(event) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var treeNode = event.data[0];
zTree.selectNode(treeNode);
setTimeout(function () {
if (confirm("進入節點 -- " + treeNode.name + " 的編輯狀態嗎?")) {
setTimeout(function () {
zTree.editName(treeNode);
}, 0);
}
}, 0);
return false;
}
/**
* 移除子節點.
* @param event
* @returns {boolean}
*/
function removeEvent(event){
var treeNode = event.data[0];
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree.getSelectedNodes();
//console.log(treeNode);
// 單選刪除,
// data.keep.parent = true 時會保留父節點
zTree.removeChildNodes(treeNode); //測試成功
//zTree.removeNode(treeNode,false); //測試成功, 從父節點開始進行刪除操做.
// 多選刪除, 須要配合checkbox進行
return false;
}
var nodeList = new createLinkList();
/**
* 下載選中的節點.
* @param event
*/
function downloadEvent(event){
var treeNode = event.data[0];
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree.getSelectedNodes();
if (nodes.length < 1) return;
$.each(nodes, function (i, n) {
var id = n.id;
var parentid = n.pId;
nodeList.add(id, parentid);
});
nodeList.show(function (obj) {
alert(obj);
})
}
var truncateList = new createLinkList();
/**
* 清空節點.
* @param event
*/
function truncateEvent(event){
var treeNode = event.data[0];
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeNode.children;
if (typeof nodes === 'undefined') return;
// 判斷是否只有子節點
$.each(nodes, function (i, n) {
var id = n.id;
var parent = n.pId;
truncateList.add(id, parent);
});
zTree.removeChildNodes(treeNode);
truncateList.show(function (obj) {
alert(obj);
})
}
window.node_picture.__bindEvent('diyBtn','add',treeNode,operation,'click',addEvent);
window.node_picture.__bindEvent('diyBtn','edit',treeNode,operation,'click',editEvent);
window.node_picture.__bindEvent('diyBtn','remove',treeNode,operation,'click',removeEvent);
window.node_picture.__bindEvent('diyBtn','download',treeNode,operation,'click',downloadEvent);
window.node_picture.__bindEvent('diyBtn','truncate',treeNode,operation,'click',truncateEvent);
var see_selected_btn = $("#diyBtn6_"+treeNode.id);
if(see_selected_btn)
{
see_selected_btn.remove('click').bind('click',function(event){alert("測試給父節點上增長特殊的處理能力");});
}
}
/**
* 鼠標移除.
*/
function removeHoverDom(treeId,treeNode) {
//if (treeNode.parentTId && treeNode.getParentNode().id != 1) return;
window.node_picture.__removeHoverDom(treeNode, '', 'diyBtn', operation);
}
function initTreeUI(znode,async)
{
var setting = {
async: {
enable: async?true:false,
url:'index.php',
autoParam:["id", "checked", "chkDisabled"],
dataFilter : function(tid, node, data) {
if (data) {
var id, nodes, list = [];
for(var i in data) {
id = data[i].id;
nodes = tree.getNodesByParam("id", id, node);
if (nodes.length > 0) {
//list.push(nodes[0]);
} else {
list.push(data[i]);
}
}
}
return list;
}
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom
},
data: {
keep: {
parent: false
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {Y:"", N:""},
chkDisabled : true
},
callback : {
onAsyncSuccess : function(evt, tid, node, msg) {
return true;
},
onCheck : function(evt, tid, node) {
if (node.checked)
{
textNode.val('');
textNode.val(JSON.stringify(node));
selected[node.id] = {'id':node.id,'name':node.name};
}else{
textNode.val('');
delete selected[node.id];
}
console.log(selected);
},
beforeClick : function(tid, node, flag) {
return true;
},
onClick : function(evt, tid, node, flag) {
console.log("數據的聯動點");
},
onCollapse : function(evt, tid, node) {
return true;
},
beforeExpand : function(tid, node) {
return true;
},
onExpand : function(evt, tid, node) {
return true;
}
}
};
if (null !== zNodes && !$.isArray(zNodes)) {
zNodes = [];
}
tree = $.fn.zTree.init($(treeSelector), setting, zNodes);
}
// 命名空間的處理, 將樹上的接口進行暴露處理,
window.tree = {
init: function(){
init();
},
get:function(){},
set:function(sets){},
reset:function(){},
select : function(){},
active: function(){},
initTreeUI:function()
{
initTreeUI(zNodes,false);
}
};
}();
使用過程
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定義的操做</title>
<link rel="stylesheet" href="css/demo.css"/>
<link rel="stylesheet" href="css/zTreeStyle.css"/>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.all.min.js"></script>
<!--<script src='./js/node.js'></script>-->
<script src='js/tree.js'></script>
<script src="js/node__picture.js"></script>
<style>
.ztree li span.button.add{
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
}
</style>
<script>
$(document).ready(
function(){
tree.init();
tree.initTreeUI();
}
)
</script>
<style>
ul.ztree {
width: 500px;
}
</style>
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div>
<textarea id="output" style="width: 500px;height: 200px;margin-top: 25px;"></textarea>
</div>
<!--
1 文本化
2 圖片化
3 調整顯示問題,
4 處理回調函數的問題.
5 總結
-->
</body>
</html>