Jstree点击,双击,样式,用法

来源:互联网 发布:java 自定义类加载器 编辑:程序博客网 时间:2024/05/21 12:45
调用的样式
/jstree/3.3.3/themes/default/style.min.css
/jquery-treegrid/0.3.0/css/jquery.treegrid.css
/jstree/3.3.3/jstree.min.js
/bootstrap-select/1.12.0/css/bootstrap-select.min.css
/bootstrap-select/1.12.0/js/bootstrap-select.min.js
/jquery-treegrid/0.3.0/js/jquery.treegrid.min.js
/jquery-treegrid/0.3.0/js/jquery.treegrid.min.js
 //清空jstree缓存   调用ajax
        $('#tree_4').data('jstree', false).empty();
 //单击触发事件
        $('#tree_3').bind("activate_node.jstree", function(obj, e) {
            // 处理代码
            // 获取当前节点
            $("#form").hide();
            var currentNode = e.node;
            id = currentNode.id;
            parent = currentNode.parent;
            text = currentNode.text;

        });

//右键触发事件

        var customMenu = function(data) {
            $('#selector1').selectpicker('refresh');
            var divD = document.getElementById("selectHide");
            $("#cf_parentId").val(id);
            if (parent == "#") {
                $('#cf_functionValue').hide();
                divD.style.display = "block";
            } else {
                $('#cf_functionValue').val('');
                divD.style.display = "none";
                $('#cf_functionValue').show();
               
            }
            $("#form").show();
            if (parent == "0" || parent == "#") {
                $("#lableButton").hide();

                $("#lableMenu").show();

//使用prop替换 效果更好

                $(":radio[name='type'][value='menu']").prop("checked", "checked");
            } else {
                $("#lableMenu").hide();
                $("#lableButton").show();
                $(":radio[name='type'][value='button']").prop("checked", "checked");
            }
          
        }

//前端js
 $("#tree_3").jstree({
                    "core" : {
                        "themes" : {
                            "responsive" : false
                        },

                        "check_callback" : true,

//后面的data是根据ajax传过来的json数据

                        "data" : data
                    },
                    "types" : {
                        "default" : {
                            "icon" : "fa fa-folder icon-state-warning icon-lg"
                        },
                        "file" : {
                            "icon" : "fa fa-file icon-state-warning icon-lg"
                        }
                    },
                    "plugins" : [ "contextmenu", "types" ],
                    "contextmenu" : {
                        "items" : {
                            "newxuanxian" : {
                                "label" : "添加此目录下权限",
                                "action" : customMenu,
                            }
                        }
                    }
                }).on('changed.jstree', function (e, data) {     
                                            var parentIdValue = data.instance.get_node(data.selected[0]).id;
                                            $("#editForm #ef_parentId").val(parentIdValue);
                                         });

//后台代码

  list = iFunctionMapper.findFunctionSecondMenu();
            Map<String, Boolean> json1 = new HashMap<>();
            json1.put("selected", true);
            Map<String, Boolean> json2 = new HashMap<>();
            json2.put("opened", true);
            Map<String, Object> json = new HashMap<>();
            json.put("text", "根节点");
            json.put("id", "0");
            json.put("parent", "#");
            json.put("state", json2);
            getValue.add(json);
            for (int i = 0; i < list.size(); i++) {
                Map<String, Object> jsonObject = new HashMap<>();
                jsonObject.put("text", list.get(i).getFunctionName());
                jsonObject.put("id", list.get(i).getId());
                jsonObject.put("state", json2);
                String parentId;
                // parentId为空时,属于二级菜单目录
                if ("".equals(list.get(i).getParentId()) || null == list.get(i).getParentId()) {
                    parentId = "0";
                } else {
                    parentId = list.get(i).getParentId();
                }
                jsonObject.put("parent", parentId);
                getValue.add(jsonObject);
            }


  $('#selector1').selectpicker('refresh');
            var ComponentsBootstrapSelect = function() {
                var n = function() {
                    $(".bs-select").selectpicker({
                        iconBase: "fa",
                        tickIcon: "fa-check"
                    })
                };
                return {
                    init: function() {
                        n()
                    }
                }
            } ();
            App.isAngularJsApp() === !1 && jQuery(document).ready(function() {
                ComponentsBootstrapSelect.init()
            });
//加权限值图标
<div id="selectHide">
<select class="bs-select form-control" id="selector1" data-show-subtext="true" onchange="document.createForm.functionValue.value=this.value">
<option value="">请选择权限图标</option>
<option data-icon="icon-diamond" value="icon-diamond">Mustard</option>
<option data-icon="icon-settings" value="icon-settings">Ketchup</option>
<option data-icon="icon-bulb" value="icon-bulb">Relish</option>
<option data-icon="icon-puzzle" value="icon-puzzle">Mayonnaise</option>
<option data-icon="icon-user" value="icon-user">Barbecue Sauce</option>
</select>
</div>
0 0
原创粉丝点击