The answer online says that it is because Easy-ui should delete the class style in the lower version, and write url in javascript. If there is url in class, there is also url in javascript, which will refresh the page twice, but my problem was not solved after the test. Later, I finally found the problem through repeated tests.
<ul id="eva" style=" font-size:25px; "></ul>
Because I wrote style on the page, deleting the style in the style can solve the problem. Now I attach the complete ajax dynamic tree and Grid table code.
<html><head> <title>Tree</title> <link href="../../Content/JQEasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../../Content/JQEasyUI/themes/icon.css" rel="stylesheet" /> <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script> <script src="../../Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> var NodeText; var time; var treeeva; $(function () { initTable(); $("#SelectForm").css("display", "none"); bindSearcheClick(); $('#eva').tree({ url: '/OEE/GetTree', method: 'get', animate: true, checkbox: true }); }); //Initialize the table function initTable() { $('#tt').datagrid({ url: '/OEE/Details', title: 'OEE', width: 700, height: 360, fitColumns: true, idField: 'Fid', loadMsg: 'The information about the device is loading...', pagination: true, singleSelect: false, pageSize: 10, pageNumber: 1, pageList: [10, 20, 30], queryParams: {//The parameter to be passed in NodeResult: NodeText, SelectTime: $('#SelectTime').datebox('getValue') }, columns: [[//{EID, ETypeName, ThenTypeInfoTID, EtypeNum} {field: 'Num', title: 'Device number', width: 80, align: "center" }, { field: 'Name', title: 'DelTimeOEE', title: 'Name', width: 80, align: "center" }, { field: 'EarlyTimeOEE', title: 'EarlyTimeOEE', width: 80, align: "center" }, { field: 'MiddleTimeOEE', title: 'Noon OEE', width: 80, align: "center" }, { field: 'LaterTimeOEE', title: 'Night TimeOEE', width: 80, align: "center" }, { field: 'DelFlag', title: 'Operation', width: 80, align: 'center', formatter: function (value, row, index) { var str = "<a Fid='" + row.Fid + "' class='SelectInfo' href='javascript:void(0)'>Details</a> "; return str; } } ]], onHeaderContextMenu: function (e, field) { }, onLoadSuccess: function (data) { $(".SelectInfo").unbind("click"); $(".SelectInfo").bind("click", function () { doSelect($(this).attr("Fid"), time); return false; }); } }); } function doSelect(Fid, Time) { var reg = new RegExp("-", "g"); var strobj = Fid.toString(); var newsstr = strobj.replace(reg, "$"); $('#SelectFrame').attr('src', '/OEE/GetSelectInfo/' + Fid + '/' + Time); $('#SelectForm').css('display', 'block'); $('#SelectForm').dialog({ width: 470, height: 470, modal: true, title: "Show details", collapse: true, minimal: true, maximizable: true, resizable: true, buttons: [{ id: 'btnSelect', text: 'OK', iconCls: 'icon-add', handler: function () { $("#SelectForm").dialog("close"); } }] }); } //Bind the click event of search query function bindSearcheClick() { //linkButtonSearch $("#linkButtonSearch").click(function () { var nodes = $('#eva').tree('getChecked'); var s = ''; for (var i = 0; i < nodes.length; i++) { if (s != '') s += ','; s += nodes[i].id; } NodeText = s; time = $('#SelectTime').datebox('getValue'); initTable(); }); } </script></head><body> <div> <div> <div> <div style="margin: 23px 0;"> </div> <div style="padding: 5px; border-radius: 5px;"> <ul id="eva" > </ul> </div> </div> <div id="Right"> <div id="query"> Query time: <input name="SelectTime" id="SelectTime" /> <a id="linkButtonSearch" href="javascript:void(0)" data-options="iconCls:'icon-search'"> Query</a> </div> <table id="tt" iconcls="icon-edit"> </table> <div id="SelectForm"> <iframe id="SelectFrame" src="javascript:void(0)" frameborder="0"> </iframe> </div> </div> </div> </div></body></html>