java easyUI实现自定义网格视图实例代码

前言

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，Javascript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

本文主要给大家介绍了关于java easyUI自定义网格视图的相关内容，下面话不多说了，来一起看看详细的介绍吧

方法如下：

一：前台代码如下

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .textbox-label {
 display: inline-block;
 width: 70px;
 height: 22px;
 line-height: 22px;
 vertical-align: middle;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 margin: 0;
 padding-right: 5px;
 }
 .c-content{
 overflow:hidden; 
 
 text-overflow:ellipsis;
 
 display:-webkit-box; 
 
 -webkit-box-orient:vertical;
 
 -webkit-line-clamp:2; 
 }
 
 .highlight{
  background-color: yellow;
 }
 em.important{
  background-color: red;
 }
 .c-label{
  display:inline-block;
  width:50px;
  
  }
 .textbox-label-min {
 display: inline-block;
 width: 60px;
 height: 22px;
 line-height: 22px;
 vertical-align: middle;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 margin: 0;
 padding-right: 5px;
 }
 
 
 
 
 
 
  
  
   
  
  
 
 
 
 
  
  后台处理中。。。
  
 
 
 
 
 

二：后台返回的数据格式

后台返回的数据格式和经典的easyui的数据格式是一样的

数据格式：

　　{"total":67,"errmsg":"查询成功","errcode":1,"rows":[{"postId":77,"dealType":0,"title":"理解","partNo":null,"content":"理解[图片]","location":null,"tradeType":0,"brandId":0,"quantity":0,"contacts":"SakuraAoi","contactNumber":null,"color":null,"channelId":1,"createDate":"2018-10-16 10:12:19","updateDate":null,"status":0,"isDelete":0,"isAdmindel":0,"isTop":0,"replyNumber":0,"readNumber":0,"thumbNumber":0,"authorId":0,"isOem":0,"type":0,"amount":0.0,"channelPostAttach":[{"attachId":99,"postId":77,"uploadDate":1539655939000,"attachName":"record-attach/sell/371-20181016101221.png","type":10121001,"typeName":null,"attachNameUrl":""}],"nickName":"SakuraAoi","avatar":"","channelName":"新车交易","brandName":"长安铃木","startDate":null,"endDate":null,"brandIds":null,"channelIds":null,"strBrandIds":null,"strChannelIds":null,"begin":0,"end":0,"dealTypes":null,"isDeletes":null,"item":null,"value":0,"userId":0,"actId":0,"dealTypeName":null,"tradeTypeName":null,"isTopName":null,"createDate2":null}]}

三：视图效果

四：后台数据的获取

后台数据的获取为一对多，因为一个帖子会包含多个图片附件。

帖子实体类：

public class BsChannelPost {
 private int postId;
 private int dealType;
 private String title;
 private String partNo;
 private String content;
 private String location;
 private int tradeType;
 private int brandId;
 private int quantity;
 private String contacts;
 private String contactNumber;
 private String color;
 private int channelId;
 @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") 
 private Date createDate;
 @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") 
 private Date updateDate;
 private int status;
 private int isDelete;
 private int isAdmindel;
 private int isTop;
 private int replyNumber;
 private int readNumber;
 private int thumbNumber;
 private int authorId;
 private int isOem;
 private int type;
 private double amount;
 private List channelPostAttach;//附件
 
 private String nickName;
 private String avatar;
 private String channelName;
 private String brandName;
 
 private String startDate;
 private String endDate;
 private List brandIds;
 private List channelIds;
 private String strBrandIds;
 private String strChannelIds;
 private int begin;
 private int end;
 private String dealTypes;
 private String isDeletes;
 
 private String item;
 private int value;
 private int userId;
 private int actId;
 
 private String dealTypeName;
 private String tradeTypeName;
 private String isTopName;
 private String createDate2;
}

附件实体类：

import lombok.Data;
@Data//lombok 免写get set
public class BsChannelPostAttach {
 private int attachId;
 private int postId;
 private Date uploadDate;
 private String attachName;
 private int type;
 private String typeName;
 private String attachNameUrl;
}

dao：　

 
    
    
  
  
  
   select attach_id attachId,post_id postId,upload_date uploadDate,attach_name attachName,type from bs_channel_post_attach where post_id = #{postId} order by attach_id 
  
  
  
  select p.post_id postId,u.nickname nickName,c.channel_name channelName,b.brand_name brandName,p.create_date createDate,p.title title,p.content content,p.part_no partNo,p.contacts contacts,u.avatar avatar,p.is_top isTop,
  is_delete isDelete,p.is_admindel isAdmindel,p.channel_id channelId
  from bs_channel_post p left join bs_channel c on p.channel_id=c.channel_id left join bs_brand b
  on p.brand_id=b.brand_id left join bs_user u on p.author_id=u.user_id where 1=1
  
   and (p.content like '%${content}%' or p.title like '%${content}%' )
  
  
   and u.nickname like '%${nickName}%'
  
  
   and p.deal_type=#{dealType}
  
  
   and (is_delete=0 and is_admindel=0)
  
  
   and (is_delete=1 or is_admindel=1)
  
  
   and is_top=1
  
  
    and p.brand_id in
     
      #{id}
     
  
  
    and p.channel_id in
     
      #{id}
     
  
  
   and p.create_date>#{beginDate}
  
  
   and p.create_date <#{endDate}
  
  
   and p.create_date between #{beginDate} and #{endDate}
  
   order by p.create_date desc limit #{begin},#{end}
  

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对考高分网的支持。