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

PHP小丑

这篇文章主要给大家介绍了关于java easyUI实现自定义网格视图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
easyui是一种基于jquery的用户界面插件集合。
easyui为创建现代化，互动，javascript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单html标记，就可以定义用户界面。
本文主要给大家介绍了关于java easyui自定义网格视图的相关内容，下面话不多说了，来一起看看详细的介绍吧
方法如下：
一：前台代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="/themes/metro-blue/easyui.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="/themes/icon.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="/themes/color.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="/emoji/emoji.css" rel="external nofollow" >
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery.edatagrid.js"></script>
<script type="text/javascript" src="/js/datagrid-detailview.js"></script>
<script type="text/javascript" src="/js/datagrid-filter.js"></script>
<script type="text/javascript" src="/js/easyui-lang-zh_cn.js"></script>
<script type="text/javascript" src="/js/jquery.highlight.js"></script>
<script type="text/javascript" src="/js/tool.js"></script>
<script type="text/javascript" src="/js/datagrid-cellediting.js"></script>
<script type="text/javascript" src="/emoji/emoji.js"></script>
<style type="text/css">
.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;
}
</style>
</head>
<body>
 
<div id="tb">
 
 <div id="p" class="easyui-panel" title="" data-options="iconcls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
 <div>
  <form name="searchform" method="post" action="" id="searchform" >
  <input type="hidden" name="ss" id="ss">
  <div>
  <span>标题/内容:</span>
  <input class="easyui-textbox" id="content" name="content" data-options="prompt:'主题'">
  <span>用户名: </span>
  <input class="easyui-textbox" id="author" name="author" data-options="prompt:'单行输入'">
  <span>频道: </span>
  <input class="easyui-combobox" name="forumids" id="forumids" panelheight="auto" data-options="
  url:'/channelpost/getchannel',
  method:'get',
  valuefield:'channelid',
  textfield:'channelname',
  multiple:true,
  prompt:'多选',
  panelheight:'auto'
  ">
  <span id="ssss">品牌: </span>
  <input class="easyui-combobox" name="brandids" id="brandids" panelheight="auto" data-options="
  url:'/channelpost/getbrand',
  method:'get',
  valuefield:'brandid',
  textfield:'brandname',
  multiple:true,
  prompt:'多选',
  panelheight:'auto'
  ">
  <span>分类: </span>
  
  <select class="easyui-combobox" name="poststatus" id="poststatus" data-options=" prompt:'单选'">
   <option value=0>全部</option>
   <option value=10481001 >出售</option>
   <option value=10481002>求购</option>
  </select>
  <span>帖子状态: </span>
  <select class="easyui-combobox" name="isdeleted" id="isdeleted" data-options=" prompt:'单选'">
   <option value=0>全部</option>
   <option value=1>未删除</option>
   <option value=2>已删除</option>
   <option value=3>置顶</option>
  </select>
 
  </div>
  <div>
  <span>发布时间:</span>
  <input class="easyui-datetimebox" id="startdate" name="startdate"> -
  <input class="easyui-datetimebox" id="enddate" name="enddate">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="submitsearch" class="easyui-linkbutton" iconcls="icon-search">查询</a>
  </div>
  <div>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="selall" class="easyui-linkbutton" >全选</a></td>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="selall" class="easyui-linkbutton" >反选</a></td>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="selall" class="easyui-linkbutton"  >置顶</a></td>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="selall" class="easyui-linkbutton" >管理员删除</a></td>
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="selall" class="easyui-linkbutton c5"  >取消置顶</a></td>
   <div>
   <select class="easyui-combobox" panelheight="auto" data-options=" valuefield: 'id', onselect: function(rec){var s=false; if(rec.id ==0){s=true;} $('#dg').datagrid({singleselect:s})}">
   <option value="1">多选</option>
   <option value="0">单选</option>
   </div></div>
  </select>
  </div>
  
 </div>
  </form>
 </div>
 
</div>
</div>
<table id="dg" data-options="rownumbers:false,singleselect:false,pagination:true,url:'',method:'post',toolbar:'#tb',fit:true">
 
 
</table>
<div id="dw" class="easyui-window" title="" data-options="modal:true,closed:true,iconcls:'icon-save'">
 <div id="wcontent">
 后台处理中。。。
 </div>
</div>
 
<script type="text/javascript">
var cardview = $.extend({}, $.fn.datagrid.defaults.view, {//重绘视图开始
 renderrow: function(target, fields, frozen, rowindex, rowdata){
 var cc = [];
 cc.push('<td colspan=' + 3 + '>');
 if ( !frozen && rowdata.postid){
  var _istop = rowdata.istop;
  var _isadmindel = rowdata.isadmindel;
  var _isdeleted = rowdata.isdelete;
  var cs = "";
  if(_isadmindel ==1){
  cs = cs+'<span>管理员删除</span>';
  }
  if(_isdeleted ==1){
  cs = cs+'<span>用户删除</span>';
  }
  if(_istop==1){
  cs = cs+'<span>置顶</span>';
  }
  cc.push('<div>');
  cc.push('<div > <img src="'+rowdata.avatar+'" height="100" width="100" ></div>');
  cc.push('<div><span class="c-label">用户名:</span> <span>' + rowdata.nickname + '</span></div>');
  cc.push('<div> '+rowdata.channelname+'>'+ rowdata.brandname + '</div>');
  cc.push('<div> 发布时间: '+rowdata.createdate + '</div>');
  cc.push('</div>');
  cc.push('<div>');
  if(rowdata.channelid==2){
  if(rowdata.title != null){
   cc.push('<div id="title_'+rowdata.postid+'"> '+cs+'配件编号:'+jemoji.unifiedtohtml(rowdata.title )+ '</div>');
  }else{
   cc.push('<div id="title_'+rowdata.postid+'"> '+cs+'配件编号:</div>');
  }
  }else{
  if(rowdata.title != null){
   cc.push('<div id="title_'+rowdata.postid+'"> '+cs+'标题:'+jemoji.unifiedtohtml(rowdata.title )+ '</div>');
  }else{
   cc.push('<div id="title_'+rowdata.postid+'"> '+cs+'标题:</div>');
  }
  }
  if(rowdata.content != null){
  cc.push('<div class="c-content" id="content_'+rowdata.postid+'"> '+'内容:'+jemoji.unifiedtohtml(rowdata.content )+ '</div>');
  }else{
  cc.push('<div class="c-content" id="content_'+rowdata.postid+'"> '+'内容:</div>'); 
  }
  var ss ='<div> ';
  var attachmentlist = rowdata.channelpostattach ;
  for(var p in attachmentlist){
  if(attachmentlist[p].type==10121002){
   /* ss +='<video src="'+attachmentlist[p].attachnameurl+'" controls="controls" height="100" width="100"></video>' */ 
   /* ss +='<video id="example-video" width="100" height="100" class="video-js vjs-default-skin vjs-big-play-centered" poster=""><source src="'+attachmentlist[p].attachnameurl+'" type="application/x-mpegurl" id="target"></video>' */
   /* ss+='<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="100" height="100" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}"><source src="'+attachmentlist[p].attachnameurl+'" type="video/mp4"></source><source src="'+attachmentlist[p].attachnameurl+'" type="video/webm"></source><source src="'+attachmentlist[p].attachnameurl+'" type="video/ogg"></source><p class="vjs-no-js">to view this video please enable javascript, and consider upgrading to a web browser that<a href="http://videojs.com/html5-video-support/" target="_blank">supports html5 video</a></p></video>' */
   /* ss+='<embed src="'+attachmentlist[p].attachnameurl+'" quality= "high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>' */
  }
  if(attachmentlist[p].type==10121001){
   ss += '<img src="'+attachmentlist[p].attachnameurl+'" height="100" width="100" >';
  }
  }
  ss +='</div> ';
  cc.push(ss);
  cc.push('</div>');
 }
 cc.push('</td>');
 return cc.join('');
 },
 onafterrender: function(target){
 var rows = $(target).datagrid('getrows');
 $.each(rows, function (index, row) { 
  $('#title_'+row.postid).highlight($('#content').val());
  $('#content_'+row.postid).highlight($('#content').val());
 }); 
 }
});//重绘视图结束
 
$(function(){
 var dg =$('#dg').datagrid({//渲染表格
 view: cardview,//更换默认视图
 rowstyler: function(index,row){
  if((index+1)%2 ==0){//隔行变色
  return {class:'datagrid-double-color'}; // return inline style
  }
 },
 url:'/channelpost/showchannelpost',
 columns:[[
  {field:'postid',title:'帖子', width:'20%',
  }
 ]],
 ondblclickrow:function(index,row){
  window.open("/channelpost/getchannelpostdetail?postid="+row.postid,"channelpostdetail","scrollbars=yes,copyhistory=yes,width=1200, height=600");
 },
 nowrap:false,
 pagesize: 10,//每页显示的记录条数，默认为15
 pagelist: [10,20,30],
 onloadsuccess:function(data){
  if(data.errcode == -1){
  showresult("更新出错");
  }else if(data.errcode == 1){
  }else{
  showresult("更新成功");
  }
 }
 });
});
 
$("#submitsearch").click(function(){
 selectfunction();
});
 
function selectfunction(){
 var content=$('#content').val();
 var nickname=$('#author').val();
 var dealtype=$('#poststatus').val();
 var isdelete=$('#isdeleted').val();
 var startdate=$('#startdate').val();
 var enddate=$('#enddate').val();
 var forumidarray = $('#forumids').combobox('getvalues');
 var brandidarray = $('#brandids').combobox('getvalues');
 var brandids ="";
 var forumids ="";
 for(var o in brandidarray){
 brandids +=brandidarray[o];
 if(o <brandidarray.length-1){
  brandids +=",";
 }
 }
 for(var o in forumidarray){
 forumids +=forumidarray[o];
 if(o <forumidarray.length-1){
  forumids +=",";
 }
 }
 var str=$(".validatebox-text.validatebox-invalid:first");
 if(str.val()==null){
 $('#dg').datagrid('load',{
  "content":content,
  "nickname":nickname,
  "dealtypes":dealtype,
  "isdeletes":isdelete,
  "startdate":startdate,
  "enddate":enddate,
  "brandids":brandids,
  "channelids":forumids
 });
 }else{
 alert("请检查填写错误的数据！");
 }
}
 
 
function allselectrow(tablename) { //全选
 $('#' + tablename).datagrid('selectall'); 
} 
 
function unselectrow(tablename) { //反选 
 var s_rows = $.map($('#' + tablename).datagrid('getselections'), 
  function(n) { 
  return $('#' + tablename).datagrid('getrowindex', n); 
  }); 
 $('#' + tablename).datagrid('selectall'); 
 $.each(s_rows, function(i, n) { 
 $('#' + tablename).datagrid('unselectrow', n); 
 }); 
}
 
 
function dodel(column,value,msg) {
 //返回选中多行
 var selrow = $('#dg').datagrid('getselections')
 //判断是否选中行
 if (selrow.length==0) {
 $.messager.alert("提示", "请选择"+msg+"行！", "info");
 return;
 }else{
 var temid="";
 //批量获取选中行的id
 for (i = 0; i < selrow.length;i++) {
 if(selrow[i].isadmindel==1){
  $.messager.alert("提示", "已经有选中行的状态是'管理员删除',请去掉此行重试", "info");
  return;
 }
 /* if(selrow[i].istop==1){
  $.messager.confirm('提示', '你选中要删除的里面包含置顶帖，是否继续？', function (r) {
  if (!r) {
   return;
  }
  });
 } */
 if (temid =="") {
  temid = selrow[i].postid
  }else{
  temid = selrow[i].postid + "," + temid;
  }
 } 
 $.messager.confirm('提示', '是否'+msg+'选中数据?', function (r) {
  if (!r) {
  return;
  }else{
  $.ajax({ 
   type : "post", //提交方式 
   async: false,
   url : "/channelpost/updatechannel",//路径 
   data : {item:column,value:value,strpostids:temid},
   success:function(data) {
   if(data=='ok'){
  $.messager.alert("提示", "ok", "info");
  selectfunction();
   }else{
  $.messager.alert("提示", "error", "info");
   }
   }
  });
  }
 });
 
 }
};
 
 
 
function dotop(column,value,msg) {
 //返回选中多行
 var selrow = $('#dg').datagrid('getselections')
 //判断是否选中行
 if (selrow.length==0) {
 $.messager.alert("提示", "请选择"+msg+"行！", "info");
 return;
 }else{
 var temid="";
 //批量获取选中行的id
 for (i = 0; i < selrow.length;i++) {
 if(selrow[i].istop==1){
  $.messager.alert("提示", "已经有选中行的状态是'置顶',请去掉此行重试", "info");
  return;
 }
 if(selrow[i].isadmindel==1){
  $.messager.alert("提示", "选中行的状态有'管理员删除',请去掉此行重试", "info");
  return;
 }
 if(selrow[i].isdelete==1){
  $.messager.alert("提示", "选中行的状态有'用户删除',请去掉此行重试", "info");
  return;
 }
  if (temid =="") {
  temid = selrow[i].postid
  }else{
  temid = selrow[i].postid + "," + temid;
  }
 } 
 $.messager.confirm('提示', '是否'+msg+'选中数据?', function (r) {
  if (!r) {
  return;
  }
  $.ajax({ 
  type : "post", //提交方式 
  url : "/channelpost/updatechannel",//路径 
  data : {item:column,value:value,strpostids:temid},
  success:function(data) {
   if(data=='ok'){
   $.messager.alert("提示", "ok", "info");
   selectfunction();
   }else{
   $.messager.alert("提示", "error", "info");
   }
  }
  });
 });
 }
};
 
 
function doofftop(column,value,msg) {
 //返回选中多行
 var selrow = $('#dg').datagrid('getselections')
 //判断是否选中行
 if (selrow.length==0) {
 $.messager.alert("提示", "请选择"+msg+"行！", "info");
 return;
 }else{
 var temid="";
 //批量获取选中行的id
 for (i = 0; i < selrow.length;i++) {
 if(selrow[i].istop!=1){
  $.messager.alert("提示", "只有'置顶'的才能取消置顶,检查选中项", "info");
  return;
 }else{
  if (temid =="") {
  temid = selrow[i].postid
  }else{
  temid = selrow[i].postid + "," + temid;
  }
 }
 } 
 $.messager.confirm('提示', '是否'+msg+'选中数据?', function (r) {
  if (!r) {
  return;
  }
  $.ajax({ 
  type : "post", //提交方式 
  url : "/channelpost/updatechannel",//路径 
  data : {item:column,value:value,strpostids:temid},
  success:function(data) {
   if(data=='ok'){
   $.messager.alert("提示", "ok", "info");
   selectfunction();
   }else{
   $.messager.alert("提示", "error", "info");
   }
  }
  });
 });
 }
};
</script>
</body>
</html>

二：后台返回的数据格式
后台返回的数据格式和经典的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<bschannelpostattach> channelpostattach;//附件
 
 private string nickname;
 private string avatar;
 private string channelname;
 private string brandname;
 
 private string startdate;
 private string enddate;
 private list<integer> brandids;
 private list<integer> 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：

<resultmap type="com.yonyou.wechatmng.domain.bschannelpost" id="channelpost">
  <id property="postid" column="postid" /> 
  <collection property="channelpostattach" javatype="arraylist" select="selectattach" column="postid" oftype="com.yonyou.wechatmng.domain.bschannelpostattach"></collection> 
 </resultmap>
 
 <select id="selectattach" parametertype="int" resulttype="com.yonyou.wechatmng.domain.bschannelpostattach">
  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>
 
 <select id="getchannelpost" parametertype="com.yonyou.wechatmng.domain.bschannelpost" resultmap="channelpost">
 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
 <if test="content!=null and content!=''">
  and (p.content like '%${content}%' or p.title like '%${content}%' )
 </if>
 <if test="nickname!=null and nickname!=''">
  and u.nickname like '%${nickname}%'
 </if>
 <if test="dealtype!=0">
  and p.deal_type=#{dealtype}
 </if>
 <if test="isdelete==1">
  and (is_delete=0 and is_admindel=0)
 </if>
 <if test="isdelete==2">
  and (is_delete=1 or is_admindel=1)
 </if>
 <if test="isdelete==3">
  and is_top=1
 </if>
 <if test="brandids !=null and brandids.size()>0">
   and p.brand_id in
  <foreach collection="brandids" item="id" index="index" open="(" close=")" separator=",">
   #{id}
  </foreach>
 </if>
 <if test="channelids !=null and channelids.size()>0">
   and p.channel_id in
  <foreach collection="channelids" item="id" index="index" open="(" close=")" separator=",">
   #{id}
  </foreach>
 </if>
 <if test="(startdate!=null and startdate!='') and (enddate==null or enddate=='')">
  and p.create_date>#{begindate}
 </if>
 <if test="(startdate==null or startdate=='') and (enddate!=null and enddate!='')">
  and p.create_date <#{enddate}
 </if>
 <if test="(startdate!=null and startdate!='') and (enddate!=null and enddate!='')">
  and p.create_date between #{begindate} and #{enddate}
 </if>
  order by p.create_date desc limit #{begin},#{end}
 </select>

总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对CodeAE代码之家的支持。
原文链接：https://www.cnblogs.com/GH0522/p/9796791.html

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

相关帖子

浏览过的版块

MySQL视图和索引专篇精讲

Java8的Lambda和排序

用Java8 stream处理数据

Spring Security登陆流程讲解

win11系统怎么修改软件图标？

云骑士自定义重装系统教程

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

PHP小丑 LV3