ztree鼠标点击/展开/选中/复选的例子

1、根据treeId展开指定节点并触发单击事件

ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点
ztree.selectNode(ztree.getNodeByParam("id",treeId,null));//选中指定节点
ztree.setting.callback.onClick(null, ztree.setting.treeId, ztree.getNodeByParam("id",treeId,null));//触发函数

2、默认选中指定节点并执行事件

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getNodeByParam("id", "370000");
treeObj.selectNode(node);
setting.callback.onClick = onClick;

3、初使化所有被选中的节点

//初使化所有被选中的节点
        function initChecked(){
                var zTree = $.fn.zTree.getZTreeObj("resTree");
                var orgId = $("#orgId").val();
                if(orgId!=null && orgId !=''){
                    var node = zTree.getNodeByParam("orgId", orgId, null);   //得到选中节点
                    zTree.checkNode(node, true, true);     <span style="white-space:pre">         </span> //显示选中节点
                    zTree.selectNode(node);<span style="white-space:pre">                    </span> //打开选中节点的父节点
                }
        }

4、选中,展开指定节点

$.fn.zTree.init($("#tree-div"), setting, zNodes);
        
$("#tree-div").parent().parent().parent().css("overflow-x","hidden");
        
var ids = $("#ids").val();
if(ids.trim()!=""){
         var tree = $.fn.zTree.getZTreeObj("tree-div");
        var strs = ids.split(",");
        for(var j=0;j<strs.length;j++){
            var node = tree.getNodeByParam("id",strs[j]);
            var parent = node.getParentNode();
            if(!parent.open){
               tree.expandNode(parent,true,true);
            }
            tree.checkNode(node , true,true);
        }
 }

5、ztree动态添加节点

当弹出ztree树的时候,是这样的:IT分享这个时候点击新增按钮,会弹出一个隐藏的框框,添加完信息后,把新添加的节点添加到ztree树中。
可是在调用addNodes方法的时候会出现节点添加两次的现象,大家在网上可能会找到很多有关ztree添加节点重复的问题,这个我就不提了。
现在给出不一样的解决方案,我们首先知道,为什么会出现重复添加的问题。
原因在于:我们异步加载了一次,然后再addNodes 这样就添加了两个节点。(这里如果我们调用展开节点方法,expendNode 这个方法貌似是不好使的,我也没搞清楚这是为什么,当我们调用reAsyncChildNodes方法的时候会自动展开树)
所以本人就不去调用addNodes方法了,这样就不会出现重复添加的问题了,但是怎么才能把添加的节点自动勾选上呢?
这个真是个问题,所以采用后台添加的方式:

async:{
            autoParam:["id"],
            enable:true,
            url : getUrl
        }

在ztree的属性中添加这个,其中的getUrl为自己定义的一步方法的url。
这里先提供自身在弹出页面填写后ajax返回的操作方法:

if($("#customerForm").valid()){
        $('#customerForm').ajaxSubmit({
            type:"post",
            dataType: "json",
            async : false,
            url: '${ctx}/system/cusCustomerInfo/saveAndReturnJSON.action',
            success: function(data){
                var oldNode = zTreeObj.getNodeByParam("id",$("#customerId").val());
                if(oldNode){
                    oldNode.checked = false;
                    zTreeObj.updateNode(oldNode);
                }
                $("#customerId").val(data.id);
                var node = zTreeObj.getNodeByParam("id",data.companyProfession);
                node.isParent = true;
                zTreeObj.reAsyncChildNodes(node, "refresh");
                closeAddDiv();
            }
        });
    }else{
        $.watermark.showAll();
    }
这里会看见, $("#customerId").val(data.id); 这个赋值就个为了下方  zTreeObj.reAsyncChildNodes(node, "refresh");刷新的时候调用一步方法的url的参数。
function getUrl(treeId,treeNode){
    var idsStr = pId == '1' ? $("#customerId").val() : $("#partcId").val();
    return "${ctx}/system/cusContactInfo/toSetCustomerToContact.action?idsStr="+idsStr;
红色字体就是自动选中的隐藏域id。
这时在后台遍历添加上checked=true就ok了。}

6、zTree自动点击第一个节点

var setting = {
            view: {
                dblClickExpand: true,//双击展开
                showLayer: false,
                selectedMulti: false,//是否允许多选
                showIcon: showIconForTree//显示节点小图标
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: "0"
                }
            },
            callback: {
                beforeClick: beforeClick,
                onClick: onClick
            }
        };
        //加载当前项目的树形结构信息列表
        function loadStructureInfoTreeJson(projectId) {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "../Tools/StructureModel.ashx",
                data: { act: "LoadModelTreeByProjectid",
                    pid: projectId
                },
                success: function (data) {
                    if (data.length == 0) {
                    } else {
                        $.fn.zTree.init($("#tree"), setting, data);
                        var zTree = $.fn.zTree.getZTreeObj("tree");//获取ztree对象
                        var node = zTree.getNodeByParam('id', 1);//获取id为1的点
                        zTree.selectNode(node);//选择点
                        zTree.setting.callback.onClick(null, zTree.setting.treeId, node);//调用事件
                    }
                },
                error: function () {
                    alert("载入树形结构出现问题!");
                }
            });
        }
        function showIconForTree(treeId, treeNode) {
            return treeNode.isParent;//如果是父节点就显示小图标
        };

7、zTree 查找所有的叶子节点

 

// 保存所有叶子节点  10 为初始化大小,并非数组上限
var arrayObj = new Array([10]);
 
/*
  treeNode:
         根节点
  result:
        用于保存叶子节点的数组
*/
// 获取所有叶子节点
function getAllLeafNodes(treeNode, result) {
    if (treeNode.isParent) {
        var childrenNodes = treeNode.children;
        if (childrenNodes) {
            for (var i = 0; i < childrenNodes.length; i++) {
                if (!childrenNodes[i].isParent) {
                    arrayObj.push(childrenNodes[i]);
                } else {
                    arrayObj = getAllLeafNodes(childrenNodes[i], arrayObj);
                }
            }
        }
    } else {
        arrayObj.push(treeNode);
    }
    return arrayObj;
}

8、ztree获取节点,增加节点

 

// 获取树节点
  var treeObj = $.fn.zTree.getZTreeObj("divTreeContainer");
  // 获取树所有的节点
  var nodes = treeObj.getNodes();
 // 通过 tid  获取节点
var node = treeObj.getNodeByTId(node.tId);
 
 // 创建一个节点
 var newNode = { id: 1, name:‘wisdo’‘, filePath: 'http://www.111cn.net'};
 
 // 追加节点
 treeObj.addNodes(parentNode, newNode)

本文来自:http://www.suchso.com/projecteactual/ztree-click-event-checkbox.html

时间: 2024-10-28 09:51:47

ztree鼠标点击/展开/选中/复选的例子的相关文章

JS实现鼠标点击展开或隐藏表格行的方法

 这篇文章主要介绍了JS实现鼠标点击展开或隐藏表格行的方法,实例分析了javascript操作table表格与css样式的技巧,需要的朋友可以参考下     本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

JS实现鼠标点击展开或隐藏表格行的方法_javascript技巧

本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

Extjs改变树节点的勾选状态点击按钮将复选框去掉_extjs

今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态.网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来. 在Extjs3.x和4.x版本中的处理方法是不一样的, 3.x版本中可以这样操作: 复制代码 代码如下: node.attributes.checked=false; node.getUI().toggleCheck(false); 这样就可以取消节点的check状态并且将页面上的勾去掉. 在ExtJs4中的方法如下: 复制代码 代码

动态获取复选框checkbox选中个数的jquery代码_jquery

今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check

js实现鼠标点击文本框自动选中内容的方法_javascript技巧

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click

word2013中怎样设置复选框与正文对齐

  word2013中设置复选框与正文对齐的技巧 设置复选框与正文对齐的步骤如下: 步骤一:我们打开word软件,新建一个文档,如果没有开启开发工具的朋友可以点击菜单栏中的[文件]; 步骤二:点击[文件]后,选择[选项],进入选项对话框,点击在左侧中的[自定义功能区]→[主选项卡]→[开发工具]→点击中间的[添加]→[确定],这样,我们可以在菜单栏有一个[开发工具]的工具; 步骤三:我们先在文档中鼠标点击我们要放置控件的位置,点击菜单栏中的[开发工具],点击旧式工具,选择[复选框]; 步骤四:插

jquery复选框全选/取消示例

 jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态  功能:   a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态   b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 代码如下: /**  * 全选函数  * @param mainId 主复选框id  * @param klass 下属复选框的class  */ function selectAll(mainId,klass){  $(

从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)

(17)查看复选框是否被选中 复选框为: <input type="checkbox" name="yingmingliu"id="yingmingliu" value="yingmingliu"/> jq语法为: $("#yingmingliu").is(':checked') 如果选中,返回true,如果没有被选中,返回false.   查看复选框的值: $("#yingmingl

jquery复选框全选/取消示例_jquery

功能: a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 复制代码 代码如下: /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $("." + klass).each(function(){     if($("#" +