当前位置: 首页 > 工具软件 > dtree > 使用案例 >

dtree.js下拉树控件

杜经艺
2023-12-01

dtree下拉树的一些基础用法

id  Number  唯一的id

pid  Number  判定父节点的数字,根节点的值为 -1

name  String  节点的文本标签

url  String  节点的Url

title  String  节点的Title

target  String  节点的target

icon  String  用做节点的图标,节点没有指定图标时使用默认值

iconOpen  String  用做节点打开的图标,节点没有指定图标时使用默认值

open  Boolean   判断节点是否打开


/**
 *
 * @param id 要渲染的dom
 * @param data 数据
 * @param none  无数据时显示   "暂时没有数据!"
 * @param checkbar 是否开启复选框
 * @param checkbarType  上下级联关系  半选、单向级联、独立、仅存一个
 * @returns {*}
 */
function renderDtreeData(id,data,none,checkbar,checkbarType,select,height){
    var dtreeObj ;
    layui.extend({
        dtree: '/plugin/layui_ext/dtree/dtree'   //  文件路径
    }).use(['dtree'], function() {
        var dtree = layui.dtree;
        dtreeObj = dtree.render({
            elem: "#" + id,
            data: data,
            none: none,
            select : select,
            checkbar: checkbar,
            checkbarType: checkbarType, // 默认就是all,其他的值为: no-all  p-casc   self  only
            menubar: true,
            // width : "500px",
            height: height,
            menubarTips: {
                group: ["moveDown", "moveUp", "refresh", "searchNode"]
            }
        });

        // 绑定节点点击事件
        dtree.on("node("+id+")", function(obj){
            var nodeId = obj.param.nodeId;
            dtreeObj.clickNodeCheckbar(nodeId);// 点击节点选中复选框
            // console.log(obj.param)
            // var checkbarNodes = dtree.getCheckbarNodesParam("checkbarTreeNode");
            // layer.msg(JSON.stringify(checkbarNodes));
        });
    });
    return dtreeObj;

}

/**
 * 获取选中数据
 * @param id
 * @returns {*[]}
 */
function getCheckbarNodesParam(id){
    var checkStr = [];
    layui.use(['dtree'], function() {
        var dtree = layui.dtree;
        checkStr = dtree.getCheckbarNodesParam(id); //id是元素的dtree-id(默认是checkemployeetree)
    });
    return checkStr;
}



/**
 * 数组转化为树形结构
 * @param list
 * @returns {*[]}
 */
function arrayToDtree (arr, pid){
    var list = [];
    arr.map(item=>{
        console.log(1)
        if (item.parent == pid){
            var result = {
                id : item.id,  //节点ID(必填)
                title : item.name,  //节点名称(必填)
                parentId : item.parent,  //父节点ID(必填)
                checkArr : "0",  //复选框列表(开启复选框必填,默认是json数组。)
                checked : false, //是否选中(开启复选框,0-未选中,1-选中,2-半选。非必填)
                spread : true, //节点展开状态(v2.4.5_finally_beta版本新增。true:展开,false:不展开,布尔值,非必填)
                disabled : false,
                children : []
            };
            list.push(result);
        }
    });

    list.map(item=>{
        console.log(2)
        item.children = arrayToDtree(arr,item.id) ;
    })
    return list;
};


 

 类似资料: