zoukankan      html  css  js  c++  java
  • js两个数组去重后,绑定控件,并支持模糊搜索数组项以及数组互移

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

    <input class="form-control" placeholder="请搜索待选科目" type="text" id="txtSearch" name="txtSearch" onkeyup="match()" style=" 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;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;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;
    }
    }
    })

  • 相关阅读:
    个人管理:2,3月微薄整理
    ORM相关图片整理
    LmgORM项目 实体类转换器
    (转)Enterprise Architect 7.0入门教程
    禁止右键复制的代码
    UML示例图(转)学习
    Flash FMS Helloword
    模拟生成Guid
    Flash Media Server安装
    WebSphere创建删除概要文件
  • 原文地址:https://www.cnblogs.com/jiuyueBlog/p/11984427.html
Copyright © 2011-2022 走看看