<!DOCTYPE html>
<html>
  <head>
 	<base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作台</title>
 	  <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">
    
       <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="hold-transition skin-blue sidebar-mini">
  
  
 <div class="wrapper">
    <div class="content-wrapper"  style="margin-left:0;">
    
     <section class="content-header">
          <h1>
             	角色管理
            <small>角色信息</small>
          </h1>
<!--           <ol class="breadcrumb"> -->
<!--             <li><a href="#springUrl('/page/user/showstatics')"><i class="fa fa-dashboard"></i>首页</a></li> -->
<!--             <li><a class="active">角色列表</a></li> -->
<!--           </ol> -->
        </section>
    
    
    
        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
              <div class="box">
                <div class="box-header">
                <form id="seachTableForm"
								action="#springUrl('/a/role')" method="get">
                <div class="col-xs-2">
					<input type="text" class="form-control required" value="$!{role.roleName}" name="roleName" placeholder="角色名称">
				</div>
				<div class="col-xs-5">
				
				<button type="submit" class="btn btn-primary">搜索</button>
				 #if($shiro.hasPermission("sys:role:edit"))
                   <a href="#springUrl('/a/role/roleform')" class="btn btn-primary">新增</a>
                #end
				</div>
				</form>
                </div>
                <div class="box-body">
                  <table id="example2" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                      	<td hidden="true">Id</td>
                        <th>角色名称</th>
                        <th>角色标识</th>
                        <th>描述</th>
                        <th>操作</th>                            
                      </tr>
                    </thead>
                    <tbody id="tablebody">
                    </tbody>
				
                  </table>
                  	     <script id="template" type="text/template7">
						{{#each this}}
                      <tr>
						<td hidden="true">{{id}}</td>
                        <td>{{roleName}}</td>
                        <td>{{roleSign}}</td>
                        <td>{{description}}</td>
						<td>
 						#if($shiro.hasPermission("sys:role:edit"))
						<a href="#springUrl('/a/role/roleaformDetail?id={{id}}')" data-id="{{id}}" data-action="view" class="btn green">修改</a>
                        <a href="javascript:void(0);" data-id="{{id}}" data-action="remove" onclick="removeData({{id}})" class="btn red">删除</a>
						#end 	
						</td>
                      </tr>
						{{/each}}
                	</script>
                  
                </div><!-- /.box-body --> 
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->  
   	
 

      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>
    </div><!-- ./wrapper -->
  <!-- jQuery 2.1.4 -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
 <script>
     var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
     var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
 </script>


 <script src="common/js/cfapp.js"></script>
    <script src="dist/js/app.min.js"></script>
   <script src="dist/js/template7.js"></script>
 	 
 	   <script>
 	  function removeData(id){
		   Cfapp.confirm({
			 message: "确定要删除吗",
			 btnoktext:"确定",
			 btncanceltext:"取消",
			 success:function(){
				 $.ajax({
		              "type": "POST",
		              "url": "#springUrl('/a/role/removeRole')",
		              "dataType": "json",
		              "data": {id:id,_csrf_header:csrfheader.value,_csrf:csrftoken.value}, //以json格式传递
		              "success": function(data){
		            	  if(data.errorNo==0){
		            		  Cfapp.alert({
		                          message: "删除成功",
		                          btntext: "确定",
		                          success: function () {
		                        	 location.href = "#springUrl('/a/role')";
		                          }
		                      })
		            	  }else{
		            		  Cfapp.alert({
		                          message: "删除失败",
		                          btntext: "确定",
		                          success: function () {
		                              location.href = "#springUrl('/a/role')";
		                          }
		                      })
		            	  }
		              }
		          }); 
			 },
			cancel:function(){
				

			 }
		   })
	   }
 	   //抽取 所有用户  
 	   
      $(function () {
    	   var oLanguage={
    		        "oAria": {
    		            "sSortAscending": ": 升序排列",
    		            "sSortDescending": ": 降序排列"
    		        },
    		        "oPaginate": {
    		            "sFirst": "首页",
    		            "sLast": "末页",
    		            "sNext": "下页",
    		            "sPrevious": "上页"
    		        },
    		        "sEmptyTable": "没有相关记录",
    		        "sInfo": "第 _START_ 到 _END_ 条记录，共 _TOTAL_ 条",
    		        "sInfoEmpty": "第 0 到 0 条记录，共 0 条",
    		        "sInfoFiltered": "(从 _MAX_ 条记录中检索)",
    		        "sInfoPostFix": "",
    		        "sDecimal": "",
    		        "sThousands": ",",
    		        "sLengthMenu": "每页显示条数: _MENU_",
    		        "sLoadingRecords": "正在载入...",
    		        "sProcessing": "正在载入...",
    		        "sSearch": "搜索:",
    		        "sSearchPlaceholder": "",
    		        "sUrl": "",
    		        "sZeroRecords": "没有相关记录"};
    	   $.fn.dataTable.defaults.oLanguage=oLanguage;
    	  var sSource = "#springUrl('/a/role/fetchdata')";
    	   var aoData = {
    			   iDisplayStart:1,
    			   iDisplayLength:10
    	   };
    	// Compile templates once on app load/init
    	   var searchTemplate = $('#template').html();
    	   var compiledSearchTemplate = Template7.compile(searchTemplate);
    	   
    	   function  fnCallback(data)
    	  	{
    		  $("#tablebody").append(compiledSearchTemplate(data.aaData));
    		      $('#example2').DataTable({
    		          "paging": true,
    		          "lengthChange": false,
    		          "searching": false, 
    		          "ordering": false,
    		          "info": true,
    		          "autoWidth": false,
    		          "bPaginate" : true, //是否显示（应用）分页器  
   		           "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数  
   		           "sPaginationType" : "full_numbers"
    		        });
    	  	}
    	   aoData.roleName=$("input[name='roleName']").val();
    	     $.ajax({
                 "type": "GET",
                 "contentType": "application/json",
                 "url": sSource,
                 "dataType": "json",
                 "data": aoData, //以json格式传递
                 "success": fnCallback
             });   
  
      });
    </script>
 	 
  </body>
</html>
