欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jstree使用

程序员文章站 2022-05-03 11:58:03
$('#using_json').jstree({ 'core' : { "themes" : { // "stripes" : true,//背景是否显示间纹。 // "dots": true,//是否显示树连接线 // "icons": true,//是否显... ......
$('#using_json').jstree({
        'core' : {
            "themes" : {
                // "stripes" : true,//背景是否显示间纹。
                // "dots": true,//是否显示树连接线
                // "icons": true,//是否显示节点的图标
                // "ellipsis": true//节点名过长时是否显示省略号
            },
            "check_callback" : true,
            'data' : 
            {
                'url': 'data-demo/dept.json',
                'datatype': 'json',
                // 'data': function (node) { // 传给服务端点击的节点
                //     //return { id: node.id == "#" ? "0" : node.id };
                //     return { clickid: node.id };
                // },
                // success: function () {
                //     alert('ok');
                // }
            },// 生成节点的数据,treedata是后台返回的json数据
            // 'multiple' : true,  // 可否多选
            'dblclick_toggle': true,   //允许tree的双击展开
   //          "check_callback" : function (operation, node, parent, position, more) {
            //     if(operation === "copy_node" || operation === "move_node") {
            //         if(parent.id === "#") {
            //             return false; // prevent moving a child above or below the root
            //         }
            //     };
            //     return true;
            // }

        },
        // 引入插件
        'plugins': ["state",'checkbox','types','themes','contextmenu'],
        "types" : {
            "default" : {

            },
            "company" : {
                "icon" : 'fa fa-home',
            },
            "department" : {
                "icon" : "fa fa-cubes",
            },
            "user" : {
                "icon" : "fa fa-user",
            },

        },
        'checkbox': {  // 去除checkbox插件的默认效果
            'tie_selection': false,
            'keep_selected_style': false,
            'whole_node': false
        },
        'contextmenu': {// 右键菜单
            'items' : custommenu     //每个节点都会调用这个函数
        },        
    })
    .bind('click.jstree', function(event) { //单击事件
}) //双击 确定jstree.js中已经添加双击事件 .bind('dblclick.jstree',function(event){ }); //$('#using_json').jstree("destroy");//销毁树 function custommenu(node) { var items = { 'add': { 'label': '添加子公司', 'action': function (obj) { var inst = jquery.jstree.reference(obj.reference); var clickednode = inst.get_node(obj.reference);//获取节点对象 var ty = inst.get_type(obj.reference); if (ty == 'department') { swal({ title : "", text : "无法对部门添加下级部门!", type : "warning", confirmbuttoncolor : "#1ab394", confirmbuttontext : "确认", }); return; } var newnode = inst.create_node(obj.reference,clickednode.val); if (obj.reference[0].id=='j1_10_anchor') { inst.set_type(newnode, 'company'); }else{ inst.set_type(newnode, 'department'); } var nodeobj = inst.get_json(newnode); var str = { "text" : nodeobj.text, "icon" : nodeobj.icon, "type" : nodeobj.type, "parentid" : clickednode.id, "tablelist" : null }; console.log(str) // var selectedtab = $('#t_map').tabs('getselected'); // var pagetitle = selectedtab.panel('options').title; // $.post("lwy/createnode.do", {changedata : json.stringify(str),pagetitle:pagetitle}, function(data) {}); inst.edit(newnode); inst.open_node(obj.reference); } },'edit': { 'label': '编辑', 'action': function (obj) { } }, 'delete': { 'label': '删除', 'action': function (obj) { } } } if (node.type === 'department') { delete items.item2; //删除节点 items } else if (node.type === 'user') { delete items.item1; //删除节点 items } return items; }