[asp.net] easyui 复选tree默认选中第一个节点

为了实现页面加载成功的时候选中全部的参数，如温度、湿度等，需要选中对应的复选框才能触发echarts的数据请求和加载显示事件，所以，需要选中第一个节点，即父节点，实现参数的全部选中。效果如下图所示。

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="pragma" content="no-cache" />
    <script src="/Scripts/loading.js" type="text/javascript"></script>
    <link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
    <script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <!--单文件导入-->
    <script src="/Echarts/echarts-all.js" type="text/javascript"></script>
    <script type="text/javascript">
        //树形菜单的点击事件
        $(function () {
            $('#dd1').datebox('setValue', '2018-7-1');
            $('#dd2').datebox('setValue', '2018-12-1');
            $("#tt").tree({
                onLoadSuccess: function (node, data) {
                    if (data.length > 0) {
                        //找到第一个元素
                        var n = $('#tt').tree('find', data[0].id);
                        //调用选中事件
                        $('#tt').tree('check', n.target);
                    }
                },
                onCheck: function () {
                    var nodes = $('#tt').tree('getChecked');
                    var data1 = '';
                    var data2 = [];
                    for (var i = 0; i < nodes.length; i++) {
                        if (nodes[i].id > 0) {
                            if (data1 != '') data1 = data1 + ',';
                            data1 = data1 + nodes[i].text;
                            data2.push(nodes[i].text);
                        }
                    }

                    //读取测点数据
                    $.ajax({
                        url: '/CD/CDHandler.ashx?action=GetCDInfo',
                        type: 'POST',
                        data: {
                            JZId: $('#tt').tree('getRoot').text,
                            CDName: data1,
                            Start: $('#dd1').datebox('getValue'),
                            End: $('#dd2').datebox('getValue')
                        },
                        beforeSend: function () {
                            $.messager.progress({
                                text: '正在处理中...'
                            });
                        },
                        success: function (data) {
                            $.messager.progress('close');
                            data = eval('(' + data + ')');

                            //更新echart数据
                            var myChart = echarts.init(document.getElementById('myechart'));
                            //准备数据
                            option = {
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: data2
                                },
                                xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: data.x
                                }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: data.series
                            };

                            //加载数据
                            myChart.setOption(option);
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <table style="width:100%">
        <tr>
            <td>
                <ul id="tt" class="easyui-tree" url="/CD/CDHandler.ashx?action=GetAllCDInfo" style="width: 180px;" checkbox="true">
                </ul>
            </td>
            <td>
                开始时间：
                <input id="dd1" type="text" class="easyui-datebox" />
                结束时间：
                <input id="dd2" type="text" class="easyui-datebox" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <!--Echart图表区域-->
                <div id="myechart" style="height: 300px; width: 100%; position: relative; margin: 0 auto;">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

注意，这里我们首先利用find方法根据id找到第一个节点元素，然后再通过check方法选中该元素的。关键代码如下：

onLoadSuccess: function (node, data) {
                    if (data.length > 0) {
                        //找到第一个元素
                        var n = $('#tt').tree('find', data[0].id);
                        //调用选中事件
                        $('#tt').tree('check', n.target);
                    }
                }

[asp.net] easyui 复选tree默认选中第一个节点

猜你喜欢