echarts樹使用案例

在樹節點中右鍵點擊.

      <ul class="menu right-click-menu nav nav-pills nav-stacked">
            <li><a id="menuUpdate" href="#">修改</a></li>
            <li><a id="menuInsert" href="#">新增</a></li>
            <li><a id="menuDelete" href="#">刪除</a></li>
            <li><a id="menuRisk" href="#">風險緩解</a></li>
        </ul>

　　js代碼：

$(function () {
    var myChart1 = echarts.init(document.getElementById("nav-status"));
    EARefresh(myChart1, "1");

    var myChart2 = echarts.init(document.getElementById("nav-grease"));
    EARefresh(myChart2, "2");

    var myChart3 = echarts.init(document.getElementById("nav-hole"));
    EARefresh(myChart3, "3");

    $("#stage1").on("click", function () {
        $("#nav-hole").hide();
        $("#nav-grease").hide();
        $("#nav-status").show();
        myChart1.resize();
    });

    $("#stage2").on("click", function () {
        $("#nav-status").hide();
        $("#nav-hole").hide();
        $("#nav-grease").show();
        myChart2.resize();
    });

    $("#stage3").on("click", function () {
        $("#nav-status").hide();
        $("#nav-grease").hide();
        $("#nav-hole").show();
        myChart3.resize();
    });

    //刷新
    $("#btnQuery").on("click", function () {
        EARefresh();
    });

    //SaveData
    $("#btnSave").on("click", function (e) {
        var frm = $("#frm");
        if (frm[0].checkValidity()) {
            var pa = frm.WeForm("getJson");
            var id = frm.data("id");
            if (id == "") {
                pa["TableOP"] = "A";
            }
            else {
                pa["TableOP"] = "U";
            }

            $.ajax({
                url: "/Risk/SaveRiskVerOne", type: "POST", data: pa,
                success: function (res) {
                    if (res == "OK") {
                        $("#dlg").modal('hide');
                        $.WeMsg("操作成功", "OK");
                        $("#frm").WeForm("clear");
                    }
                    else {
                        $.WeMsgBox("數據保存操作失敗", "OK");
                    }
                }
            });
        }
        else {
            frm.addClass("was-validated");
        }
    });

    //判斷之前是否已經選中
    $('#tb tbody').on('click', 'tr', function () {
        
        if (!$(this).children(":first").hasClass("dataTables_empty")) {
            if ($(this).hasClass('selected')) {
                //$( this ).removeClass( 'selected' );
            }
            else {
                $('#tb tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }

            var chks = $("input[type='checkbox']", this);
            var tag = $(this).attr("tag");
            if (tag === "selected") {
                // 之前已選中，設置為未選中
                $(this).attr("tag", "");
                chks.prop("checked", false);
            } else {
                // 之前未選中，設置為選中
                $(this).attr("tag", "selected");
                chks.prop("checked", true);
            }
        }
    });

    //新增緩解措施
    $("#btnSaveRelieve").on("click", function () {
        if (rId === '' || rId === undefined || rId === null) {
            alert('請選擇風險樹'); return;
        }
        
        //獲取選中的值
        var sel = $('#tb>tbody input[type="checkbox"]:checked');
        if (sel.length <= 0) {
            alert('請選擇風險措施');
            return;
        }
        clickNum = 0;
        var riskCodeAndValue = [];
        //var reg = /,$/gi; str = str.replace(reg, '');可以用正則去掉
        var res = '';
        //獲取編碼code
        for (var i = 0; i < sel.length; i++) {
            var riskCode = $(sel[i]).parent().next().next().html();
            var riskValue = $(sel[i]).parent().parent().find(".data_value").val();
            if (riskValue === '' || riskValue === null) {
                res = '請在風險措施編碼為' + riskCode + '填寫風險值';
                alert(res);
                break;
            }
            if (riskValue < 0 || riskValue >= 10) {
                res ="編碼為："+ riskCode + "  輸入的風險值有誤，取值范圍：0-10,請重新輸入";
                alert(res);
                break;
            }
            riskCodeAndValue.push({
                RELIEVE_ID: riskCode,
                RISK_VALUE: riskValue
            });
            //if (i !== sel.length - 1)
        }
        if (res === null || res !== '' || res.length > 0) return;

        //保存數據
        $.ajax({
            url: "/Risk/InsertRelievePlanPageOne",
            type: "POST",
            data: { riskCodeAndValue: JSON.stringify(riskCodeAndValue), fId: rId },
            success: function (res) {
                clickNum = 0;
                if (res === 'OK') {
                    $.WeMsg("操作成功", "OK");
                    $("#dlgRisk").modal('hide');
                } else {
                    $.WeMsgBox("操作失敗", "OK");
                }
            }
        });
    });

    //快查
    $("#btnQuick").on('click', function () {
        var txt = $("#txtName").val();
        var list = $('#tb td:nth-child(4):contains("' + txt + '")');
        tableQuickFind(list, txt);
    });
    //input框改變事件
    $("#txtName").on("input", function () {
        clickNum = 0;
    });
});



var rId = "";
var count = 0;
function EARefresh(myChart, pStage) {
    $.ajax({
        type: "Post",
        url: '/Risk/GetRiskVerList', data: { pStage: pStage },
        success: function (data) {
            myChart.hideLoading();
            var option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        name: '樹圖',
                        //name: 'TREE_ECHARTS',
                        data: [data == "" ? "" : eval("(" + data + ")")],

                        //left: '2%',
                        //right: '2%',
                        //top: '8%',
                        //bottom: '20%',
                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 7,
                        symbol: 'emptyCircle',
                        //symbol: '../Content/img/Risk.png',
                        orient: 'horizontal',// vertical horizontal
                        expandAndCollapse: true,
                        label: {
                            normal: {
                                position: 'left',//字選對原點顯示位置//標簽的位置
                                //rotate: 0,
                                verticalAlign: 'middle',//文字垂直對齊方式，默認自動。可選：top，middle，bottom
                                align: 'center',//文字水平對齊方式，默認自動。可選：top，center，bottom
                                fontSize: 12//字體,                            
                                //fontWeight:  'bolder'    
                            }
                        },
                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    rotate: 0,
                                    verticalAlign: 'middle',
                                    align: 'left'
                                    //position: 'right',
                                    //verticalAlign: 'middle',
                                    //align: 'left'
                                }
                            }
                        },
                        animationDuration: 550, //初始動畫的時長，支持回調函數,默認1000
                        animationDurationUpdate: 750,//數據更新動畫的時長，默認300
                        expandAndCollapse: true, //子樹折疊和展開的交互，默認打開

                        initialTreeDepth: 4  //展示層級數,默認是2
                    }
                ]
            };

            myChart.setOption(option);
            $('.tree-container').bind("contextmenu", function () {
                return false;
            });//防止默認菜單彈出

            
            myChart.on('contextmenu', function (params) {
                $('.right-click-menu').css({
                    'display': 'block',
                    'left': params.event.offsetX + 15,
                    'top': params.event.offsetY + 15
                });
                var name = params.data.name;//點擊的節點的name	
                var value = params.data.value;//點擊的節點的value
                rId = value;
                //修改
                $('#menuUpdate').on("click", function () {
                    $("#frm").removeClass("was-validated");
                    if (rId === undefined || rId === "" || rId === null) {
                        $.WeMsgBox("請選擇要修改的數據項目", "OK");
                    }
                    else {
                        EAEdit();
                    }
                });
                //新增
                $('#menuInsert').on("click", function () {
                    $("#frm").removeClass("was-validated");
                    $("#frm").WeForm("clear");
                    $("#frm").data("id", "");
                    $("#TxtWeqcuiszQm").val(rId);
                    $("#dlg").modal('show');
                });
                //刪除
                $('#menuDelete').on("click", function () {
                    if (rId === undefined || rId === "" || rId===null) {
                        $.WeMsgBox("請選擇要刪除的數據項目", "OK");
                    }
                    else {
                        if (confirm("確認要刪除嗎？")) {
                            $.post('/Risk/DelRiskVerOne', { "CId": rId }, function (res) {
                                if (res === "OK") {
                                    $.WeMsg("操作成功", "OK");
                                }
                                else {
                                    $.WeMsgBox("刪除失敗原因:" + res, "OK");
                                }
                            });
                        }
                    }
                });
                
                //添加緩解措施
                $("#menuRisk").on("click", function () {
                    $("#dlgRisk").removeClass("was-validated");
                    if (rId === undefined || rId === "" || rId === null) {
                        $.WeMsgBox("請選擇要填寫的風險", "OK");
                        return;
                    } else {
                        if (count <= 0) {//重新加載數據
                            setTimeout(function () { addRisk(); }, 200);
                        }
                        else {
                            setTimeout(function () { $("#tb").DataTable().ajax.reload(); }, 200); //刷新
                        }
                        count++;
                    }
                    $("#dlgRisk").modal('show');
                });
            });

            //鼠標點擊把右鍵按鈕的屬性消失
            $('.tree-container').click(function () {
                $('.right-click-menu').css({
                    'display': 'none',
                    'left': '-9999px',
                    'top': '-9999px'
                });
            });
        }
    });
}

//rId,風險因素id
function addRisk() {
    clickNum = 0;
    //根據rId去風險編碼表中查找數據，機航，人機，運行
    var tb = $("#tb").DataTable({
        
        "ajax": {
            "url": '/Risk/GetRiskValueList',
            "type": "POST",
            "data": function (d) {
                d.rId = rId;
            }
        },
        "info": false,
        "paging": false,
        "columns": [
            {
                "data": "WeskvoBhtdo", "width": 40, "render": function (data) {
                    if (data === '' || data === null)
                        return '<input type="checkbox" />';
                    else
                        return '<input type="checkbox" checked="checked" />';
                }
            },
            { "data": "WegQerk", "title": "風險值類型" },
            { "data": "WesgomjblRn", "title": "風險措施編碼" },
            { "data": "WesgomjblModo", "title": "名稱" },
            {
                "data": "WexjhxmkyAowurjt", "title": "是否可緩解", "width": 80, render: function (data, type) {
                    if (type === 'display') {
                        if (data === "Y") { return '是'; }
                        else if (data === "N") { return '否'; }
                        else { return '不知道'; }
                    }
                    return data;
                }
            },
            {
                "data": "WeskvoBhtdo", "title": "風險值", "width": 100, render: function (data, rows) {
                    return '<input class="form-control data_value" id="' + rows.WesgomjblRn + '" type="text" value="' + data + '"></input>';
                }
            }
        ]

    });
}

//Edit編輯List節點
function EAEdit() {
    $.post('/Risk/GetRiskVerOne', { "CId": rId }, function (res) {
        var _data = JSON.parse(res);
        $("#frm").WeForm("clear");
        $("#frm").WeForm("bind", _data[0]);
        $("#frm").data("id", rId);
        var lastModify = $('#frm .lastModify');
        if (_data[0].Weprhv != undefined && _data[0].Weprhv != "") {
            lastModify.show();
        }
        else {
            lastModify.hide();
        }
        $("#dlg").modal('show');
    });
}

　　效果：