使用easyUI的datagrid显示查询得到的List<Object>对象

最新推荐文章于 2024-04-15 10:27:35 发布

qqliang1314

最新推荐文章于 2024-04-15 10:27:35 发布

阅读量9.9k

点赞数

分类专栏： easyUI 文章标签： easyUI datagrid list

本文链接：https://blog.csdn.net/qqliang1314/article/details/33742545

版权

easyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天下午花了点时间做了个简单的查询，前端使用easyUI的datagrid显示列表，用mybatis访问数据库，通过spring mvc进行请求跳转，在这先说说我琢磨出来的datagrid的一个用法。

jsp页面里的部分代码：

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
    财务信息列表
    <script>
 $(function (){
             $('#dd').datagrid({
            	  title:'财务明细列表',
            	  method:'GET',
            	  url:'getFinanceList.action',
                  iconCls:'icon-ok',
            	  fitColumns:true,
            	  pagination:true,
            	  striped:true,
            	  nowrap:true,
                  singleSelect:true,
                  rownumbers:true,
                  pageSize:10,
                  columns:[[    
                  {field:'ck',checkbox:true},    
                  {field:'financeNo',title:'编号',width:100,align:'center'},    
                  {field:'financeDate',title:'日期',width:100,align:'center'},    
                  {field:'totalMoney',title:'总金额(元)',width:100,align:'center'},    
                  {field:'foodMoney',title:'食品金额(元)',width:100,align:'center'},    
                  {field:'foodDetail',title:'食品明细',width:100,align:'center'},    
                  {field:'clothMoney',title:'衣服金额(元)',width:100,align:'center'},    
                  {field:'clothDetail',title:'衣服明细',width:100,align:'center'},    
                  {field:'lifeMoney',title:'生活用品金额(元)',width:100,align:'center'},    
                  {field:'lifeDetail',title:'生活用品明细',width:100,align:'center'},    
                  {field:'otherMoney',title:'其他金额(元)',width:100,align:'center'},    
                  {field:'otherDetail',title:'其他明细',width:100,align:'center'}   
                 ]] 
                
        }
        );
</script>

后台代码：


  @RequestMapping(value="/getFinanceList",method=RequestMethod.GET)
	public void getFinanceList(HttpServletRequest request,
			HttpServletResponse response,Model model){
		
		PageVo pageVo = new PageVo();
		//获取分页相关属性
		String pageNo = request.getParameter("page") == null ?"1":request.getParameter("page");
		String pageSize = request.getParameter("rows");
		
		int beginRow = (Integer.parseInt(pageNo)-1)*Integer.parseInt(pageSize);
		int endRow = beginRow + Integer.parseInt(pageSize);
		pageVo.setPageNo(pageNo);
		pageVo.setPageSize(pageSize);
		pageVo.setBeginRow(beginRow);
		pageVo.setEndRow(endRow);
		
		fList = fnService.getFinanceList(pageVo);
		int total = fnService.getTotalCount();
	
		Map
    
    
     
      map = new HashMap
     
     
      
      ();
		if(fList.size()>0){
			
			map.put("total", total);
			map.put("rows", fList);
			json = JSONObject.fromObject(map);
			try {
				/*设置编码格式，返回结果
				 * ***/
				response.setContentType("text/html;charset=UTF-8");
				response.getWriter().write(json.toString());
			} catch (IOException e1) {
				e1.printStackTrace();
			}
			//return null;
		}
	}

1，在列表页面有一个id 为 dd的table,当跳转到该页面时，自动请求datagrid中的url地址；

2，在getFinanceList()方法中，查询得到List<Finance>，将其封装到Map中；

3，通过JSONObject.fromObject(map)，将List转换为JSON对象，可以通过debug查看转换后的JSON对象格式；

4，最后通过response.getWriter().write(json.toString())传到前端，不要忘了设置编码格式为UTF-8。

这只是最简单的列表，并没包括分页，关于easyUI的相关属性和方法，可以查看API。