Eayui系列之实现列表选择功能
【摘要】 在做一个列表选择的功能,要实现一个Jquery列表选择器的效果,如图就是很常见的一种列表选择器 不过网上开源的可能要积分,资料没找到合适的,所以自己就简单写了一下,其实实现也不是很难。实现思路:左边双击之后获取元素,在右边附加上就好,右边选择列表双击之后就移除元素 实现效果:
因为系统功能是easyui做的,页面左边是一个table,也是easyui的datagr...
在做一个列表选择的功能,要实现一个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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
给右边的列表加上选择后就改变颜色为蓝色的css代码:
#selectedList tr:hover{ background-color: #99ccff; color: #252525; cursor: pointer; } #selectedList tr:selected{ background-color: #0095E8; color: #fff; }
- 1
- 2
- 3
- 4
- 5
- 6
主要函数是调用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); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
$('#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); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
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); } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
右边列表双击可以移除元素:
function removeNodeToList(areaSeq){ $("#selectedList").find("#"+areaSeq).remove();
}
- 1
- 2
- 3
思路:左边双击之后获取元素,在右边附加上就好,右边选择列表双击之后就移除元素
文章来源: smilenicky.blog.csdn.net,作者:smileNicky,版权归原作者所有,如需转载,请联系作者。
原文链接:smilenicky.blog.csdn.net/article/details/87897382
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)