jQuery MiniUI

标题: 提个建议，关于datagrid 的虚拟滚动 [打印本页]

作者: 3078825 时间: 2013-4-9 03:02:50 标题: 提个建议，关于datagrid 的虚拟滚动

本帖最后由 3078825 于 2013-4-9 03:07 编辑

当启动虚拟滚动的时候，右边的滚动条根据返回的数据total来决定滚动条长度，
在拖动滚动条放开后，进行json请求数据，传递pageIndex pageSize 来获取新数据进行补充

可以定义最初从第一页显示还是最初最后一页来显示。

实际上就是分页pagebar改成滚动条来控制分页。

这样，虚拟滚动的功能才能够最大化。
否则虚拟滚动只是个渲染不渲染表格的功能而已。

还有， un还是不能用。

能举个详细的例子吗？

<div style="width:800px;">
      <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
         <table style="width:100%;">
            <tr>
                  <td style="width:100%;">
                     <a class="mini-button" iconCls="icon-add" plain="true">加载</a>
                  </td>
            </tr>
         </table>
      </div>
</div>
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" idField="id"
      allowResize="true" pageSize="20"
      allowCellEdit="true" allowCellSelect="true" multiSelect="true"
      editNextOnEnterKey="true"
>
      <div property="columns">
         <div type="checkcolumn"></div>
         <div field="loginname" allowResize="false" width="120" headerAlign="center" allowSort="true">员工帐号
            <input property="editor" class="mini-textbox" style="width:100%;" />
         </div>
         <div field="age" width="100" allowSort="true" >年龄
            <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
         </div>
         <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
            <input property="editor" class="mini-datepicker" style="width:100%;"/>
         </div>
         <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
            <input property="editor" class="mini-textarea" style="width:100%;" minHeight="50"/>
         </div>
         
         <div type="comboboxcolumn" autoShowPopup="true" name="gender" field="gender" width="100" allowSort="true"  align="center" headerAlign="center">性别
            <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />
         </div>
         
         <div type="comboboxcolumn" field="country" width="100" headerAlign="center" >国家
            <input property="editor" class="mini-combobox" style="width:100%;" url="../data/countrys.txt" />
         </div>
         <div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div>
      </div>
</div>

js:
function loading()
{
   var datagrid = mini.get('datagrid1');
   datagrid.set({url:'../data/AjaxService.aspx?method=SearchEmployees'});
   datagrid.load();
   datagrid.on('drawcell',function(e){
         alert('test');
         var record = e.record,column = e.column;
         if (column.field == "loginname") {
               e.cellHtml = "会员:"+e.row.loginname;
         }
   });
   datagrid.un('drawcell');//这里不能unbind掉这个drawcell，导致重复调用drawcell里面的代码
   datagrid.un('drawcell',null);//尝试过无效
   datagrid.un('drawcell',function(e){});//尝试过无效
   datagrid.un('drawcell',function(e){
         alert('test');
         var record = e.record,column = e.column;
         if (column.field == "loginname") {
               e.cellHtml = "会员:"+e.row.loginname;
         }
   });//亦尝试过无效
}

作者: factory 时间: 2013-4-9 10:17:56

1.http://www.miniui.com/BigTest/10000-datagrid.html
这个其实就是根据滚动条的位置，充当分页，来加载数据的

2.function click(){...}

button.on("click",click);
button.un("click",click);

作者: 3078825 时间: 2013-4-9 13:57:26

factory 发表于 2013-4-9 10:17
1.http://www.miniui.com/BigTest/10000-datagrid.html
这个其实就是根据滚动条的位置，充当分页，来加载数 ...

试过无效，你看我帖子的代码有问题吗？
注释处都换过，没办法取消

虚拟滚动我好像没看到有提交pageSize.不知是否是代码没搞对

作者: factory 时间: 2013-4-9 14:22:08

3078825 发表于 2013-4-9 13:57
试过无效，你看我帖子的代码有问题吗？
注释处都换过，没办法取消

你绑定的时候这样写
grid.on("drawcell", XXX);
然后解除这样解除grid.un("drawcell", XXX);

function XXX(e) {
......
}

作者: 3078825 时间: 2013-4-9 14:32:31

factory 发表于 2013-4-9 14:22
你绑定的时候这样写
grid.on("drawcell", XXX);
然后解除这样解除grid.un("drawcell", XXX);

明白你意思了，写函数名，而不是写个函数方法。

我看来是习惯jquery的方式了

作者: 3078825 时间: 2013-4-9 14:33:03

factory 发表于 2013-4-9 14:22
你绑定的时候这样写
grid.on("drawcell", XXX);
然后解除这样解除grid.un("drawcell", XXX);

但虚拟滚动我好像也调不通。没看到拖动滚动条的时候有提交数据

作者: factory 时间: 2013-4-9 16:47:25

3078825 发表于 2013-4-9 14:33
但虚拟滚动我好像也调不通。没看到拖动滚动条的时候有提交数据

官网的demo是本地生成的，静态的，所以你用工具看不到跟后台的交互

作者: 3078825 时间: 2013-4-10 17:18:03

factory 发表于 2013-4-9 16:47
官网的demo是本地生成的，静态的，所以你用工具看不到跟后台的交互

能写个例子吗？
官网的的确是js循环生成的，
那如果不是这样的话，该怎么去弄？我试了，
json返回total给他，他并不会有任何变化。

作者: factory 时间: 2013-4-11 09:27:30

3078825 发表于 2013-4-10 17:18
能写个例子吗？
官网的的确是js循环生成的，
那如果不是这样的话，该怎么去弄？我试了，

我们现在的virtualScroll只针对静态的数据，
你服务端的话，还是用分页来做吧

作者: 3078825 时间: 2013-4-11 17:52:04

factory 发表于 2013-4-11 09:27
我们现在的virtualScroll只针对静态的数据，
你服务端的话，还是用分页来做吧 ...

那实际上我一楼说的是没法实现的吧？
[attach]1569[/attach]

我是做成聊天对话框的形式的。
如果我一次性读取数据过多的话，对服务器来说压力还是很大的
所以我想做成一开始读取最后的几条聊天内容，滚动到最后一条，他往上拖动的时候，动态加载聊天内容显示出来。
但如果虚拟滚动是针对静态数据的，那我只能哭了

作者: factory 时间: 2013-4-12 09:23:54

3078825 发表于 2013-4-11 17:52
那实际上我一楼说的是没法实现的吧？

是的呢，现在是针对静态的数据

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)