140622 大数据量的情况下的勾选:选择多个和取消多个

不用scroing, 用分页;但是要考虑跨页勾选后不保存的情况。

方式一:

成员: 成员A, 成员B   

1 点击下拉框勾选,下拉框自动选中当前文本中的内容。

2 支持即显示。即不提供确定选择按钮。这样可以避免跨页选择,但又不保存跨页结果的矛盾。如:

 取消某项目选择时,文本中的内容自动取消。而不是像之前点击确定保存后,重新保存的方式。

3 提供全选和清空当前页选择操作。同样,要求要符合第二点。

4 提供筛选操作。这里的筛选看情况,是另外做还是采用字段选择筛选操作。

5 若是要一个文本框显示全部结果,则必须提供鼠标文本显示所有内容的功能。但始终有个问题,就是不方便直接移除里面某个成员信息。

6 对所有当前选项进行清空。(下拉框提供清空所有。)

方式二:

在一基础上,将显示方式进行以下调整。

成员: 成员Ax  成员Bx +

方便直接移除某个成员信息。

如此一来,还要将页面构件对象进行调整。如bandbox取消,换成一般的popup+button。

两种方式虽然页面效果上区别不大,但是从代码角度上看,对象有区别。

实现:

 假设这里的关联是在一个字段维护的,字段信息为ID1,ID2,ID3......,IDN

1 提供model: 分页供选择的集合;支持过滤查询功能。

2 因为不在页面进来的时候进行加载,而是在点击打开的时候,故在打开的的时候要判断需不需要load下,避免重复Load。

3 根据当前情况页面结果设置哪些是选中项;最好弄个render实现。

4 支持下一页和上一页按钮功能。

5 选中、取消、全选中、全取消的功能;

6 Map(id, label)对应生成方式二提到的形式;

后续通用:

7 支持详情查看。由于每个详情页面有规则的存放在相应文件夹中,可以以此入手。

8 传选中的对象id, 要查的关联表, 显示字段

猜你喜欢

转载自alex-cheung.iteye.com/blog/2083396
今日推荐