案例:
使用easyui的datagrid进行局部刷新时, table外的其他区域也要根据返回的数据动态取得值。
function loadData() { $('#tb_list').datagrid('reload',{ name1: $('#name1').val(), name2:$('#name2').val() }); // 取得返回的列 更新tb_list外的其他区域 }
-------------------------------------------------------------------------------------
遇到一个问题,需要获得datagrid的总行数,把datagrid的API找了一遍,getRows这个方法也只能获取当前页中记录的行数.
发现datagrid依赖pagination这个组件,从这个线索找还真的找到了, 分享出来.
var options = $('#resulttable').datagrid('getPager').data("pagination").options;
var totalRowNum = options.total;
第一行:getPager获取页面对象进而获取pagination这个组件.
第二行:pagination组件提供了total这个属性.
From: http://blog.163.com/liuyb_94242/blog/static/421676462012111944220392/
---------------------------------------------------------------------------------------------------
原创文章,转载请标明出处:http://hae.iteye.com/blog/2101477
上面是在网上找的,可能是因为没有使用easyui自带的分页标签,而使用了项目自定义的分页标签,所以easyui到这里$('#resulttable').datagrid('getPager')已经是空了,无法获得总行数,后来自己调试+跟踪+摸索了半天终于找到了一个解决方法:
服务器端返回json对象自定义:
public class DatagridJson { private int total; private List<Row> rows; private Map<String, String> footer; //自定义,封装自己想要得到的后台数据 // get, set 方法省略。。。。 }
原创文章,转载请标明出处:http://hae.iteye.com/blog/2101477
使用ajax 请求服务器端controller时,将返回的json对象组装为自己有用的信息:
... datagridJson.setRows(rowList); Map<String, String> footer = new HashMap<String, String>(); footer.put("key1", "name1"); footer.put("key2", "name2"); footer.put("key3", "name3"); ...... datagridJson.setFooter(footer); return datagridJson;
最后前台使用如下方法:
function loadData() { $('#tb_list').datagrid('reload',{ name1: $('#name1').val(), name2:$('#name2').val() }); // 取得返回的列 更新tb_list外的其他区域 var footer = $('#tb_list').datagrid('getFooterRows'); if (footer === undefined || footer == null) { return; } var key1 = footer['name1']; var key2 = footer['name2']; var key3 = footer['name3']; // 拿到后台的值 然后该干什么就干什么吧。 }
相关推荐
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
JS EasyUI DataGrid动态加载数据
自定义easyui datagrid的行编辑器,实现颜色选择。 依赖类库版本; jquery-1.8.0.js jquery-easyui-1.3.1
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题
EasyUI DataGrid过滤用法实例
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyUI datagrid 自动调整行号大小
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
纯原创开发,datagrid支持表头拖拽前后,支持浏览器左右跟随鼠标滚动,表头右键支持自定义配置,恢复默认等功能,请访问jquery-easyui-1.5\demo\datagrid\columnConfig.html,所有代码都在该文件中,可以自行抽离或2次扩展
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
修改上一个资源版本中结束编辑时combobox显示问题. 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
easyUI datagrid 行上移,下移,置顶,置底的方法
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
解决EasyUIdataGrid列比较多,无数据,列展现不全
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
EasyUI Datagrid 中文排序的问题 解决了WEB端和后台(Oracle、MySQL)中文排序问题
纯原创开发,datagrid支持表头拖拽前后,支持浏览器左右跟随鼠标滚动,表头右键支持自定义配置,恢复默认等功能,请访问jquery-easyui-1.5\demo\datagrid\columnConfig.html,所有代码都在该文件中,可以自行抽离或2次扩展
一个update扩展方法 文档中一种是比较笨的方法 一次只能修改一个列而且受列编辑类型影响(比如number datetime)扩展一次编辑多列,不受编辑类型影响,没有编辑属性也可以。