js中,jquery的ztree使用,无复选框,只有单选按钮


在使用ztree功能前,首先需要加入相关的js与css:zTreeStyle.css,jquery.ztree.core-3.5.min.js;

这里只是介绍一点小功能,关于ztree的其他用法可以参照相关的官网

(1)在html中的代码如下,代码如下所示:

<input class="form-control formValue" id="className" type="text" data-validator="notEmpty" data-title="类别分类名称" placeholder="请选择类别分类名称" data-toggle="dropdown" value="">
<input type="hidden" class="form-control formValue" id="fileTypeId" data-validator="notEmpty"  data-title="类别分类名称编码" value="" >
<div id="menuContent" class="menuContent" style="overflow:scroll ;border:1px solid #ccc; width:260px; height:200px; background: #fff; border-radius:3px; position: absolute; top:67px; left:30; z-index: 10000; display: none;">
     <ul id="tree" class="ztree" data-title="类别分类名称" ></ul>
</div>

(2)js中,代码如下:

var settings = {
    async : {
       enable : true,
       type : "post",
       contentType : "text/html;charset=UTF-8",
       dataType : 'json',
       url :路径     
}, view : { showIcon :
false, showLine : true, expandSpeed : 'fast', dblClickExpand : false }, data : { simpleData : { enable : true } }, callback : { onClick : onClick } }; $.fn.zTree.init($("#tree"), settings); setTimeout(function() { // 查询条件中所属组织机构的div离开事件 $("body").click(function(event) { if (event.target.id == "className") { $("#menuContent").toggle(); } if (event.target.id.indexOf("tree") == -1&& event.target.id != "className") { $("#menuContent").hide(); } }); });

(3)ztree中,单选按钮的使用onclick():

function onClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    var nodes = zTree.getSelectedNodes();
    var id = "";
    var name = "";
    for (var i = 0, l = nodes.length; i < l; i++) {
        if (nodes[i].id.length == 0) {
            alert("请选择类别分类名称!");
        } else {
            id += nodes[i].id;
            name += nodes[i].name;
        }
    }
    $("#fileTypeId").val(id);
    $("#className").val(name);
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM