springMVC和easyUI结合使用的实例

最新推荐文章于 2024-10-24 13:55:39 发布

iteye_13680

最新推荐文章于 2024-10-24 13:55:39 发布

阅读量301

点赞数

CC 4.0 BY-SA版权

分类专栏： springMVC结合easyUI 文章标签： java javascript xcode ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_13680/article/details/82610407

springMVC结合easyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用EasyUI实现的动态学生信息管理系统，包括页面引入、JS代码、HTML代码以及后台SpringMVC代码的详细实现过程。系统通过前端界面提供了对学生信息的筛选、查询、显示和操作功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先，页面引入easyUI文件

<link rel="stylesheet" href="/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="/js/easyui/themes/icon.css">
<script type="text/javascript" src="/js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/easyui/locale/easyui-lang-zh_CN.js"></script>

2.页面中js代码如下

<script type="text/javascript">

$(function(){
	$("#stuTable").datagrid({
		idField:'id',
		columns:[[
		      {field:'ck',checkbox:'true',width:10,align:'center'},
		      {field:'createTime',title:'申请日期',width:50,align:'center'},
		      {field:'xcode',title:'申请编号',width:50,align:'center'},
		      {field:'stucode',title:'发票号',width:50,align:'center'},
		      {field:'status',title:'状态',width:50,align:'center',
		    	  formatter:function(value,row,index){
		    		  switch(value) {
		    		  	case 0:
		    		  		return '上学';
		    		  		break;
		    		  	case 1:
		    		  		return '毕业';
		    		  		break;
		    		  	case 2:
		    		  		return '入学';
		    		  		break;
		    		  	default:
	    		  			return '查看';
		    		  		
		    		  }
		    	  }
		      },
		      {field:'operation',title:'操作',width:50,align:'left',
		    	  formatter:function(value,row,index){
		    		  var a = '<a href="/showStu.htm?id='+row.id+'&Tid='+row.Tid+'" title="查看" >查看</a>';
		    	  	  if(row.status == -1){
		    	  		  
		    	  	  }
		    	  	  return a;
		      	  }
		      },	
		]]
	});
});

function search() {
	
	var time1 =  $('#beginTime').datebox('getValue');
	var time2 = $('#endTime').datebox('getValue');
	if(time1!=''&&time2!=''&&time2<time1) {
		$.messager.alert("警告！","结束时间必须大于开始时间");
		return;
	}
	$('#stuTable').datagrid('load',{
		beginTime:time1,
	    endTime:time2,
	    xcode:$('#xcode').val(),
	    stucode:$('#stucode').val(),
	    status:$('#stuStatus').val()
	});
}

function clear(){
	$('#beginTime').datebox('setValue',"");
	$('#endTime').datebox('setValue',"");
	$('#xcode').val("");
	$('#stuCode').val("");
	$('#stuStatus').val("");
}

</script>

3.页面中html代码如下

 <div >
      <ul>
      <li class="sc">
            <label for="field"><span class="t2">申请日期</span></label>
            <input type="text" name="beginTime" id="beginTime" editable="false" class="easyui-datebox" style="width:100px; height:30px;">
        </li>
        <li class="sc">
            <label for="field" ><span class="t2">至</span></label>
  			<input type="text" name="endTime" id="endTime" editable="false" class="easyui-datebox" style="width:100px; height:30px;">        
		</li>
        <li class="sc">
          <label for="field" ><span class="t2">申请编号</span></label>
          <input type="text" name="xcode" id="xcode" style="width:140px;" >
        </li>
        <li class="sc">
          <label for="field" ><span class="t2">学生号</span></label>
          <input type="text" name="stuCode'" id="stuCode'" style="width:150px;"  >
        </li>
        <li class="sc">
          <label for="field" ><span class="t2">状&nbsp;态</span></label>
          <div class="select" style=" width:100px;">
	        <select name="status" id="status">
	          <option value="">全部</option>
	          <option value="0" <c:if test="${param.stuStatus eq 0 }">selected</c:if>>上学</option>
	          <option value="1" <c:if test="${param.stuStatus eq 1 }">selected</c:if>>毕业</option>
                 <option value="2" <c:if test="${param.stuStatus eq 2 }">selected</c:if>>入学</option>
	        </select>
         </div>
        </li>
        <li>
          <a href="javascript:void(0)" οnclick="search()">搜索</a>
          <a href="javascript:void(0)" οnclick="clear()">清空</a>
        </li>
      </ul>
     </div>
     <div class="t2">
     <table id="stuTable" title="学生列表" url="/studentlistData.htm" pageList="[10,20]" 
            singleSelect="true" fitColumns="true" pagination="true" 
            pageSize="10" loadMsg="加载中···"  rownumbers="true" fitColumns="true" >
     </table>  
  </div>

4.后台springMVC的代码

@RequestMapping("/studentlistData.htm")
	public void studentlistData(HttpServletRequest request,HttpServletResponse response) throws Exception{
		try {
			response.setHeader("Cache-Control", "no-cache");
			response.setContentType("text/json;charset=UTF-8");
			request.setCharacterEncoding("UTF-8");
			
			String page  = request.getParameter("page");
			String rows = request.getParameter("rows");
			if(StringUtils.isEmpty(from)){
				from ="0";
			}
			if(rows.equals("NaN")){
				rows="1";
			}
			List<Student> list = invoicedService.getStudentListByPage(con,(Integer.parseInt(page)-1)*Integer.parseInt(rows),Integer.parseInt(rows));
			long count = invoicedService.getAllCount(con);
			JSONArray jarray = new JSONArray();
			JSONObject jobject = new JSONObject();
			jobject.put("total",count);
			if(!list.isEmpty()){
				int index = 1;
				for (Student s : list) {
					SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
					JSONObject jo = new JSONObject();
					jo.put("id", s.getId());
					jo.put("Tid", s.getTeacher().getId());
					jo.put("createTime", sdf.format(stucode.getCreateTime()));
					jo.put("xcode", s.getXcode());
					jo.put("stuCode",s.getStuCode());
					jo.put("status", s.getStatus());
					jo.put("rows",index);
					jarray.add(jo);
					index++;
				}
				jobject.put("rows",jarray);
			}
			PrintWriter out = response.getWriter();
			out.print(jobject);
			out.flush();
			out.close();
		} catch (Exception e) {
		}
		
	}