代码改变世界

ASP.NET DEMO 11: 两个 ListBox 互选(服务器端与客户端版本)

2007-07-18 04:44  晓风残月  阅读(984)  评论(0编辑  收藏
看似简单的问题, CSDN 中每每有人提问,故整理之

事实上,主要是如何考虑遍历元素个数变化的动态集合(因为遍历过程要执行删除)
特别是对于 C# ,不能使用 foreach,foreach 是只读遍历的。

服务器端版本
 // 方法1,正序遍历
    private void SwapListBox(ListBox src, ListBox dst)
    
{
        
for (int i = 0; i < src.Items.Count; ) {
            ListItem item 
= src.Items[i];
            
if (item.Selected) {
                src.Items.Remove(item);
                
// 保持选中状态
                item.Selected = ((dst.SelectionMode == ListSelectionMode.Multiple || dst.SelectedIndex < 0? item.Selected : false);
                dst.Items.Add(item);
                
continue;
            }

            i
++;
        }

    }


    
// 方法1,倒序遍历
    private void SwapListBox2(ListBox src, ListBox dst)
    
{
        
for (int i = src.Items.Count - 1; i >= 0;i-- ) {
            ListItem item 
= src.Items[i];
            
if (item.Selected) {
                src.Items.Remove(item);
                
// 保持选中状态
                item.Selected = ((dst.SelectionMode == ListSelectionMode.Multiple || dst.SelectedIndex < 0? item.Selected : false);
                dst.Items.Add(item);
            }

        }

    }

客户端版本
// 方法1,正序遍历
    function SwapListBox(srcId, dstId)
    
{
        
//debugger;
        var src = document.getElementById(srcId);
        
var dst = document.getElementById(dstId);
        
for (var i = 0; i < src.options.length; ) {
            
var opt = src.options[i];
            
if (opt.selected) {
                src.options[i] 
= null// 设置空引用,则直接删除
                // 保持选中状态
                opt.selected = ((dst.multiple || dst.selectedIndex < 0? opt.selected : false);
                dst.options[dst.options.length] 
= opt; // 追加项,dst.options[dst.options.length],js 数组特有的语法,不需要显示 add
                continue;
            }

            i
++;
        }

    }

    
    
// 方法2,反序遍历
    function SwapListBox2(srcId, dstId)
    
{        
        
var src = document.getElementById(srcId);
        
var dst = document.getElementById(dstId);
        
for (var i = src.options.length - 1; i >=0; i--{
            
var opt = src.options[i];
            
if (opt.selected) {
                src.options[i] 
= null// 设置空引用,则直接删除
                // 保持选中状态
                opt.selected = ((dst.multiple || dst.selectedIndex < 0? opt.selected : false);
                dst.options[dst.options.length] 
= opt;
            }

        }

    }

页面效果


完整源码
下载