问题

写【草书文档】这个应用的时候用到了目录树，相关配置挺多的，留存一下。
jstree中文官网
jsttee英文官网
英文官网要比中文的版本高一些，所以用要用github最新版的，看文档就都差不多了。

代码解析

$("#menu").jstree({
                    "core": {
                        "check_callback" : true,
                        "themes": {"stripes": true},
                        "data": d.menu
                    },
                    contextmenu   : {
                        items : function(node){
                            let menu = {
                                createCatalog  : {
                                    label   : "新建目录",
                                    icon    : "fa fa-folder-open",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"catalog"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建目录";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                createPage : {
                                    label: "新建文档",
                                    icon: "fa fa-file-o",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.create_node(obj, {type:"page"}, "last", function (new_node) {
                                            console.log(new_node)
                                            try {
                                                new_node.text="新建文档";
                                                inst.edit(new_node);
                                            } catch (ex) {
                                                setTimeout(function () { inst.edit(new_node); },0);
                                            }
                                        })
                                    }
                                },
                                rename  : {
                                    label: "重命名",
                                    icon: "fa fa-share",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        inst.edit(obj);
                                    }
                                },
                                delete  : {
                                    label: "删除",
                                    icon: "fa fa-times",
                                    action  : function (node) {
                                        var inst = $.jstree.reference(node.reference),
                                            obj = inst.get_node(node.reference);
                                        if(inst.is_selected(obj)) {
                                            inst.delete_node(inst.get_selected());
                                        } else {
                                            inst.delete_node(obj);
                                        }
                                    }
                                },
                            }
                            if(node.type == "page"){
                                // 文档-重命名、删除
                                delete menu.createCatalog;
                                delete menu.createPage;
                            }
                            return menu;
                            
                        }
                    },
                    types : {
                        root    : {
                            icon  : "fa fa-home",
                            valid_children : ["catalog","page"]
                        },
                        catalog   : {
                            icon  : "fa fa-folder-open",
                            valid_children : ["catalog","page"]
                        },
                        page      : {
                            icon  : "fa fa-file-o",
                            valid_children : []
                        }
                    },
                    plugins : ["contextmenu", "dnd", "search","state", "types", "wholerow"]
                }).on("changed.jstree",function(e,d){
                    // console.log(d)
                    // if(d.node.children.length == 0 && d.node.original.type == "page"){
                    //     console.log(d.node.id)
                    // }
                });

前言

在处理ESA中的table内js代码的时候出现了问题，主要是为了让同一个div下的不同选项来处理不同的操作，为了处理除了两项不符合条件外的选择，需要用到jquery选择器的多个条件匹配来处理，然后整理了一下相关的与或非的条件及其组合。

代码

// 内部操作监听
$(elem).on("click",".esa-table-body [esa-event][esa-event!='checkbox'][esa-event!='radio']",function(e){
                
})
// 头尾时间监听
$(elem).on("click",".esa-table-head [esa-event],.esa-table-foot [esa-event],.esa-table-body [esa-event='checkbox'],[esa-event='radio']",function(e){
                
})

示例

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="https://blog.bug-maker.com/admin/js/jquery.js?v=17.10.30"></script>
    <script type="text/javascript">
 
    $().ready(function(){
         
        debugger;// open console and click F10
        //多条件选择
        $('#table1 #td1-1,#td1-2').css('color','red');
        //选择内容不是id=td1
        $('#table2 tbody td:not(#td2-1)').css('color','green');
        //选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素
        $('#table3 [attr1="a1"][attr2="a2"]').css('color','blue');
        //选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素
        $('#table4 [attr1="a1"],#table4 [attr2="a2"]').css('color','yellow');
 
        //选择不满足 条件1 attr1="a1" 的元素
        $('#table5 tbody td[attr1!="a1"]').css('color','purple');
         
        //选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素
        $('#table6 tbody td:not([attr1="a1"],[attr2="a2"])').css('color','red');
        $('#table6 tbody td[attr1!="a1"][attr2!="a2"]').css('color','red');
 
        //选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素
        $('#table7 tbody td:not([attr1="a1"][attr2="a2"])').css('color','red');
        $('#table7 tbody td([attr1!="a1"],[attr2!="a2"])').css('color','red');
 
        //选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2"， 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素
        $('#table8 tbody td([attr1!="a1"],[attr2!="a2"])').css('color','red');
    })
 
    </script>
</head>
<body>
    <p>第一个：多条件选择</p>
    <table border="1px" id="table1">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td1-1">1</td><td id="td1-2">2</td><td id="td1-3" attr1="a1" attr2="a2">3</td><td id="td1-4" attr1="a1">4</td><td id="td1-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择内容不是id=td1</p>
    <table border="1px" id="table2">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td2-1">1</td><td id="td2-2">2</td><td id="td2-3" attr1="a1" attr2="a2">3</td><td id="td2-4" attr1="a1">4</td><td id="td2-5">5</td></tr></tbody>
    </table>
    <p>第三个：选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table3">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td3-1">1</td><td id="td3-2">2</td><td id="td3-3" attr1="a1" attr2="a2">3</td><td id="td3-4" attr1="a1">4</td><td id="td3-5">5</td></tr></tbody>
    </table>
    <p>第四个：选择条件1 attr1="a1" 或者 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table4">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td4-1">1</td><td id="td4-2">2</td><td id="td4-3" attr1="a1" attr2="a2">3</td><td id="td4-4" attr1="a1">4</td><td id="td4-5">5</td></tr></tbody>
    </table>
    <p>第五个：选择不满足 条件1 attr1="a1" 的元素</p>
    <table border="1px" id="table5">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td5-1">1</td><td id="td5-2">2</td><td id="td5-3" attr1="a1" attr2="a2">3</td><td id="td5-4" attr1="a1">4</td><td id="td5-5">5</td></tr></tbody>
    </table>
    <p>第六个：选择不满足 条件1 attr1="a1" 或 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table6">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td6-1">1</td><td id="td6-2">2</td><td id="td6-3" attr1="a1" attr2="a2">3</td><td id="td6-4" attr1="a1">4</td><td id="td6-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择不满足 条件1 attr1="a1" 和 条件2 attr2="a2"的元素</p>
    <table border="1px" id="table7">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td7-1">1</td><td id="td7-2">2</td><td id="td7-3" attr1="a1" attr2="a2">3</td><td id="td7-4" attr1="a1">4</td><td id="td7-5">5</td></tr></tbody>
    </table>
    <p>第二个：选择tboy中td标签attr1!="a1" 和 所有标签中attr2!="a2"， 即除了<td id="td3" attr1="a1" attr2="a2">3</td>的其它所有标签元素</p>
    <table border="1px" id="table7">
        <thead><tr><td>One</td><td>Two</td><td>Three</td><td>Four</td><td>Five</td></tr></thead>
        <tbody><tr><td id="td8-1">1</td><td id="td8-2">2</td><td id="td8-3" attr1="a1" attr2="a2">3</td><td id="td8-4" attr1="a1">4</td><td id="td8-5">5</td></tr></tbody>
    </table>
</body>
</html>