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>
2743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
