@{
    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"><input type="text" class="l-text" style="width:120px" id="ksmc" /><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("getSelKSList")", {
                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("ksid", data[i].id);
                        sp.html(data[i].bumenname);
                closediv.bind("click", remove);
                closediv.appendTo(sp);
                       
                        sp.appendTo($("#sel"));
                        if (i == 0) {
                            $("#vselname").val(data[i].bumenname);
                        }
                        else {
                            $("#vselname").val($("#vselname").val()+','+data[i].bumenname);

                        }
                    }
                }
            }
            );
            }
            f_search();
        });
        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("ksid", 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 f_search() {
            $.ajax("@Url.Action("getKSList")", {
                type: "post", dataType: "json", data: {
                    selected: $("#vsel").val(), ksmc: $("#ksmc").val()
                }, success: function (data) {
                    $("#nsel").empty();
                    for (var i = 0; i < data.length; i++) {
                        var ks = $("<span class=\"yj\" ksid=\"" + data[i].id + "\"></span> ");
                        var al = $("<a onclick=\"return select('" + data[i].id + "', '" + data[i].bumenname + "',this)\" href=\"#\" > " + data[i].bumenname + "</a>");
                        al.appendTo(ks);
                        ks.appendTo($("#nsel"));
                    }
                }
            }
            );
        }
        function remove() {
            var p = $(this).parent("div");
            var id = p.attr("ksid");
            var ksmc = 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("," + ksmc + ",", ",");
            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 ks = $("<span class=\"yj\" ksid=\"" + id + "\"></span> ");
            var al = $("<a onclick=\"return select('" + id + "', '" + ksmc + "',this)\" href=\"#\" > " + ksmc + "</a>");
            al.appendTo(ks);
            ks.appendTo($("#nsel"));
            //ks.html(ksmc);
            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>
}