- 注册时间
- 2013-2-26
- 最后登录
- 2013-5-23
- 阅读权限
- 10
- 积分
- 119
- 精华
- 0
- 帖子
- 31
|
本帖最后由 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>
<!--ComboBox:本地数据-->
<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>
<!--ComboBox:远程数据-->
<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;
}
});//亦尝试过无效
}
|
|