设计大概是这个样子的,很简单,两个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. WordPress 页面点击显不同颜色爱心

    在主题的页脚添加以下js即可实现 <script type="text/javascript"> /* * https://www.xianjieo.cn */ !fu ...

  2. Struts2中Action类的三种写法

      一.普通的POJO类(没有继承没有实现)-基本不使用 POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创 ...

  3. java--CharAt,StartWith

    public class CharAtStartWithDemo { public static void main(String[] args){ //jdk8 testCharAt();//1 t ...

  4. Day One-Python基础

    Python第一节 安装教程就不发了,太心累了!大家可以上百度查,网上都会有 python种类 JavaPython cPython pypy 两种编码  字节码 和 机器码 unicode utf8 ...

  5. 测试demo 配置

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  6. JMeter ServerAgent服务器资源监控插件

    本文介绍对Linux服务器的服务进行压测时,使用jmeter serverAgent插件监控服务器资源. 1.插件准备 所需插件: JMeterPlugins-Extras.jar JMeterPlu ...

  7. flutter环境搭建及跑起来demo(多图慎入)

    话不多说,直接上 [1]环境搭建 从git上面clone下来 git clone -b beta https://github.com/flutter/flutter.git 由于国内网络的问题,我就 ...

  8. webpack4.16压缩打包

    webpack4.16压缩打包 本文所用插件版本如下: nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快,差不多几个月就会出一版,最新的4系列 ...

  9. Android 架构师技能图谱

    # Android 架构师技能图谱 ## 架构与设计 - 设计模式 - 重构 - 技术选型 - 特性 - 可用性 - 性能 - 包大小 - 方法数 - 文档 - 技术支持 - UI架构模式 - MVC ...

  10. ceph-报错日志

    由于时钟不一致问题,导致ceph存储有问题 clock skew时钟偏移overalladj. 全部的:全体的:一切在内的stampedadj. 铭刻的:盖上邮戳的:顿足的 beaconvt. 照亮, ...