Contacts.cshtml 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. @{
  2. ViewBag.Title = "Contacts";
  3. Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  5. <style>
  6. body{background-color: #ffffff;}
  7. .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;}
  8. .nav .right{float: right;height: 35px;line-height: 35px;text-align: right;margin-bottom: 8px;}
  9. .nav .right a{margin-right: 5px;}
  10. .nav .right a:last-child{margin-right: 1px;margin-left: 5px;}
  11. .title{line-height: 35px;margin: 5px 0;border-bottom: 1px solid #bebbbb;clear: both;font-size: 16px;}
  12. .title span{width: 30px;padding: 2px 5px;margin-left: 5px;cursor: pointer;border: 1px solid #18a689;color: #1ab394;}
  13. .title span:hover{background-color: #18a689;color: #ffffff;}
  14. .title .active{background-color: #18a689;color: #ffffff;}
  15. .show-content ul{list-style: none;line-height: 25px;color: #337ab7;display: inline-block;width: 90%; border-bottom:1px dashed #1ab394;}
  16. .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;}
  17. .show-content ul li{float: left;width: 55px;margin-right: 15px;border: 1px solid #18a689;padding: 2px 3px;margin-bottom: 10px;text-align: center;}
  18. .show-content ul li:hover{background-color: #18a689;color: #ffffff;cursor: pointer;}
  19. .show-content .active{background-color: #18a689;color: #ffffff;}
  20. </style>
  21. <link href="/Content/js/silder/silder.css" rel="stylesheet" />
  22. <div class="wrapper-content">
  23. <div class="nav">
  24. <div class="right">
  25. <span style="color:#ff0000;margin-top:3px;line-height:27px;">查询:</span>
  26. <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="请输入人名" />
  27. <a class="btn btn-primary p310" href="javascript:show()"><i class="im-undo2"></i> 搜索</a>
  28. @*&nbsp;&nbsp;&nbsp;&nbsp;
  29. <a class="btn btn-warning p310" href="javascript:history.go(-1)"><i class="im-undo2"></i> 返回</a>*@
  30. </div>
  31. </div>
  32. <div class="title">
  33. <span class="active">全部</span>
  34. <span>A</span>
  35. <span>B</span>
  36. <span>C</span>
  37. <span>D</span>
  38. <span>E</span>
  39. <span>F</span>
  40. <span>G</span>
  41. <span>H</span>
  42. <span>I</span>
  43. <span>J</span>
  44. <span>K</span>
  45. <span>L</span>
  46. <span>M</span>
  47. <span>N</span>
  48. <span>O</span>
  49. <span>P</span>
  50. <span>Q</span>
  51. <span>R</span>
  52. <span>S</span>
  53. <span>T</span>
  54. <span>U</span>
  55. <span>V</span>
  56. <span>W</span>
  57. <span>X</span>
  58. <span>Y</span>
  59. <span>Z</span>
  60. </div>
  61. <div class="panel-body">
  62. <div class="tab-content">
  63. <div class="show-content">
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. @section scripts{
  69. <script type="text/javascript">
  70. /*
  71. * 定义模板函数
  72. */
  73. var template = function (queryArr) {
  74. var count = '';
  75. for (var i = 0; i < queryArr.length; i++) {
  76. var e = queryArr[i];
  77. if ($express) {
  78. //count++;
  79. count += JSON.stringify(e) + ',';
  80. }
  81. }
  82. return count;
  83. }
  84. /*
  85. * 模板创建函数
  86. */
  87. var createIntance = function (exp) {
  88. var fun = template.toString().replace("$express", exp).toString();
  89. return eval("0," + fun);
  90. }
  91. /*
  92. * 设置LI选中状态,弹出个人名片
  93. * expand:t
  94. */
  95. function setCheck(t) {
  96. $('.show-content').children('div').find('ul>li').removeClass('active');
  97. $(t).addClass('active');
  98. dig.addModel('个人名片', '/Sys/User/Card/' + $(t).children('input[type="hidden"]').val(), 700, 450, function () { });
  99. }
  100. /*
  101. * 检索关键词
  102. */
  103. function show() {
  104. var search = $('#search').val();
  105. var sh = '';
  106. if (search != '' && search != undefined) {
  107. $('.show-content').children('div').find('ul>li').each(function () {
  108. 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) {
  109. $(this).show();
  110. sh += $(this).parent().prev().html() + ',';
  111. } else {
  112. $(this).hide();
  113. }
  114. });
  115. if (sh != '') {
  116. $('.show-content').children('div').find('span').each(function () {
  117. if (sh.indexOf($(this).html() + ',') < 0) {
  118. $(this).parent().hide();
  119. } else {
  120. $(this).parent().show();
  121. }
  122. });
  123. } else {
  124. $('.show-content').children('div').hide();
  125. }
  126. } else {
  127. $('.title>span').removeClass('active').eq(0).addClass('active');
  128. $('.show-content').children('div').show();
  129. $('.show-content').children('div').each(function () {
  130. $(this).find('ul>li').show();
  131. });
  132. }
  133. }
  134. /*
  135. * 初始加载数据
  136. */
  137. $(function () {
  138. var data = JSON.parse('@(Html.Raw(ViewData["userlist"]))');
  139. var html = '';
  140. if (data != '') {
  141. $('.title>span').each(function () {
  142. var no = $(this).html().toLowerCase();
  143. if ($(this).index() > 0) {
  144. var func = createIntance("e.PINYIN2.toLowerCase().indexOf('" + no + "')==0");
  145. var fr = func(data);
  146. if (fr != '') {
  147. fr = '[' + fr.substring(0, fr.length - 1) + ']';
  148. var result = JSON.parse(fr);
  149. if (result.length > 0) {
  150. html += '<div> <span>' + no.toUpperCase() + '</span><ul>';
  151. for (var i = 0; i < result.length; i++) {
  152. 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>';
  153. }
  154. html += '</ul></div>';
  155. }
  156. }
  157. }
  158. });
  159. $('.show-content').html(html);
  160. }
  161. //查询选中
  162. $('.title>span').click(function () {
  163. $('#search').val('');
  164. show();
  165. $(this).addClass('active').siblings().removeClass('active');
  166. var ts = $(this).html();
  167. if (ts != '全部') {
  168. $('.show-content').children('div').find('span').each(function () {
  169. if ($(this).html() == ts) {
  170. $(this).parent().show();
  171. } else {
  172. $(this).parent().hide();
  173. }
  174. });
  175. } else {
  176. $('.show-content').children('div').show();
  177. }
  178. });
  179. });
  180. $('#search').keydown(function (e) {
  181. if (e.keyCode == 13) {
  182. show();
  183. }
  184. });
  185. </script>
  186. }