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

本来这样写的

 <table id="dg" class="easyui-datagrid"  rownumbers="true" fitColumns="true" singleSelect="true" 
	data-options="url:'terminalResourceInfoController/findSelectMaterials?id=${vo.id}',method:'post',onLoadSuccess:loadok()">
	 <thead>
	 <tr>
		 <th data-options="field:'id',hidden:true">物料id</th>
		 <th data-options="field:'materialCode'">物料编码</th>
		 <th data-options="field:'materialName'">物料名称</th>
	 </tr>
	 </thead>
	 <tbody>
	 </tbody>
 </table>

当数据加载完他会调用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

帖子：3414

Re：onLoadSuccess为datagrid多次触发 « 回复＃1于： 2013年9月16日上午06:37:48»   如果<table>标记中有class =“easyui-datagrid”属性并再次调用$（'＃dg_exp'）。datagrid（{...}），则会多次创建数据网格。请从<table>标记中删除class =“easyui-datagrid”属性以防止出现此问题。

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

 https://bbs.csdn.net/topics/392336147?page=1

http://www.zhuzhusoft.com/article.php?id=213

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

又看了下这个api

http://www.jeasyui.com/documentation/datagrid.php

Name	Parameters	Description
onLoadSuccess	data	Fires when data is loaded successfully.

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

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

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都应该这样写，我最终的代码如下

<table id="dg"></table>

 var selected=[];
	$(function () {
        $('#dg').datagrid({
            url:'terminalResourceInfoController/findSelectMaterials?id='+$('#id').val(),
            columns:[[
                {field:'id',title:'id',width:100,hidden:true},
                {field:'materialCode',title:'物料编码',width:100},
                {field:'materialName',title:'物料名称',width:100,align:'right'}
            ]],
            rownumbers:true,
            fitColumns:true,
            singleSelect:true,
            onLoadSuccess:function(data){
                console.log(data)
                var rows = $('#dg').datagrid('getRows');
                if(rows){
                    $.each(rows, function( index, row ) {
                        console.log(row+index)
                        selected.push(row.materialCode)
                    })
                    console.log(selected);
                    $('#materialCode').val(selected)
                }
			}
        });
    })

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