设计大概是这个样子的,很简单,两个div,两个互移按钮,一个搜索框,要求搜索框输入时,触发待选框的搜索项

<input class="form-control" placeholder="请搜索待选科目" type="text" id="txtSearch" name="txtSearch" onkeyup="match()" style="width: 200px;">

<input type='checkBox' name='check' id="AllCheck" style="margin:10px 0 0 0"/>

<label class="col-xs-4 control-label"><span style="color:red">&nbsp;&nbsp;</span>待选</label>
<div class="col-xs-6" id="waitingSelect" style="overflow-y:auto;height:200px">
</div>

<a href="#" id="Yd" style="color:red;margin-top:50px;width:50px;height:50px;margin-left:-60px;">
<img src="~/images/buttonClick.png" />
</a>
<div style="margin-top:50px">
<a href="#" id="MoveRest" style="color:red;margin-top:800px;width:50px;height:50px;margin-left:-60px;">
<img src="~/images/moveRest.png" />
</a>
</div>

<label class="col-xs-4 control-label"><span style="color:red">&nbsp;&nbsp;</span>已选</label>
<div id="selected" class="col-xs-6" style="overflow-y:auto;height:200px">
</div>

如图所示,

下面是js实现

首先,自定义方法

/*
从Json数组按某个字段中模糊匹配记录
IN
array 数据列表
columnName 字段名称 仅限字符串类型
text 关键字

OUT
查找到的数据列表
*/
var MatchRecordsFromJsonArray = function (array, columnName, text) {
var result = [];
if ($.isArray(array)) {
for (var i = 0; i < array.length; i++) {
var rowItem = array[i];
for (var item in rowItem) {
if (item == columnName && rowItem[item].indexOf(text)>=0) {
result.push(rowItem);
}
}
}
}
return result;
}

/**
* 将sourcw中数据添加到tagetArr中
* @param {any} targetArr
* @param {any} source
* @key {any} key 主键
*/
var AddRange = function (targetArr, source,key) {
if ($.isArray(targetArr) && $.isArray(source)) {
for (var item in source) {
if (SearchRecordsFromJsonArray(targetArr, key, source[item][key]).length <= 0) {
targetArr.push(source[item]);
}
}
}
return targetArr;
}
/**
* 从targetArr中移除source中的项
* @param {any} targetArr
* @param {any} source
* @key {any} key 主键
*/
var RemoveRange = function (targetArr, source, key) {
var resultArr = [];
if ($.isArray(targetArr) && $.isArray(source)) {
for (var item in targetArr) {
if (SearchRecordsFromJsonArray(source, key, targetArr[item][key]).length <= 0) {
resultArr.push(targetArr[item]);
}
}
}
targetArr = resultArr;
return targetArr;
}

/**
* 左右选择列表元数据
* */
var selectedArea = {
LeftList: [],
RightList:[]

};
/**
* 根据元数据重新加载选择列表
* @param {any} obj
*/
function ReloadSelectArea(obj) {
$("#waitingSelect").html('');
$("#selected").html('');
var leftDisplayItems = MatchRecordsFromJsonArray(selectedArea.LeftList, "expenseName", $("#txtSearch").val());
LoadSelectAreaItems("#selected", obj["RightList"], "expenseListId", "expenseName");
LoadSelectAreaItems("#waitingSelect", leftDisplayItems, "expenseListId", "expenseName");
}
/**
* 、加载单侧选择列表
* @param {any} selector
* @param {any} arr
* @param {any} valueFeild
* @param {any} TextFeild
*/
function LoadSelectAreaItems(selector, arr, valueFeild, TextFeild) {
var container = $(selector);
container.html('');
for (var i in arr) {
container.append("<li style='list-style-type:none'><input type='checkBox' style='' value=" + arr[i][valueFeild] + ">" + arr[i][TextFeild] + "</li>");
}
}

//搜索框触发事件

function match() {
var matchResult = MatchRecordsFromJsonArray(selectedArea.LeftList, "expenseName", $("#txtSearch").val());
matchResult = RemoveRange(matchResult, selectedArea.RightList, "expenseListId");
LoadSelectAreaItems("#waitingSelect", matchResult, "expenseListId", "expenseName");
}

/**
* 从左往右移
* @param {any} leftId
*/
function MoveToRight(leftId) {
var selectedArray = [];
var leftSelector = "#" + leftId + " input[type='checkbox']";
var leftItems = document.querySelectorAll(leftSelector);
for (var i = 0; i < leftItems.length; i++) {
if (leftItems[i].checked) {
selectedArray.push({
expenseListId: leftItems[i].value,
expenseName: leftItems[i].nextSibling.nodeValue
});
}
}
selectedArea.LeftList=RemoveRange(selectedArea.LeftList, selectedArray, "expenseListId");
selectedArea.RightList=AddRange(selectedArea.RightList, selectedArray, "expenseListId");
ReloadSelectArea(selectedArea);
document.getElementById("AllCheck").checked = false;
}
/**
* 从右往左移
* @param {any} rightId
*/
function MoveToLeft(rightId) {
var selectedArray = [];
var rightSelector = "#" + rightId + " input[type='checkbox']";
var rigthItems = document.querySelectorAll(rightSelector);
for (var i = 0; i < rigthItems.length; i++) {
if (rigthItems[i].checked) {
selectedArray.push({
expenseListId: rigthItems[i].value,
expenseName: rigthItems[i].nextSibling.nodeValue
});
}
}
selectedArea.LeftList = AddRange(selectedArea.LeftList, selectedArray, "expenseListId");
selectedArea.RightList = RemoveRange(selectedArea.RightList, selectedArray, "expenseListId");
ReloadSelectArea(selectedArea);
document.getElementById("AllCheck").checked = false;
}

//注册左右互移事件

$(function () {
$('#Yd').on('click', function () {
MoveToRight("waitingSelect");
});

$('#MoveRest').on('click', function () {
MoveToLeft("selected");
});
});

//全选按钮

$("#AllCheck").click(function () {
var waitingSelect = document.getElementById("waitingSelect");
if ($(this).is(":checked")) {
for (var i = 0; i < waitingSelect.childNodes.length; i++) {
waitingSelect.childNodes[i].childNodes[0].checked = true;
}
}
else {
for (var i = 0; i < waitingSelect.childNodes.length; i++) {
waitingSelect.childNodes[i].childNodes[0].checked = false;
}
}
})

js两个数组去重后,绑定控件,并支持模糊搜索数组项以及数组互移的更多相关文章

  1. js中使用控件名和数组下标方式获取控件的值时失败

    在做界面展示时涉及到表单行项目的增加和删除时,我们一帮都使用js的脚本实现表单行的增加和删除,那么在进行表单的提交的时我们会再页面上进行提交数据的初步校验,进行数据的初步校验时,就要动态获取控件的值. ...

  2. Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画

    Android的动画的使用,请参考.Android的动画,在设计方面,我有点不太理解,觉得这样搞很怪,因为在控件动画后,即使设置了停留在动画结束时的位置,我们也确实看到了控件停在那个位置,但其实该控件 ...

  3. 对TControl和TWinControl相同与不同之处的深刻理解(每一个WinControl就相当于扮演了整个Windows的窗口管理角色,主要是窗口显示和窗口大小)——TWinControl就两个作用(管理子控件的功能和调用句柄API的功能)

    TControl是图形控件,它本身没有句柄,所以不能直接使用WINAPI显示,调整位置,发消息等等,只能想办法间接取得想要的效果,但是可以直接使用一些不需要句柄的API,比如InvalidateRec ...

  4. Dev控件GridView单元格绑定控件

    Dev控件GridView单元格绑定控件 //文本按钮 RepositoryItemButtonEdit btnFields = new RepositoryItemButtonEdit();//创建 ...

  5. asp.net学习之 数据绑定控件--表格绑定控件

    原文:asp.net学习之 数据绑定控件--表格绑定控件     数据绑定 Web 服务器控件是指可绑定到数据源控件,以实现在 Web 应用程序中轻松显示和修改数据的控件.数据绑定 Web 服务器控件 ...

  6. Android Studio使用butterknife库绑定控件ID注解

    在线导入butterknife的jar包 在Android-app-Open Module Settings下选中module下的app 选择Dependencies,点击右边的“+”,选择第一个:1 ...

  7. 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示

    原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...

  8. 移动端日历选择控件(支持Zepto和JQuery)

    移动端日历选择控件(支持Zepto和JQuery) <!DOCTYPE html> <html> <head> <meta charset="utf ...

  9. C# WPF 歌词控件(支持逐字定位描色效果)

    原文:C# WPF 歌词控件(支持逐字定位描色效果) 之前做了一个模仿网易云歌词的控件,实现了加载网易云歌词并能随音乐播放进度定位歌词.今天呢将在这个控件的基础上增加逐字定位描色功能,如下图效果(QQ ...

  10. .NET Framework的属性类对控件的支持功能

     ToolBoxItem 此属性为类特性.属于工具箱属性,可以设置当前控件是否在工具箱中显示,以及所在工具箱项的类型名称等信息.默认生成的控件都显示在工具箱中. 更多设计时属性介绍: 4.3 属性的 ...

随机推荐

  1. 对于一键退出APP功能实现的技术探讨

    在Android的开发过程中,会经常存在“一键退出APP”的需求.经过一段时间的整理,其主要实现方式有以下几种. 本质:一键结束当前APP的所有activity&一键结束当前APP进程,两者合 ...

  2. 蛋疼的 403 Forbidden You don’t have permission to access / on this server.

    参考博文: a.http://www.linuxidc.com/Linux/2016-09/134827.htm 这个解释挺好 昨天配置新服务器:以为自己老手  就一步到位结果一直出现 403 For ...

  3. how to use gflags

    参考https://blog.csdn.net/jcjc918/article/details/50876613 安装: git clone https://github.com/gflags/gfl ...

  4. 某个应用的CPU使用率居然达到100%,我该怎么做?(三)

    某个应用的CPU使用率居然达到100%,我该怎么做?(三) 1. 引 你们好,可爱的小伙伴们^_^! 咱们最常用什么指标来描述系统的CPU性能呢?我想你的答案,可能不是平均负载,也不是CPU上下文切换 ...

  5. Codeforces 1190C Tokitsukaze and Duel game

    题意:有一个长为n的01串,两个人轮流操作,每个人可以把某个长度为m的区间变成相同颜色,谁在操作后整个串颜色相同就赢了.问最后是谁赢?(有可能平局) 思路:容易发现,如果第一个人不能一击必胜,那么他就 ...

  6. C++ 使用老牌库xzip & unzip对文件进行压缩解压

    原文链接 https://www.codeproject.com/Articles/7530/Zip-Utils-clean-elegant-simple-C-Win https://www.code ...

  7. MUI 自定义从底部弹出的弹出框内容

    最近做的项目都是在使用mui做手机网页,大致是下面的这种弹出效果 首先,引入 mui.css或者mui.min.css 引入 mui.min.js或者mui.js 第二步:<a href=&qu ...

  8. Mybatis基于接口注解配置SQL映射器(二)

    Mybatis之增强型注解 MyBatis提供了简单的Java注解,使得我们可以不配置XML格式的Mapper文件,也能方便的编写简单的数据库操作代码.但是注解对动态SQL的支持一直差强人意,即使My ...

  9. PHP readdir() 函数

    打开一个目录,读取它的内容,然后关闭: <?php$dir = "/images/"; // Open a directory, and read its contentsi ...

  10. 06-图2 Saving James Bond - Easy Version(25 分)

    This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...