easyUI表格的分页及动态绑定数据

最新推荐文章于 2021-02-06 17:53:32 发布

原创最新推荐文章于 2021-02-06 17:53:32 发布 · 385 阅读

1 ·

CC 4.0 BY-SA版权

练习专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个考试系统的后台管理界面设计，使用了EasyUI框架进行页面布局和数据展示，包括试题的增删改查功能，以及分页、排序等数据操作。系统通过AJAX与后端交互，实现动态加载试题列表。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>考试系统后台</title>
		<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
  	 	 <link rel="stylesheet" type="text/css" href="css/themes/icon.css">
   		 <link rel="stylesheet" type="text/css" href="css/demo.css">
   		 <script type="text/javascript" src="js/jquery.min.js"></script>
    	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			$("#d" ).css("display", "none");
    		});
    		function call(data){
    			
    		}
    		function show(){
    			$("#d" ).css("display", "block");
    			
    			$('#tt').datagrid({    
				    url:'http://localhost:8080/getAllQuestions',    
				    columns:[[    
				        {field:'id',title:'编号',width:100,align:'center'},    
				        {field:'title',title:'内容',width:100,align:'center'},  
				        {field:'state',title:'类型',width:100,align:'center'},
				        {field:'level',title:'难度',width:100,align:'center'},
				        {field:'score',title:'分值',width:100,align:'center'},
				        {field:'a',title:'A选项',width:100,align:'center'},
				        {field:'b',title:'B选项',width:100,align:'center'},
				        {field:'c',title:'C选项',width:100,align:'center'},
				        {field:'d',title:'D选项',width:100,align:'center'},
				        {field:'answer',title:'正确选项',width:100,align:'center'},
				    ]],
					toolbar : [ {
						text : '添加',
						iconCls : 'icon-add',
						//为按钮绑定单击事件
						handler : function() {
							alert('add...');
							
							
						}
					}, {
						text : '删除',
						iconCls : 'icon-remove',
						handler : function() {
							var row = $('#tt').datagrid('getSelected');
							alert("是否删除编号是["+row.id+"]的这条数据?");
							$.ajax({
								url:"http://localhost:8080/deleteQuestions?id="+row.id,
								type:"get",
								async:true,
								dataType:"json",
								jsonpCallback:"call",
								success:function(data){
									
									
									
								}
							});
							
						}
					}, {
						text : '修改',
						iconCls : 'icon-edit',
						handler : function() {
							var row = $('#tt').datagrid('getSelected');
							alert("是否修改编号是["+row.id+"]的这条数据?");
							$.ajax({
								url:"",
								type:"get",
								async:true,
								dataType:"json",
								jsonpCallback:"call",
								success:function(data){
									
									
									
								}
							});
							
						}
					}, {
						text : '查询',
						iconCls : 'icon-search'
					} ],
				  	fit:true,
					fitColumns:true,
					striped:true,
					rownumbers:true,
					border:false,
					pagination:true,
					pageList:[10,12,14,16],
					pageNumber:1,
					sortName:'data',
					sortOrder:'desc',
					loadFilter: pagerFilter,
				}); 
    		}
    		
    		
    		function pagerFilter(data) {  
			    if (typeof data.length == 'number' && typeof data.splice == 'function') {  
			    	//typeof判断变量类型的，12是数字，所以输出的结果是number
			        data = {  
			            total: data.length,  
			            rows: data  
			        }  
			    }  
			    var dg = $(this);  
			    var opts = dg.datagrid('options');  //返回参数对象
			    var pager = dg.datagrid('getPager');  
			    pager.pagination({  
			        onSelectPage: function (pageNum, pageSize) {  
			            opts.pageNumber = pageNum;  
			            opts.pageSize = pageSize;  
			            pager.pagination('refresh', {  
			                pageNumber: pageNum,  
			                pageSize: pageSize  
			            });  
			            dg.datagrid('loadData', data);  
			        }  
			    });  
			    if (!data.originalRows) {  
			        if(data.rows)  
			            data.originalRows = (data.rows);  
			        else if(data.data && data.data.rows)  
			            data.originalRows = (data.data.rows);  
			        else  
			            data.originalRows = [];  
			    }  
			    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);  
			    var end = start + parseInt(opts.pageSize);  
			    data.rows = (data.originalRows.slice(start, end));  
			    return data;  
			}    
    	</script>
	</head>
	<body>
			
	    <div class="easyui-layout" style="width:1400px;height:700px;margin: 0 auto;">
	        <div data-options="region:'north'" style="height:55px">
	        	<div  style="text-align: center;margin-top: 10px;"><h2>考试管理系统后台</h2></div>
	        </div>
	        <div data-options="region:'west',split:true" title="操作列表" style="width:200px;">
	        	<div  style="text-align: center;margin-top: 20px;">
	        		<a href="#" class="easyui-linkbutton c5" style="width:120px" onclick="show()">试题管理</a>
	        	</div>
	        </div>
	        <div data-options="region:'center',title:'主界面',iconCls:'icon-ok'" id="d">
			    <table id="tt" >
			    </table>
	        </div>
	        
	    </div>
		
	</body>
</html>