zengyitan
/
zytworld


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>后台管理系统 </title>

    <!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../vendors/iCheck/skins/flat/blue.css" rel="stylesheet">
    <!-- bootstrap-daterangepicker -->
    <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- bootstrap-datetimepicker -->
    <link href="../vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <!-- Datatables -->
    <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../src/css/common.css" rel="stylesheet">
  </head>
  <body class="container child_body">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-24">
        <div class="x_panel">
          <div class="x_title">
            <h2>考勤 </h2>

            <div class="nav navbar-right">
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
              </ul>
            </div>
            <div class="clearfix"></div>
          </div>

          <div class="x_content">
            <table id="datatable-demo" class="table table-hover table-striped table-bordered bulk_action">
              <thead>
                <tr>
                  <th>学生号</th>
                  <th>学生名字</th>
                  <th>正常 <input type="checkbox" id="check-zc-all" class="flat"></th>
                  <th>迟到 <input type="checkbox" id="check-cd-all" class="flat"></th>
                  <th>早退 <input type="checkbox" id="check-zt-all" class="flat"></th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>00283918</td>
                  <td>Tiger Nixon</td>
                  <td>
                    <input type="radio" class="flat check-zc-child" name="00283918">
                  </td>
                  <td>
                    <input type="radio" class="flat check-cd-child" name="00283918">
                  </td>
                  <td>
                    <input type="radio" class="flat check-zt-child" name="00283918">
                  </td>
                </tr>
                <tr>
                  <td>00213131</td>
                  <td>Kirs Crez</td>
                  <td>
                    <input type="radio" class="flat check-zc-child" name="00213131">
                  </td>
                  <td>
                    <input type="radio" class="flat check-cd-child" name="00213131">
                  </td>
                  <td>
                    <input type="radio" class="flat check-zt-child" name="00213131">
                  </td>
                </tr>
                <tr>
                  <td>001123123</td>
                  <td>Gree Duck</td>
                  <td>
                    <input type="radio" class="flat check-zc-child" name="001123123">
                  </td>
                  <td>
                    <input type="radio" class="flat check-cd-child" name="001123123">
                  </td>
                  <td>
                    <input type="radio" class="flat check-zt-child" name="001123123">
                  </td>
                </tr>
              </tbody>
            </table>
            
            <div class="row" style="margin-top: 15px;">
              <div class="col-md-12 col-sm-12 col-xs-12 text-right">
                <button type="button" class="btn btn-primary" id="saveBtn">提交</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery -->
    <script src="../vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="../vendors/fastclick/lib/fastclick.js"></script>
    <!-- iCheck -->
    <script src="../vendors/iCheck/icheck.min.js"></script>
    <!-- Datatables -->
    <script src="../vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
    <script src="../vendors/datatables.net-fixedcolumns/js/dataTables.fixedcolumns.min.js"></script>
    <script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>

    <!-- common -->
    <script src="../src/js/common.js"></script>
    <script>
      $(document).ready(function() {
        var $datatable = $('#datatable-demo');

        $datatable.dataTable({
          dom: '',
          fixedHeader: false,
          order: [],
          'columnDefs': [
            { orderable: false, targets: [2,3,4] }
          ],
          pageLength: 100
        })

        table_init();

        function table_init() {
          var $checkZcAll = $datatable.find('input#check-zc-all');
          var $checkCdAll = $datatable.find('input#check-cd-all');
          var $checkZtAll = $datatable.find('input#check-zt-all');

          // 全选改变监听
          $checkZcAll
            .on('ifClicked', function() {
              $checkCdAll.iCheck('uncheck');
              $checkZtAll.iCheck('uncheck');

              var isChecked = $(this).parent().hasClass('checked');
              !isChecked 
                ? $('input.check-zc-child').iCheck('check') 
                : $('input.check-zc-child').iCheck('uncheck');
            })
          $checkCdAll
          .on('ifClicked', function() {
              $checkZcAll.iCheck('uncheck');
              $checkZtAll.iCheck('uncheck');

              var isChecked = $(this).parent().hasClass('checked');
              !isChecked 
                ? $('input.check-cd-child').iCheck('check') 
                : $('input.check-cd-child').iCheck('uncheck');
            })
          $checkZtAll
          .on('ifClicked', function() {
              $checkZcAll.iCheck('uncheck');
              $checkCdAll.iCheck('uncheck');

              var isChecked = $(this).parent().hasClass('checked');
              !isChecked 
                ? $('input.check-zt-child').iCheck('check') 
                : $('input.check-zt-child').iCheck('uncheck');
            })

          // 子选改变监听
          $('input.check-zc-child, input.check-cd-child, input.check-zt-child')
            .on('ifClicked', function() {
              var isChecked = $(this).parent().hasClass('checked');
              if (!isChecked) {
                /* var cls = $(this).attr('class');
                var cls_arr = cls.split(' ');
                cls = cls_arr[cls_arr.length - 1]

                $datatable.find(cls) */
                var isZcAll = false;
                var isCdAll = false;
                var isZtAll = false;
                
                setTimeout(function() {
                  $('input.check-zc-child').each(function() {
                    isZcAll = $(this).parent().hasClass('checked')
                    if (isZcAll === false) return false;
                  })
                  isZcAll ? $checkZcAll.iCheck('check') : $checkZcAll.iCheck('uncheck');

                  $('input.check-cd-child').each(function() {
                    isCdAll = $(this).parent().hasClass('checked')
                    if (isCdAll === false) return false;
                  })
                  isCdAll ? $checkCdAll.iCheck('check') : $checkCdAll.iCheck('uncheck');

                  $('input.check-zt-child').each(function() {
                    isZtAll = $(this).parent().hasClass('checked')
                    if (isZtAll === false) return false;
                  })
                  isZtAll ? $checkZtAll.iCheck('check') : $checkZtAll.iCheck('uncheck');
                }, 50);
              }
            }).on('ifChanged', function() {
              /* var isChecked = $(this).parent().hasClass('checked');
              var cls = $(this).attr('class');
              var cls_arr = cls.split(' ');
              cls = cls_arr[cls_arr.length - 1]
              cls_arr = cls.split('-')
              cls = cls_arr[1] */
              
            })

        }
      })
    </script>
  </body>
</html>