实用穿梭框

在实际的开发过程中，有时我们会用到穿梭框，尤其是内容条目数不是很多的时候，因为这样既直观又方便，本例的效果图如下：

大家既然找到了这里，就是不想自己从零开始编一个穿梭框，想找一个简单实用插件的直接用，这就是你们想要的东西。过多的话就不说了，强调一点，一定要在“已开通权限（left）”和“未开通权限（right）”初始化之后，再执行$("#ued-transfer-1").transferItem();，加载数据就用ajax呗。

主要代码如下：

<script type="text/javascript">
    $(function () {            
        bindUserType();
        
    });

    function bindUserType() {
        $.ajax({
            type: "get",
            async: false,
            url: "/Sys/Sys_Dictionary/GetActiveChildList",
            data: "parentCode=" + @((int)FirstDictionary.用户类型),
            dataType: "json",
            success: function (data) {
                data.forEach(function (item, index) {
                    $("<option value='" + item.dictCode + "'>" + item.dictName + "</option>").appendTo("#ddlUserType");
                });                    
            },
            error: function (err) { }
        });
    }

    function bindValue(ddlUserType) {
        var userType = ddlUserType.value;
        $.ajax({
            type: "get",                
            url: "/Sys/Sys_UsertypeOpenPermission/GetValue",
            data: "userType=" + userType,
            dataType: "json",
            success: function (data) {
                var selectedValue = data.selected;
                var unselectedValue = data.unselected;
                bindSelectedValue(selectedValue);
                bindUnSelectedValue(unselectedValue);
                $("#ued-transfer-1").transferItem();
            },
            error: function (err) { }
        });
    }

    function bindSelectedValue(selectedValue) {
        $(".transfer-list-left .ty-tree-select").empty();
        selectedValue.forEach(function (item, index) {
            $("<li>"+
                  "<div class=\"ty-tree-div\">"+
                  "<label class=\"tyue-checkbox-wrapper\">"+
                      "<span class=\"tyue-checkbox\">"+
                          "<input type=\"checkbox\" class=\"tyue-checkbox-input\" id=\"tyue-checkbox-blue\" personalAccountOpenPermission='" + item.personalAccountOpenPermission+"'>"+
                      "</span>"+
                      "<span class=\"tyue-checkbox-txt\" title=\"" + item.personalAccountOpenPermissionName+"\">"+
                          item.personalAccountOpenPermissionName+
                      "</span>"+
                  "</label>"+
                  "</div>"+
              "</li >")
                .appendTo(".transfer-list-left .ty-tree-select");
        });
    }

    function bindUnSelectedValue(unselectedValue) {
        $(".transfer-list-right .ty-tree-select").empty();
        unselectedValue.forEach(function (item, index) {
            $("<li>" +
                  "<div class=\"ty-tree-div\">" +
                  "<label class=\"tyue-checkbox-wrapper\">" +
                      "<span class=\"tyue-checkbox\">" +
                          "<input type=\"checkbox\" class=\"tyue-checkbox-input\" id=\"tyue-checkbox-blue\" personalAccountOpenPermission='" + item.dictCode+"'>" +
                      "</span>" +
                      "<span class=\"tyue-checkbox-txt\" title=\"" + item.dictName + "\">" +
                          item.dictName +
                      "</span>" +
                  "</label>" +
                  "</div>" +
              "</li >")
                .appendTo(".transfer-list-right .ty-tree-select");
        });
    }

    $("#btnSave").click(function () {            
        var selectedUserType = $("#ddlUserType :selected");
        if (selectedUserType.length != 1) {
            alert("只能选择一种用户类型！");
            return;
        }
        var userType = $("#ddlUserType").val();
        var selectedOptions = $('.transfer-list-left .ty-tree-select .tyue-checkbox-input');
        var unselectedOptions = $('.transfer-list-right .ty-tree-select .tyue-checkbox-input');
        var selectedValue = "";
        var unselectedValue = "";
        for (var i = 0; i < selectedOptions.length; i++) {
            selectedValue += $(selectedOptions[i]).attr("personalAccountOpenPermission") + ",";
        }
        for (var i = 0; i < unselectedOptions.length; i++) {
            unselectedValue += $(unselectedOptions[i]).attr("personalAccountOpenPermission") + ",";
        }
        if (selectedValue == "") {
            alert("至少保留一种已开通权限！");
            return;
        }            
        $.ajax({
            type: "get",
            url: "/Sys/Sys_UsertypeOpenPermission/SaveChanges",
            data: "userType=" + userType + "&selectedValue=" + selectedValue + "&unselectedValue=" + unselectedValue,
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    alert(data.message);
                } else {
                    alert(data.message);
                }
            },
            error: function (err) { }
        });
    });
</script>

function bindLeftClick() {
    //若一次选择多项，那这些项的管理员必须是同一人
    //使用 click() 方法添加的事件处理程序仅适用于当前元素
    //使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素
    $(".transfer-list-left").on("click",'.tyue-checkbox-input',function () {
        var resourceName = $(this).attr("resourceName");
        var groupMnager = resourceName.split('|')[1];
        //选中了资源
        if ($(this).prop("checked")) {
            //当第一次选中时将其他管理员的资源改为不可选择状态
            if ($(".transfer-list-left .tyue-checkbox-input:checked").length < 2) {
                $(".transfer-list-left .tyue-checkbox-input:not([resourceName$='" + groupMnager + "'])").attr("disabled", "true");
            }
        } else {
            if ($(".transfer-list-left .tyue-checkbox-input:checked").length < 1) {
                //没有任何已选择的资源
                if ($(".transfer-list-right .tyue-checkbox-input").length < 1) {
                    $(".transfer-list-left .tyue-checkbox-input").removeAttr("disabled");
                }
            }
        }
    });
}

$(".ty-transfer-btn-toleft").click(function () {
    var length = $(".transfer-list-right .tyue-checkbox-input:not(:checked)").length;
    var leftLength = $(".transfer-list-right .tyue-checkbox-input:checked").length;
	//当右边所有的资源都已选中且左边没有选中的资源
    if (length < 1 && leftLength<1) {
        $(".transfer-list-left .tyue-checkbox-input").removeAttr("disabled");
    }
});

我这是在网上找的资源又自己做了修改，实测还是不错。若对您有帮助，请点个赞给个评论。

为了方便大家分享工作心得、交流技术问题，我创建了QQ群389591879，
大家也可以在里边相互了解各自公司的信息，希望能对大家有所帮助，同道中人欢迎加群。

 插件下载地址：https://download.youkuaiyun.com/download/xiaouncle/10916700