[asp.net] easyui 複選tree預設選中第一個節點
阿新 • • 發佈：2019-01-26
為了實現頁面載入成功的時候選中全部的引數，如溫度、溼度等，需要選中對應的複選框才能觸發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); } }