easyui datagrid onLoadSuccess方法执行了两次的问题及其正确使用

深碍√TFBOYSˉ_ 2022-04-05 04:28 815阅读 0赞

本来这样写的

当数据加载完他会调用loadok()函数

function loadok() {
         alert(0)
       }

然后就发现页面弹出了两次0，即 loadok函数执行了两次

只好折中一下，加了一个函数调用次数的判断

var onLoadTimes =0
    function loadok() {
    	onLoadTimes=onLoadTimes+1
    	if(onLoadTimes==2){
    		alert(0)
            //var rows = $('#dg').datagrid('getData');
            //console.log(rows)
    	}
    }

这下就弹出一次了

网上也有其他做法

大意都是说是因为class="easyui-datagrid" 和js中调用datagrid 相关方法都初始化了一次datagrid，

这里的datagrid 相关方法是指 对datagrid的全局属性有影响的方法，比如 所以的监听事件的初始化方法

官方是这样说的

[http://www.jeasyui.com/forum/index.php?topic=2216.msg%25msg\_id%25][http_www.jeasyui.com_forum_index.php_topic_2216.msg_25msg_id_25]

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p><br><span style="color:#000000;">帖子：3414<br><br><br><a href="https://www.jeasyui.com/forum/index.php?action=profile;u=1" rel="nofollow"><img alt="查看资料" src="https://jeasyui.com/forum/Themes/default/images/icons/profile_sm.gif"></a>&nbsp;<a href="mailto:stworthy@gmail.com" rel="nofollow"><img alt="电子邮件" src="https://jeasyui.com/forum/Themes/default/images/email_sm.gif"></a></span></p> </td> 
   <td style="vertical-align:top;"> 
    <table> 
     <tbody> 
      <tr> 
       <td style="vertical-align:middle;"><span style="color:#000000;"><span style="color:#000000;"><a href="https://www.jeasyui.com/forum/index.php?topic=2216.msg4916#msg4916" rel="nofollow"><img alt="" src="https://jeasyui.com/forum/Themes/default/images/post/xx.gif"></a></span></span></td> 
       <td style="vertical-align:middle;"> <p><span style="color:#000000;"><span style="color:#000000;"><strong><a href="https://www.jeasyui.com/forum/index.php?topic=2216.msg4916#msg4916" rel="nofollow">Re：onLoadSuccess为datagrid多次触发</a></strong></span></span></p> <p><span style="color:#000000;"><span style="color:#000000;">«&nbsp;<strong>回复＃1于：</strong>&nbsp;2013年9月16日上午06:37:48»</span></span></p> </td> 
       <td style="vertical-align:bottom;">&nbsp;</td> 
      </tr> 
     </tbody> 
    </table> 
    <hr><p><span style="color:#000000;">如果&lt;table&gt;标记中有class =“easyui-datagrid”属性并再次调用$（'＃dg_exp'）。datagrid（{...}），则会多次创建数据网格。请从&lt;table&gt;标记中删除class =“easyui-datagrid”属性以防止出现此问题。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

我的问题是把 onLoadSuccess写在html中，然后会调用两次

[https://bbs.csdn.net/topics/392336147?page=1][https_bbs.csdn.net_topics_392336147_page_1]

[http://www.zhuzhusoft.com/article.php?id=213][http_www.zhuzhusoft.com_article.php_id_213]

[https://stackoverflow.com/questions/18690664/jquery-easyui-edatagrid-onloadsuccess-fires-twice][https_stackoverflow.com_questions_18690664_jquery-easyui-edatagrid-onloadsuccess-fires-twice]

调用两次按照调用次数判断的方法解决后，又有了一些别的问题，在loadok()里面不能用easyui datagrid的方法，把上面的注释取掉，页面就会报错，datagrid连数据都不能加载出来

报错 jquery.easyui.min.1.3.2.js:8147 Uncaught TypeError: Cannot read property 'data' of undefined

![20181210220125140.png][]

又看了下这个api

[http://www.jeasyui.com/documentation/datagrid.php][http_www.jeasyui.com_documentation_datagrid.php]

<table> 
 <tbody> 
  <tr> 
   <th><strong>Name</strong></th> 
   <th><strong>Parameters</strong></th> 
   <th><strong>Description</strong></th> 
  </tr> 
  <tr> 
   <td>onLoadSuccess</td> 
   <td>data</td> 
   <td>Fires when data is loaded successfully.</td> 
  </tr> 
 </tbody> 
</table>

发下它还应该有一个data参数

在百度下看了一个别人的demo

[https://blog.csdn.net/lmb55/article/details/50060433][https_blog.csdn.net_lmb55_article_details_50060433]【easyui】easyui datagrid加载成功之后选定并获取首行数据

//加载成功之后，选定并获取首行数据         
        onLoadSuccess:function(data)\{     
            alert("grid加载成功");  
            var rows=$('test').datagrid("getRows");  
            if (rows.length > 0) \{  
                $('test').datagrid('selectRow',0);//grid加载完成后自动选中第一行  
                var row=$('test').datagrid("getSelections");//获取选中的数据  
                var rowData = \{  
                        interfaceName:row\[0\].interfaceName,  
                        province:row\[0\].province,  
                        startDate:row\[0\].startDate,  
                        endDate:row\[0\].endDate  
                        //grid中有四组数据interfaceName、province、startDate、endDate  
                \};  
                alert("grid的第一行数据>>" + rowData);  
            \}else \{  
                alert("没有数据");  
            \}  
        \},    
这才发现 onLoadSuccess只有这样用才是最正确的

最后总结一下，对涉及到监听事件的datagrid都应该这样写，我最终的代码如下

即用js来初始化datagrid，这样就不会出现问题了

[http_www.jeasyui.com_forum_index.php_topic_2216.msg_25msg_id_25]: http://www.jeasyui.com/forum/index.php?topic=2216.msg%25msg_id%25
[https_bbs.csdn.net_topics_392336147_page_1]: https://bbs.csdn.net/topics/392336147?page=1
[http_www.zhuzhusoft.com_article.php_id_213]: http://www.zhuzhusoft.com/article.php?id=213
[https_stackoverflow.com_questions_18690664_jquery-easyui-edatagrid-onloadsuccess-fires-twice]: https://stackoverflow.com/questions/18690664/jquery-easyui-edatagrid-onloadsuccess-fires-twice
[20181210220125140.png]: /images/20220405/7bd0a512a72140a49c8983953fabbd51.png
[http_www.jeasyui.com_documentation_datagrid.php]: http://www.jeasyui.com/documentation/datagrid.php
[https_blog.csdn.net_lmb55_article_details_50060433]: https://blog.csdn.net/lmb55/article/details/50060433