JS处理EasyUI DataGrid获取到的数据
2017-12-07 12:39
676 查看
在EasyUI DataGrid的使用中,通过后台java springMVC代码返回一个List<Map<String,Object>>类型的值,给前台javascript,针对返回的数据,我们还需要进行处理或操作。查看EasyUI 的API中文文档,简单使用方式如下:
刚开始,直观的想通过data,进行数据操作处理,发现各种调用基本失效,比如data.length、data.size等等,更别说遍历data了、后来发现,采用的方式不对,应该重新获取该数据集,再进行操作,而不是操作执行成功返回的data。上面代码通过datagrid方法,实际已经将数据加载到了$("#TableID")节点元素中,再次获取就可以了。获取的方式为$("#TableID").datagrid("具体方式"),这里的具体方式参数可以是getData、getRows、getChecked、getSelected等,具体参考API文档。
![](https://img-blog.csdn.net/20171207140734359?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDY1MDc1OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
这里,采用的getData方式,它获取到的数据是一个List集合,要遍历的话,还需要使用.rows得到行数据。如果采用的getRows,就是直接获取当前页的行数据,下面的代码就无需使用.rows。所以,最后代码是:
$("#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"); }});
相关文章推荐
- EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理
- 在js中获取easyui datagrid的数据
- 在js中获取easyui datagrid的数据
- 在js中获取easyui datagrid的数据
- EasyUI datagrid数据表格--获取datagrid中选中行的数据
- js循环生成多个easyui datagrid数据网格时,初始化表格
- js获取的数据返回给servlet处理时出现乱码
- 通过JS获取前台数据,并向后台一般处理程序传递
- Easyui DataGrid 获取单元格数据
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
- easyui-datagrid通过action从数据库获取数据的关键代码
- EasyUI中datagrid获取json数据遇到的问题
- ajax返回的数据 用easyui的datagrid的表格来循环显示,用灰色背景的是隐藏的列。点击可以获取到隐藏的值
- CRM系统二期的dev(一)--EasyUi datagrid 获取Checked选择行(勾选行)数据
- easyui datagrid 行数据处理
- EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理
- easyui datagrid 返回无数据时的处理
- 关于easyuidatagrid获取datagrid的选择数据
- easyui datagrid combobox下拉框获取数据问题
- easyui获取datagrid所有行、变化行、更新行等数据的方法