Jquery+Eayui实现列表选择功能详解编程语言

在做一个列表选择的功能，要实现一个Jquery列表选择器的效果，如图就是很常见的一种列表选择器

不过网上开源的可能要积分，资料没找到合适的，所以自己就简单写了一下，其实实现也不是很难。实现思路：左边双击之后获取元素，在右边附加上就好，右边选择列表双击之后就移除元素
实现效果：

因为系统功能是easyui做的，页面左边是一个table，也是easyui的datagrid，所以就可以调对应方法获取双击某行的元素
创建前端页面：

<rapid:override name="content"> 
        <div region="west" split="true" title="待选列表" style="width:400px;" > 
            <div class="site-search" > 
                <div id="search"> 
                   <input type="text" name="s" class="text" id="areaName" placeholder="输入地区名称搜索" /> 
                   <button type="button" onclick="javascript:queryOption.doQuery(1);" class="submit">搜索</button> 
                </div> 
            </div> 
            <input type="hidden" value="${tipsSeq}" id="tipsSeq"/> 
            <table id="areaList"></table> 
        </div> 
        <div region="center" title="已选列表" style="border:0;"> 
            <table id="selectedList" style="width:100%;"></table> 
        </div> 
        <div region="south" > 
            <div align="right" style="height:31px;"> 
                <input type="button" onclick="javascript:treeOption.closeDialog();" value="取消" /> 
                <input type="button" onclick="javascript:treeOption.batchBind();" value="下一步" /> 
            </div> 
        </div> 
    </div>  
    </rapid:override>

给右边的列表加上选择后就改变颜色为蓝色的css代码：

#selectedList tr:hover{ 
                    background-color: #99ccff; color: #252525; cursor: pointer; 
                } 
                #selectedList tr:selected{ 
                    background-color: #0095E8; color: #fff; 
                }

主要函数是调用easyui的双击事件，然后将获取到的数据放在addNodeToList函数里再调用，下面给出easyui的所有代码和自己写的addNodeToList函数

onDblClickRow :function(rowIndex,rowData){ 
                        var selections = $("#areaList").datagrid('getSelections'); 
                        var areaSeq = selections[0].areaSeq; 
                        var areaName = selections[0].areaName; 
                        var status = selections[0].tipsAreaRelaStatus; 
                        if(status =='1'){ 
                            $.messager.alert("操作提示","已配置过该提示语，继续配置数据将覆盖旧数据！","warning"); 
                            return; 
                        } 
                        //添加节点 
                        addNodeToList(1,areaSeq,areaName,status); 
                    }

$('#areaList').treegrid({     
                    fit: true, 
                    nowrap: true,  
                    autoRowHeight: true, 
                    animate:true, 
                    scrollbarSize: 0, 
                    striped: true, 
                    collapsible:true, 
                    singleSelect:true, 
                    rownumbers:true, 
                    url:'/loadTipsAreaRelatedData.do?tipsSeq='+$("#tipsSeq").val(), 
                    idField:'areaSeq', 
                    treeField:'areaName', 
                    columns:[[ 
                        {field:'ck', checkbox: true, hidden:true}, 
                        {field:'areaSeq', hidden:true}, 
                        {field:'areaName',title:'地区名称',width:'60%'}, 
                        {field:'tipsAreaRelaStatus',title:'状态',width:'40%', 
                            formatter: function (val, rowdata, index) { 
                                if(val =='1'){ 
                                    return '<span style="color:#00B2EE;">已配置</span>'; 
                                }else{ 
                                    return '<span>未配置</span>'; 
                                } 
                            }    
                        } 
                    ]], 
                    onBeforeLoad:function(row,param){//加载之前 
                        if(row){ 
                            $(this).treegrid('options').url = '/loadSubTipsAreaRelatedData.do?tipsSeq='+$("#tipsSeq").val()+'&parentAreaSeq=' + row.areaSeq; 
                        }else{ 
                            $(this).treegrid('options').url = '/loadTipsAreaRelatedData.do?tipsSeq='+$("#tipsSeq").val(); 
                        } 
                    }, 
                    onDblClickRow :function(rowIndex,rowData){ 
                        var selections = $("#areaList").datagrid('getSelections'); 
                        var areaSeq = selections[0].areaSeq; 
                        var areaName = selections[0].areaName; 
                        var status = selections[0].tipsAreaRelaStatus; 
                        if(status =='1'){ 
                            $.messager.alert("操作提示","已配置过该提示语，继续配置数据将覆盖旧数据！","warning"); 
                            return; 
                        } 
                        //添加节点 
                        treeOption.addNodeToList(1,areaSeq,areaName,status); 
                    } 
                });

function addNodeToList(n,areaSeq,areaName,status){ 
                var tableStr = $("#selectedList"); 
                var trStr = "<tr id="+areaSeq 
                +" class='datagrid-row' ondblclick='javascript:removeNodeToList("+areaSeq+");''>" 
                +"<td>"+areaName+"</td></tr>"; 
                var tr = $("#selectedList").find("tr"); 
                var trNum = tr.length; 
                if(trNum == 0){ 
                    tableStr.append(trStr); 
                }else{ 
                    var count = 0; 
                    //思路是：遍历表格，如果有元素就再添加，没有那个元素就添加 
                    $("#selectedList tr").each(function(){ 
                        var id =$(this).attr("id"); 
                        if(areaSeq == id){ 
                            count++; 
                        }  
                    }); 
                    if(count==0){ 
                        tableStr.append(trStr); 
                    } 
                } 
            }

右边列表双击可以移除元素：

function removeNodeToList(areaSeq){ 
                $("#selectedList").find("#"+areaSeq).remove(); 
}

思路：左边双击之后获取元素，在右边附加上就好，右边选择列表双击之后就移除元素