<%@ Page Language="C#" EnableViewState="false" %>
<!DOCTYPE html>
 <html>
<head runat="server">
    <title>选择与会人员</title> 
    <script src="../javascript/jquery-1.9.1.min.js"></script>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link href="../javascript/datatables/datatables.css" rel="stylesheet" />
    <script src="../javascript/datatables/datatables.min.js"></script> 
    <script src="../javascript/layer/layer.js"></script>
    <link href="../javascript/Tree/bootstrap-treeview.min.css" rel="stylesheet" />
    <script src="../javascript/Tree/bootstrap-treeview.min.js"></script>
     <link href="../style/patch.css" rel="stylesheet" />
    <script src="../javascript/common.js"></script>

    <style>
     .btn,   .form-control{border-radius:0px }
   </style> 

</head>
<body style="font-size:13px;">
    <form id="form1" runat="server">
 

    
  

<div style="margin:2px; text-align:right" >
	         
                        
 
    <div style="margin:5px;">
    已经选择人员： <span id="count" style="color:red">0</span> 人
  </div>
    
     
    <div>

   
      <input class="form-control" id="txt_key" type="text"  placeholder="输入关键字搜索" 
          style="width:150px; display:inline-block  "   />
    
          &nbsp;   
          <button class="btn btn-success" id="btnSelect"
              onclick="if(!Issel()) return false; parent.setPopAttend($('#sel').val()); parent.document.getElementById('popWinClose').click(); "
              > 提交</button>
        &nbsp;  
      
          <input type="button" onclick="_search()"  value="搜索" class="btn btn-primary btn-flat"/>
    
    </div>
       
    
     
</div>

               
                
             
        <table   class="table table-condensed table-hover" style="  display:none" id="tbl_users"  >
        <thead>
            <tr>  
                 <th  style="width:15px">登录名</th>
                <th  style="width:20px">显示名</th>
                <th style="width:20px"  >部门</th>  
            </tr>
        </thead>
      </table> 

            <div id="loading" style="width:100%; text-align:center;">
                    <img src="../images/loading.gif" /> 数据加载中
            </div>
                      

         
          
   

       <input type="hidden" name="sel" id="sel"/>


                 
 



        
 
 <script>


     $(document).ready(function () {  
         setTimeout(InitTable, 100);  
     });

      


     function InitTable() {
          
         $('#tbl_users').DataTable({
             stateSave: false,
             "sDom": '<"top">rt<"bottom"p><"clear">',
             "ajax": 'json_users.aspx',
          });
          

         $("#tbl_users").show(); 
         $("#loading").hide();


           

         var table = $('#tbl_users').DataTable();

         $('#tbl_users tbody').on('click', 'tr', function () {

             var count = $("#count").html();

             if ($(this).hasClass("selected")) {
                 $("#count").html((parseInt(count) - 1));
             }
             else {
                 $("#count").html((parseInt(count) + 1));
             }

             $(this).toggleClass('selected');
         });


          
         $('#txt_key').on('keyup', function () {
             table.search(this.value).draw();
         });


         $('#txt_key').on('keydown', function () { 
             table.search(this.value).draw(); 
         });

         
     }




     function _search() {
         var _table = $('#tbl_users').DataTable();
         var key = $('#txt_key').val();
         _table.search(key).draw();
     }


     function select() {

         var table = $('#tbl_users').DataTable();
         $('#tbl_users tbody tr').each(function () {
             $(this).toggleClass('selected');
         });

         var rows = table.rows('.selected').data();
         $("#count").html(rows.length);
     }


     function Issel() {
         var checked = 0;
         var result = '';
         var table = $('#tbl_users').DataTable();
         var _c = 0;

         var rows = table.rows('.selected').data();


         for (var i = 0; i < rows.length; i++) {

             checked++;
             var tds = rows[i]  
             var username = tds[0];
             var displayname = tds[1]; 
             result = result + "$" + username + "$" + displayname + "!";

         }


         if (checked > 0) {
           
             $("#sel").val(result);
             return true;
         }
         else {
             layer.alert('请至少选择一条记录', 12);
             return false;
         }
     }


 </script>



    


       
     
    </form>
</body>
</html>
