实用穿梭框

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

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

主要代码如下：

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");
    }
});

 

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

 插件下载地址：https://download.csdn.net/download/xiaouncle/10916700