@{
    ViewBag.Title = "部门人员";
}
<table class="t1" style="width:100%">
    <tr>
        <td colspan="2" style="text-align:center"><h3>请选择人员</h3></td>
    </tr>
    <tr>
        <td class="ltd" style="width:80px">名称：</td>
        <td class="rtd">
        <label><input name="ksOneself" type="checkbox" value="1" />本科室</label>
        <input type="text" class="l-text" style="width:120px" id="key" />
        <input type="button" class="l-button" value="查询" onclick="f_search()" /></td>
    </tr>
    <tr>
        <td class="ltd">未选择</td>
        <td class="rtd" style="height:150px;vertical-align:top">
            <div id="nsel" style="overflow:auto;width:100%;height:100%"></div>
        </td>
    </tr>
    <tr>
        <td class="ltd">已选择</td>
        <td class="rtd" style="height:60px;vertical-align:top">
            <div id="sel" style="overflow:auto;width:100%;height:100%"></div>
        </td>
    </tr>
    <tr>
        <td style="text-align:center" colspan="2">
            <input type="button" class="l-button" value="确定" onclick="f_ok()" />
        </td>
    </tr>
</table>
<input type="hidden" id="vsel" />
<input type="hidden" id="vselname" />
@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#vsel").val(getQueryString("selected"));
            if (getQueryString("selected") && getQueryString("selected").length > 0) {
                $.ajax("@Url.Action("getSelRYList")", {
                    type: "post", dataType: "json", data: {
                        selected: $("#vsel").val()
                    }, success: function (data) {
                        $("#sel").empty();
                        for (var i = 0; i < data.length; i++) {
                            var sp = $("<div class=\"yj1\"></div>");
                            var closediv = $("<img style=\"cursor: pointer\" src=\"@Url.Content("~/ligerUI/skins/Aqua/images/icon/icon-unselect.gif")\" />");
                            sp.attr("id", data[i].ID);
                            sp.html(data[i].TrueName);
                            closediv.bind("click", remove);
                            closediv.appendTo(sp);

                            sp.appendTo($("#sel"));
                            if (i == 0) {
                                $("#vselname").val(data[i].TrueName);
                            }
                            else {
                                $("#vselname").val($("#vselname").val() + ',' + data[i].TrueName);
                            }
                        }
                    }
                });
            }
            f_search();
        });

        function f_search() {
            var checkValues = "";   
            $('input[name="ksOneself"]:checked').each(function () {
                checkValues += $(this).val();
            });

            $.ajax("@Url.Action("getRYList")", {
                type: "post", dataType: "json", data: {
                    ksOneself: checkValues, selected: $("#vsel").val(), key: $("#key").val()
                }, success: function (data) {
                    $("#nsel").empty();
                    for (var i = 0; i < data.length; i++) {
                        var sp = $("<span class=\"yj\" id=\"" + data[i].ID + "\"></span> ");
                        var al = $("<a onclick=\"return select('" + data[i].ID + "', '" + data[i].TrueName + "',this)\" href=\"#\" > " + data[i].TrueName + "</a>");
                        al.appendTo(sp);
                        sp.appendTo($("#nsel"));
                    }
                }
            });
        }
        function select(id, text, me) {
            var tid = "," + id + ",";
            var tvsel = "," + $("#vsel").val() + ",";
            if (tvsel.indexOf(tid) == -1) {
                var sp = $("<div class=\"yj1\"></div>");
                var closediv = $("<img style=\"cursor: pointer\" src=\"@Url.Content("~/ligerUI/skins/Aqua/images/icon/icon-unselect.gif")\" />");
                sp.attr("id", id);
                sp.html(text);
                closediv.bind("click", remove);
                closediv.appendTo(sp);
                sp.appendTo($("#sel"));
                if ($("#vsel").val().length > 0) {
                    $("#vsel").val($("#vsel").val() + "," + id);
                }
                else {
                    $("#vsel").val(id);
                }
                if ($("#vselname").val().length > 0) {
                    $("#vselname").val($("#vselname").val() + "," + text);
                }
                else {
                    $("#vselname").val(text);
                }
                $(me).parent("span").remove();
            }
            return false;
        }

        function remove() {
            var p = $(this).parent("div");
            var id = p.attr("id");
            var text = p.text();
            var tvsel = "," + $("#vsel").val() + ",";
            tvsel = tvsel.replace("," + id + ",", ",");
            if (tvsel.indexOf(',') == 0)
                tvsel = tvsel.substring(1);
            if (tvsel.lastIndexOf(',') == tvsel.length - 1)
                tvsel = tvsel.substring(0, tvsel.length - 1);

            var tvselname = "," + $("#vselname").val() + ",";
            tvselname = tvselname.replace("," + text + ",", ",");
            if (tvselname.indexOf(',') == 0)
                tvselname = tvselname.substring(1);
            if (tvselname.lastIndexOf(',') == tvselname.length - 1)
                tvselname = tvselname.substring(0, tvselname.length - 1);

            $("#vsel").val(tvsel);
            $("#vselname").val(tvselname);
            var sp = $("<span class=\"yj\" id=\"" + id + "\"></span> ");
            var al = $("<a onclick=\"return select('" + id + "', '" + text + "',this)\" href=\"#\" > " + text + "</a>");
            al.appendTo(sp);
            sp.appendTo($("#nsel"));
            p.remove();
        }
        function f_ok() {
            if (window.parent.selectbm) {
                window.parent.selectbm($("#vsel").val(), $("#vselname").val());
            }
        }
    </script>
}
@section css{
    <style type="text/css">
        .yj {
            border-radius: 3px;
            margin: 3px;
            border: 1px solid #9999ff;
        }

        .yj1 {
            border-radius: 3px;
            margin: 3px;
            border: 1px solid #9999ff;
            font-size: 14px;
            width: auto;
            display: inline-block !important;
            display: inline;
            padding: 0 3px;
        }

        .yj a {
            text-decoration: none;
            margin: 2px;
            color: #999;
            cursor: pointer;
            font-size: 14px;
        }

            .yj a:hover {
                text-decoration: none;
                color: #666;
                font-size: 14px;
            }

        .jy:hover {
            background-color: #101010;
        }

        .fl {
            float: right;
        }
    </style>
}