设为首页 加入收藏

TOP

jstree使用
2019-09-17 19:00:27 】 浏览:29
Tags:jstree 使用
$('#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; }

 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇小程序mpvue怎么点击按钮获取butt.. 下一篇Webpack探索【15】--- 基础构建原..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目