jQuery MiniUI

标题: 多标签页跨页选中数据 [打印本页]
作者: 柑栀    时间: 2022-7-8 18:06:41     标题: 多标签页跨页选中数据

DataGrid存在多个标签页，跨页选中的方法拿不到选中数据，但是只有一个标签页是可以的，求解决方案！在pageSelection中打断点发现多标签只在页面加载的时候进一次，之后操作不进，但是单标签也选中获取会进入断点
作者: felt    时间: 2022-7-11 08:56:29

http://www.miniui.com/demo/#src=datagrid/pageselection.html我们示例可以正常翻页选中的，比较你的环境和我们示例有什么不同。有没有什么报错信息？
作者: 柑栀    时间: 2022-7-12 09:52:32

本帖最后由 柑栀 于 2022-7-12 09:56 编辑
felt 发表于 2022-7-11 08:56
http://www.miniui.com/demo/#src=datagrid/pageselection.html我们示例可以正常翻页选中的，比较你的环境 ...

没有报错，pageSelection中打断点发现单标签也每次操作都会进，但是多标签页只是第一次加载的时候进入后面就进不去了，pageSelection.getSelection();,这个示例中只有一个tab页，我们实际应用是多个tab页的。[attach]13635[/attach]像这种tab页使用pageSelection，就获取不到选中数据，示例中单tab页成功了，是可以拿到的

作者: felt    时间: 2022-7-12 10:47:54

柑栀 发表于 2022-7-12 09:52
没有报错，pageSelection中打断点发现单标签也每次操作都会进，但是多标签页只是第一次加载的时候进入后面 ...

这和tab页无关。你这多tab是一个表格？
作者: 柑栀    时间: 2022-7-12 13:25:49

本帖最后由 柑栀 于 2022-7-12 13:40 编辑
felt 发表于 2022-7-12 10:47
这和tab页无关。你这多tab是一个表格？
  1. <div class="mini-fit">
  2.     <div class="mini-tabs" id="tabs" activeIndex="0" style="width: 100%; height: 100%;">
  3.         <div title="待办">
  4.             <div id="db_custom_button" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0; height: 28px;">
  5.                 <a class="mini-button" iconCls="icon-add" plain="true" onclick="addNew()" id="add" style="display:none">新增</a>
  6.                 <a class="mini-button mini-dag" iconCls="icon-remove" plain="true" onclick="row_remove()" id="remove" style="display:none">删除</a>
  7.                 <a class="mini-button" iconCls="icon-user" plain="true" onclick="view_other_file()" id="view_other_file" style="display:none">查看附件</a>
  8.                 <a class="mini-button" iconCls="icon-upload" plain="true" onclick="upload_other_file()" id="upload_other_file" style="display:none">上传附件</a>
  9.             </div>
  10.             <div id="grid1" selectOnLoad="true" class="mini-datagrid" style="width: 100%; height: 96%;"></div>
  11.         </div>
  12.         <div title="已办">
  13.             <div id="yb_custom_button" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0; height: 28px;">
  14.                 <a class="mini-button" iconCls="icon-look" onclick="view_table_file()" id="yb_view" style="display:none">查看</a>
  15.                 <a class="mini-button" iconCls="icon-user" plain="true" onclick="view_other_file()" id="yb_view_other_file" style="display:none">查看附件</a>
  16.             </div>
  17.             <div id="grid2" selectOnLoad="true" class="mini-datagrid" style="width: 100%; height: 96%;"></div>
  18.         </div>
  19.     </div>
  20. </div>
复制代码
一般都是这样的
作者: felt    时间: 2022-7-12 14:37:18

柑栀 发表于 2022-7-12 13:25
一般都是这样的

你这是多个grid啊，每个tab下不同的grid,这可和我们示例不一样。
作者: 柑栀    时间: 2022-7-12 17:44:51

felt 发表于 2022-7-12 14:37
你这是多个grid啊，每个tab下不同的grid,这可和我们示例不一样。

那我们这种可以使用pageSelection实现跨页吗？
作者: felt    时间: 2022-7-13 09:19:00

柑栀 发表于 2022-7-12 17:44
那我们这种可以使用pageSelection实现跨页吗？

不行，pageselection是针对同一表格的翻页选中，不能针对多个表格。
作者: 柑栀    时间: 2022-7-13 16:41:41

本帖最后由 柑栀 于 2022-7-13 16:43 编辑
felt 发表于 2022-7-13 09:19
不行，pageselection是针对同一表格的翻页选中，不能针对多个表格。

最后通过这种方式实现
后台加载页面时利用循环将pageSelection添加值map中
  1. var pageSelections = new Map();
  2. var grid = mini.get('grid_9c91f326c74244ba818e2807a47f1ad6');
  3. var pageSelection = new PageSelection(grid, {
  4.     selectionchange: function () {
  5.         //选择改变事件
  6.     }
  7. });
  8. pageSelections.set("pageSelection9c91f326c74244ba818e2807a47f1ad6",pageSelection);
  9. var grid1 = mini.get('grid_c88c1d0c456a463b92b98903a4abbb1d');
  10. var pageSelection1 = new PageSelection(grid1, {
  11.     selectionchange: function () {
  12.         //选择改变事件
  13.     }
  14. });
  15. pageSelections.set('pageSelectionc88c1d0c456a463b92b98903a4abbb1d',pageSelection1);
复制代码
维护一个公共方法设置参数为对应grid，通过参数将对应pageSelection从map中对应取出，得到选中数据。
  1. function getSelectedAll(grid) {
  2.         var id=(grid.id).split("_")[1];
  3.         var pageSelection=pageSelections.get("pageSelection"+id);
  4.         var rows = pageSelection.getSelection();
  5.         return rows;
  6. }
复制代码




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2