easyui datagrid onLoadSuccess方法正确使用

心已赠人 2021-07-28 12:12 614阅读 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的全局属性有影响的方法，比如 所以的监听事件的初始化方法

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

//加载成功之后，选定并获取首行数据       
    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，这样就不会出现问题了