JS处理EasyUI DataGrid获取到的数据

来源:互联网 发布:淘宝怎么购物啊 编辑:程序博客网 时间:2024/05/21 20:29
在EasyUI DataGrid的使用中,通过后台java springMVC代码返回一个List<Map<String,Object>>类型的值,给前台javascript,针对返回的数据,我们还需要进行处理或操作。查看EasyUI 的API中文文档,简单使用方式如下:
$("#TableID").datagrid({url:Url, params, onLoadSuccess: function(data) {//省略你要进行的操作代码    }});

刚开始,直观的想通过data,进行数据操作处理,发现各种调用基本失效,比如data.length、data.size等等,更别说遍历data了、后来发现,采用的方式不对,应该重新获取该数据集,再进行操作,而不是操作执行成功返回的data。上面代码通过datagrid方法,实际已经将数据加载到了$("#TableID")节点元素中,再次获取就可以了。获取的方式为$("#TableID").datagrid("具体方式"),这里的具体方式参数可以是getData、getRows、getChecked、getSelected等,具体参考API文档。


这里,采用的getData方式,它获取到的数据是一个List集合,要遍历的话,还需要使用.rows得到行数据。如果采用的getRows,就是直接获取当前页的行数据,下面的代码就无需使用.rows。所以,最后代码是:

$("#TableID").datagrid({url:Url, params, , onLoadSuccess: function(data) {var info=$("#operatorTable").datagrid("getData");//这里举例获取某列所有数据的和,当然你也可以进行其它处理或遍历操作var total=0;for(var i=0;i<info.rows.length;i++){total=total+info.rows[i].number;  //假设Table中有列名number}$("#AllAmount").text("total");    }});

原创粉丝点击