跳到主要內容

fancytree ListBox 2 ListBox

標籤：

//功能樹
$(function () {

    $("#funcTree").fancytree({
        checkbox: false,
        selectMode: 3,
        source: {
            url: $("#funcTree").attr("treesrc")
        },
        click: function (event, data) {
            if (data.node.key.split("_").length == 4) {
                   //alert(data.node.key + "/" + data.node.title);
              }
        },
        cookieId: "funcTree",
        idPrefix: "funcTree_"
    });
});

//按鈕-儲存&立即啟動
function BtnExecute(obj) {
    $.ajax({
        url: $(obj).attr('act'),
        type: "POST",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        cache: false,
        success: function (response) {
            if (response.RESULT == "OK") {
                location.href = $(obj).attr('result');
            }
        }
    });
}

//按鈕-儲存
function BtnSave(obj) {
    $.ajax({
        url: $(obj).attr('act'),
        type: "POST",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        cache: false,
        success: function (response) {
            if (response.RESULT == "OK") {
                location.href = $(obj).attr('result');
            }
        }
    });
}

//右移
$(function () {
    $('#btnRight').click(function (e) {
        $("#UserList option:selected").each(function () {
            var item = " <li class='ui-widget-content'  id='" + $(this).val().replace("_R", "").replace("_A", "").replace("_L", "") + "'> ";
            item += " <i style='color:blue' class='fa fa-check' aria-hidden='true'></i> " + $(this).text();
            item += " <input type='button' class='cnnFormButton' value='還原' onclick='addRecovery(\"" + $(this).text() + "\")' /> ";
            item += " </li> ";
            var val = $(this).val().trim();        
            if (val.indexOf("_") >= 0) { val = val.split("_")[0]; }
            $("#modifyList li[id *= '" + val + "']").remove();
         
            val = $(this).val().trim();
            if (val.indexOf("_L") > 0 || val.indexOf("_A") > 0) {
                    $("#modifyList").append(item);            
            }
            else if (val.indexOf("_R") == -1 && val.indexOf("_A") == -1 && val.indexOf("_L") == -1)
            {
                $("#modifyList").append(item);
            }
        });
     
        var selectedOpts = $('#UserList option:selected');
        if (selectedOpts.length == 0) {
            alert("請選擇人員清單!");
            e.preventDefault();
        }
        //$('#RoleUserList').append($(selectedOpts).clone());
        for (var i = 0; i < $(selectedOpts).length ; i++) {
            $('#RoleUserList').append("<option value='" + $(selectedOpts)[i].value.replace("_L", "")  + "_L'>" + $(selectedOpts)[i].text + "</option>");
        }
        $(selectedOpts).remove();
        var sel = $('#RoleUserList');
        var selected = sel.val();
        var opts_list = sel.find('option');
        opts_list.sort(function (a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
        sel.html('').append(opts_list);
        sel.val(selected);
        e.preventDefault();
    });

    //全右移
    $('#btnAllRight').click(function (e) {
        $("#UserList option").each(function () {
            var item = " <li class='ui-widget-content'  id='" + $(this).val().replace("_R", "").replace("_A", "").replace("_L", "") + "'> ";   
            item += " <i style='color:blue' class='fa fa-check' aria-hidden='true'></i> " + $(this).text();
            item += " <input type='button' class='cnnFormButton' value='還原' onclick='addRecovery(\"" + $(this).text() + "\")' /> ";
            item += " </li> ";
            var val = $(this).val().trim();
            if (val.indexOf("_") >= 0) { val = val.split("_")[0]; }
            $("#modifyList li[id *= '" + val + "']").remove();
            val = $(this).val().trim();
            if (val.indexOf("_L") > 0 || val.indexOf("_A") > 0) {
                    $("#modifyList").append(item);          
            }
            else if (val.indexOf("_R") == -1 && val.indexOf("_A") == -1 && val.indexOf("_L") == -1) {
                $("#modifyList").append(item);
            }
        });
        var selectedOpts = $('#UserList option');
        if (selectedOpts.length == 0) {
            alert("請選擇人員清單!");
            e.preventDefault();
        }
        //$('#RoleUserList').append($(selectedOpts).clone());
        for (var i = 0; i < $(selectedOpts).length ; i++) {
            $('#RoleUserList').append("<option value='" + $(selectedOpts)[i].value.replace("_L", "") + "_L'>" + $(selectedOpts)[i].text + "</option>");
        }
        $(selectedOpts).remove();
        var sel = $('#RoleUserList');
        var selected = sel.val();
        var opts_list = sel.find('option');
        opts_list.sort(function (a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
        sel.html('').append(opts_list);
        sel.val(selected);
        e.preventDefault();
    });

    //左移
    $('#btnLeft').click(function (e) {
        $("#RoleUserList option:selected").each(function () {
            var item = " <li class='ui-widget-content'  id='" + $(this).val().replace("_R", "").replace("_A", "").replace("_L", "") + "'> ";
            item += " <i style='color:red' class='fa fa-times' aria-hidden='true'></i>" + $(this).text();
            item += " <input type='button' class='cnnFormButton' value='還原' onclick='delRecovery(\"" + $(this).text() + "\")' /> ";
            item += " </li> ";
            var val = $(this).val().trim();
            if (val.indexOf("_") >= 0) { val = val.split("_")[0]; }
            $("#modifyList li[id *= '" + val + "']").remove();
            val = $(this).val().trim();
            if (val.indexOf("_R") > 0) {
                $("#modifyList").append(item);
            }         
        });
        var selectedOpts = $('#RoleUserList option:selected');
        if (selectedOpts.length == 0) {
            alert("請選擇角色人員!");
            e.preventDefault();
        }
     
        //$('#UserList').append($(selectedOpts).clone());
        for (var i = 0; i < $(selectedOpts).length ; i++) {         
            $('#UserList').append("<option value='" + $(selectedOpts)[i].value.replace("_R", "") + "_R'>" + $(selectedOpts)[i].text + "</option>");
        }
        $(selectedOpts).remove();
        var sel = $('#UserList');
        var selected = sel.val();
        var opts_list = sel.find('option');
        opts_list.sort(function (a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
        sel.html('').append(opts_list);
        sel.val(selected);
        e.preventDefault();
    });

    //全左移
    $('#btnAllLeft').click(function (e) {
        $("#RoleUserList option").each(function () {
            var item = " <li class='ui-widget-content'  id='" + $(this).val().replace("_R", "").replace("_A", "").replace("_L", "") + "'> ";
            item += " <i style='color:red' class='fa fa-times' aria-hidden='true'></i>" + $(this).text();
            item += " <input type='button' class='cnnFormButton' value='還原' onclick='delRecovery(\"" + $(this).text() + "\")' /> ";
            item += " </li> ";
            var val = $(this).val().trim();
            if (val.indexOf("_") >= 0) { val = val.split("_")[0]; }
            $("#modifyList li[id *= '" + val + "']").remove();
            val = $(this).val().trim();
            if (val.indexOf("_R") > 0) {
                $("#modifyList").append(item);
            }
        });
        var selectedOpts = $('#RoleUserList option');
        if (selectedOpts.length == 0) {
            alert("請選擇角色人員!");
            e.preventDefault();
        }
     
        //$('#UserList').append($(selectedOpts).clone());
        for (var i = 0; i < $(selectedOpts).length ; i++)
        {
            $('#UserList').append("<option value='" + $(selectedOpts)[i].value.replace("_R", "") + "_R'>" + $(selectedOpts)[i].text + "</option>");
        }
        $(selectedOpts).remove();
        var sel = $('#UserList');
        var selected = sel.val();
        var opts_list = sel.find('option');
        opts_list.sort(function (a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
        sel.html('').append(opts_list);
        sel.val(selected);
        e.preventDefault();
    });
});

//生效日
$(function () {
    $("#effectDate").datepicker({
        dateFormat: "yy/mm/dd",
        dafaultDate: new Date(),
        minDate: new Date()
    });
});

//加入角色人員
$(function () {
    $("#btnAddNewRoleUser").click(function () {
        //var usr = $("#txtNewUser").val() + "&nbsp;張大天";
        //$("#RoleUserList").append("<option> "+ usr +" </option>");
    })
});

//取得人員資訊
function GetUser() {
    var strUserId = $("#txtNewUser").val();   
    if (null == strUserId || "" == strUserId) {
        //$("#RoleUserList").html("");
    } else {
        var urlGetEmployee = $("#urlGetEmployee").val();
        var data = {};
        data.usrId = strUserId;
        $.ajax({
            url: urlGetEmployee,
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            cache: false,
            success: function (response) {  
                //$("#lblUserNme").html(response.USR_ID + " " + response.USR_NME + " " + response.DEPT_ID + " " + response.DEPT_NME);           
                var usrIdName = response.USR_ID + " " + response.USR_NME
                var exists = false;
                $('#RoleUserList option').each(function () {
                    var val = $(this).val();
                    if (val.indexOf("_") >= 0) { val = val.split("_")[0]; }
                    if (val == response.USR_ID) {
                        exists = true;
                        alert("員工編號已存在!");                     
                    }
                });
                $('#UserList option').each(function () {
                    var val = $(this).val();
                    if (val.indexOf("_") >= 0) { val = val.split("_")[0]; }
                    if (val == response.USR_ID) {
                        exists = true;
                        alert("員工編號已存在!");
                    }
                });
                if (!exists) {
                    $("#RoleUserList").append("<option value='" + response.USR_ID + "_A'> " + usrIdName + " </option>");
                    $("#txtNewUser").val("");
                    var item = " <li class='ui-widget-content'  id='" + response.USR_ID + "'> ";
                    item += " <i style='color:blue' class='fa fa-check' aria-hidden='true'></i> " + usrIdName;
                    item += " <input type='button' class='cnnFormButton' value='還原' onclick='addRecovery(\"" + usrIdName + "\")' /> ";
                    item += " </li> ";
                    $("#modifyList").append(item);
                }
            }
        });
    }
}

$(function () {
    $("#modifyList").selectable();
});

//加入還原
function addRecovery(obj) {
    var targetText = obj.trim().split(" ");
    $("#UserList").append('<option value="' + targetText[0] + '">' + targetText[0] + ' ' + targetText[1] + '</option>');
    var targetValue = targetText[0];
    $("#" + targetValue).remove();    
    $("#RoleUserList option[value*=" + targetValue + "]").remove();
}

//刪除還原
function delRecovery(obj) {
    var targetText = obj.trim().split(" ");
    $("#RoleUserList").append('<option value="' + targetText[0] + '">' + targetText[0] + ' ' + targetText[1] + '</option>');
    var targetValue = targetText[0];
    $("#" + targetValue).remove();
    $("#UserList option[value*=" + targetValue + "]").remove();
}

function  GetmodifyList()
{     
    $('#modifyList').each(function (i, ol) {
        $(ol).find('li').each(function (j, li) {
            var action =   (li.innerHTML.indexOf("addRecovery") >= 0)  ?  "ADD" : "DEL" ;
            alert($(li).attr("id") + "/" + action);
        });
    });
}