@{
    ViewBag.Title = "Contacts";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
 body{background-color: #ffffff;}
.nav{height: 35px;line-height: 35px;padding-bottom: 6px;text-align: left;font-size: 15px;color: #18a689;border-bottom: 1px dotted #bebbbb;font-weight: 600;}
.nav .right{float: right;height: 35px;line-height: 35px;text-align: right;margin-bottom: 8px;}
.nav .right a{margin-right: 5px;}
.nav .right a:last-child{margin-right: 1px;margin-left: 5px;}
.title{line-height: 35px;margin: 5px 0;border-bottom: 1px solid #bebbbb;clear: both;font-size: 16px;}
.title span{width: 30px;padding: 2px 5px;margin-left: 5px;cursor: pointer;border: 1px solid #18a689;color: #1ab394;}
.title span:hover{background-color: #18a689;color: #ffffff;}
.title .active{background-color: #18a689;color: #ffffff;}
.show-content ul{list-style: none;line-height: 25px;color: #337ab7;display: inline-block;width: 90%; border-bottom:1px dashed #1ab394;}
.show-content span{float: left;width: 30px;padding: 2px 3px;margin-top:2px;border: 1px solid #18a689;color: #337ab7;font-size: 16px;display: block;text-align: center;}
.show-content ul li{float: left;width: 55px;margin-right: 15px;border: 1px solid #18a689;padding: 2px 3px;margin-bottom: 10px;text-align: center;}
.show-content ul li:hover{background-color: #18a689;color: #ffffff;cursor: pointer;}
.show-content .active{background-color: #18a689;color: #ffffff;}
</style>
<link href="/Content/js/silder/silder.css" rel="stylesheet" />
<div class="wrapper-content">
    <div class="nav">
        <div class="right">
            <span style="color:#ff0000;margin-top:3px;line-height:27px;">查询：</span>
            <input type="text" id="search"  style="height: 27px; background-color: #FFFFFF; border: 1px solid #ff0000; width: 100px; vertical-align:middle;padding:2px 5px !important;margin-top:2px; line-height:27px;color:#000000;font-weight:100;margin-right:-5px;" placeholder="请输入人名" />
            <a class="btn btn-primary p310" href="javascript:show()"><i class="im-undo2"></i> 搜索</a>
            @*&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="btn btn-warning p310" href="javascript:history.go(-1)"><i class="im-undo2"></i> 返回</a>*@
        </div>
    </div>
    <div class="title">
        <span class="active">全部</span>
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
        <span>E</span>
        <span>F</span>
        <span>G</span>
        <span>H</span>
        <span>I</span>
        <span>J</span>
        <span>K</span>
        <span>L</span>
        <span>M</span>
        <span>N</span>
        <span>O</span>
        <span>P</span>
        <span>Q</span>
        <span>R</span>
        <span>S</span>
        <span>T</span>
        <span>U</span>
        <span>V</span>
        <span>W</span>
        <span>X</span>
        <span>Y</span>
        <span>Z</span>
    </div>
    <div class="panel-body">
        <div class="tab-content">
            <div class="show-content">
              
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
        /*
        * 定义模板函数
        */
        var template = function (queryArr) {
            var count = '';
            for (var i = 0; i < queryArr.length; i++) {
                var e = queryArr[i];
                if ($express) {
                    //count++;
                    count += JSON.stringify(e) + ',';
                }
            }
            return count;
        }
        /*
         * 模板创建函数
        */
        var createIntance = function (exp) {
            var fun = template.toString().replace("$express", exp).toString();
            return eval("0," + fun);
        }
        /*
           * 设置LI选中状态，弹出个人名片
           * expand:t
           */
        function setCheck(t) {
            $('.show-content').children('div').find('ul>li').removeClass('active');
            $(t).addClass('active');
            dig.addModel('个人名片', '/Sys/User/Card/' + $(t).children('input[type="hidden"]').val(), 700, 450, function () { });
        }
        /*
        * 检索关键词
        */
        function show() {
            var search = $('#search').val();
            var sh = '';
            if (search != '' && search != undefined) {
                $('.show-content').children('div').find('ul>li').each(function () {
                    if ($(this).children('e').html().indexOf(search) >= 0 || $(this).children('input[type="hidden"]').attr('data-value').indexOf(search) >= 0 || $(this).children('input[type="hidden"]').attr('data-account').indexOf(search) >= 0) {
                        $(this).show();
                        sh += $(this).parent().prev().html() + ',';
                    } else {
                        $(this).hide();
                    }
                });
                if (sh != '') {
                    $('.show-content').children('div').find('span').each(function () {
                        if (sh.indexOf($(this).html() + ',') < 0) {
                            $(this).parent().hide();
                        } else {
                            $(this).parent().show();
                        }
                    });
                } else {
                    $('.show-content').children('div').hide();
                }
            } else {
                $('.title>span').removeClass('active').eq(0).addClass('active');
                $('.show-content').children('div').show();
                $('.show-content').children('div').each(function () {
                    $(this).find('ul>li').show();
                });
            }
        }
        /*
        * 初始加载数据
        */
        $(function () {
            var data = JSON.parse('@(Html.Raw(ViewData["userlist"]))');
            var html = '';
            if (data != '') {
                $('.title>span').each(function () {
                    var no = $(this).html().toLowerCase();
                    if ($(this).index() > 0) {
                        var func = createIntance("e.PINYIN2.toLowerCase().indexOf('" + no + "')==0");
                        var fr = func(data);
                        if (fr != '') {
                            fr = '[' + fr.substring(0, fr.length - 1) + ']';
                            var result = JSON.parse(fr);
                            if (result.length > 0) {
                                html += '<div> <span>' + no.toUpperCase() + '</span><ul>';
                                for (var i = 0; i < result.length; i++) {
                                    html += '<li onclick="javscript:setCheck(this)"><e>' + result[i].NAME + '</e><input type="hidden" name="userid" data-value="' + result[i].PINYIN2.toLowerCase() + '" data-account="' + result[i].ACCOUNT.toLowerCase() + '" value="' + result[i].ID + '"/></li>';
                                }
                                html += '</ul></div>';
                            }
                        }
                    }
                });
               $('.show-content').html(html);
            }
            //查询选中
            $('.title>span').click(function () {
                $('#search').val('');
                show();
                $(this).addClass('active').siblings().removeClass('active');
                var ts = $(this).html();
                if (ts != '全部') {
                    $('.show-content').children('div').find('span').each(function () {
                        if ($(this).html() == ts) {
                            $(this).parent().show();
                        } else {
                            $(this).parent().hide();
                        }
                    });
                } else {
                    $('.show-content').children('div').show();
                }
            });
        });
        $('#search').keydown(function (e) {
            if (e.keyCode == 13) {
                show();
            }
        });
    </script>
}