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" style="padding:2px 5px;">

  <div id="p" class="easyui-panel" title="" data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true" style="width:100%;background-color:#F5F5F5;border-width: 0px;margin:10px;padding-bottom:10px;;border-bottom-width: 1px;">
  <div>
   <form name="searchform" method="post" action="" id="searchform" >
   <input type="hidden" name="ss" id="ss">
   <div style="margin-top:10px;width:100%;">
   <span>标题/内容:</span>
   <input class="easyui-textbox" id="content" name="content" style="width:20%" data-options="prompt:'主题'">
   <span style="margin-left:10px;">用户名: </span>
   <input class="easyui-textbox" id="author" name="author" style="width:10%" data-options="prompt:'单行输入'">
   <span style="margin-left:10px;">频道: </span>
   <input class="easyui-combobox" name="forumIds" id="forumIds" panelHeight="auto" style="width:10%" data-options="
   url:'/channelPost/getChannel',
   method:'get',
   valueField:'channelId',
   textField:'channelName',
   multiple:true,
   prompt:'多选',
   panelHeight:'auto'
   ">
   <span style="margin-left:10px;" id="ssss">品牌: </span>
   <input class="easyui-combobox" name="brandIds" id="brandIds" panelHeight="auto" style="width:10%" data-options="
   url:'/channelPost/getBrand',
   method:'get',
   valueField:'brandId',
   textField:'brandName',
   multiple:true,
   prompt:'多选',
   panelHeight:'auto'
   ">
   <span style="margin-left:10px;">分类: </span>

   <select class="easyui-combobox" name="postStatus" id="postStatus" data-options=" prompt:'单选'" style="width:10%;">
    <option value=0>全部</option>
    <option value=10481001 >出售</option>
    <option value=10481002>求购</option>
   </select>
   <span style="margin-left:10px;">帖子状态: </span>
   <select class="easyui-combobox" name="isDeleted" id="isDeleted" data-options=" prompt:'单选'" style="width:10%;">
    <option value=0>全部</option>
    <option value=1>未删除</option>
    <option value=2>已删除</option>
    <option value=3>置顶</option>
   </select>

   </div>
   <div style="margin-top:10px;width:90%;">
   <span>发布时间:</span>
   <input class="easyui-datetimebox" id="startDate" name="startDate" style="width:16%;"> -
   <input class="easyui-datetimebox" id="endDate" name="endDate" style="width:16%;">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="submitSearch" style="float:right;" class="easyui-linkbutton" iconCls="icon-search">查询</a>
   </div>
   <div style="margin-top:10px;width:90%;">
    <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" style="margin-left:35px;" onclick="allselectRow('dg')">全选</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" style="margin-left:35px;" onclick="unselectRow('dg')">反选</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" style="margin-left:35px;" onclick="doTop('is_top',1,'置顶')" >置顶</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" style="margin-left:35px;" onclick="doDel('is_admindel',1,'删除')">管理员删除</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" style="margin-left:35px;" onclick="doOffTop('is_top',0,'取消置顶')" >取消置顶</a></td>
    <div style="width:100px;float:right;">
    <select class="easyui-combobox" panelHeight="auto" style="width:100px;float:left;" 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" style="width:100%;padding: 0px;" 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'" style="width:200px;height:60px;padding:10px;">
  <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 + ' style="padding:10px 5px;border:0;">');
  if ( !frozen && rowData.postId){
   var _isTop = rowData.isTop;
   var _isAdmindel = rowData.isAdmindel;
   var _isDeleted = rowData.isDelete;
   var cs = "";
   if(_isAdmindel ==1){
   cs = cs+'<span style=" display:inline-block;padding: 3px 4px;color:white;background-color:#767d88;">管理员删除</span>';
   }
   if(_isDeleted ==1){
   cs = cs+'<span style=" display:inline-block;padding: 3px 4px;color:white;background-color:#35373c;">用户删除</span>';
   }
   if(_isTop==1){
   cs = cs+'<span style=" display:inline-block;padding: 3px 4px;color:white;background-color:#4b8ae8">置顶</span>';
   }
   cc.push('<div style="float:left;margin-left:20px;">');
   cc.push('<div > <img src="'+rowData.avatar+'" height="100" width="100" ></div>');
   cc.push('<div><span class="c-label">用户名:</span> <span style="color:blue;">' + rowData.nickName + '</span></div>');
   cc.push('<div> '+rowData.channelName+'>'+ rowData.brandName + '</div>');
   cc.push('<div> 发布时间: '+rowData.createDate + '</div>');
   cc.push('</div>');
   cc.push('<div style="margin-left:230px;">');
   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" style="width:100px; height: 100px"></embed>' */
   }
   if(attachmentList[p].type==10121001){
    ss += '<img style="margin-top:10px;margin-left:10px;" 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>

总结

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

赞 (0)

相关推荐

  • jQuery Easyui Tabs扩展根据自定义属性打开页签

    easyui是一个轻量级的后台管理系统框架,各种组件均有,使用简单方便,现在已经有免费版的License了. 1.增加扩展 <script type="text/javascript" > /** * @author {kexb} easyui-tab扩展根据id切换页面 */ $.extend($.fn.tabs.methods, { getTabById: function (jq, id) { var tabs = $.data(jq[0], 'tabs').tabs

  • 如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上

    使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column col : columnList ){ for(Combobox cbb : col.getCombobox()){ if(cbb != null){ str += "var ed" + ci + " = $j(\"#"+RandomNumber+"

  • Jquery Easyui自定义下拉框组件使用详解（21）

    Jquery Easyui自定义下拉框组件使用详解（21）

    本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下 加载方式 JS调用加载 自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>

  • Easyui Datagrid自定义按钮列(最后面的操作列)

    Easyui Datagrid自定义按钮列(最后面的操作列)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式,js方式暂时还没用到 首先是HTML部分 <table id="dg" title="学生信息" class="easyui-datagrid" url="${ctx}listStudent.do" toolbar=&qu

  • jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容

    jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容

    onLoadSuccess : function(data) { if(!data.success){ //添加一个新数据行,第一列的值为你需要的提示信息,然后将其他列合并到第一列来,注意修改colspan参数为你columns配置的总列数 $(this).datagrid( 'appendRow', { portId : '<div style="text-align:center;color:red">'+data.msg+'</div>' }).datag

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

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

    前言 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. 本文主要给大家介绍了关于java easyUI自定义网格视图的相关内容,下面话不多说了,来一起看看详细的介绍吧 方法如下: 一:前台代码如下 <!DOCTYPE html> <html> <head> <meta charset=

  • SpringBoot使用Thymeleaf自定义标签的实例代码

    此篇文章内容仅限于 描述springboot与 thy 自定义标签的说明,所以你在看之前,请先会使用springboot和thymeleaf!! 之前写过一篇是springMVC与thymeleaf 的自定义标签(属于自定义方言的属性一块,类似thy的th:if和th:text等)文章,如果你想了解,以下是地址: 点击>>Thymeleaf3.0自定义标签属性 这篇例子可以实现你的分页标签实现等功能,不会讲一堆的废话和底层的原理(自行百度),属于快速上手教程,请认真看以下内容! PS: 请允许

  • EasyUI创建人员树的实例代码

    EasyUI创建人员树的实例代码

    最近做了一个树状的下拉列表,在这里记录一下,以后可以直接使用 项目中的树状下拉列表是用来选择人员用的,具体实现展示如下: 先说一说功能,左边的人员数是提供选人的,当点击中间的按钮,选中的人员会直接移到右边,如果要删除已选中的人员,只需要双击右边人的姓名即可,点击确定进行集体的业务逻辑操作,一般就是新增人员到某一个表中. 我们再来看看这个DIV的具体代码,由于项目中在多个地方都使用到了这个人员树,所以我把这个DIV抽象出来当作一个公共的jsp页面.如需调用,只需要include这个jsp即可 us

  • 微信公众号测试账号自定义菜单的实例代码

    自定义菜单接口可实现多种类型按钮,如下: 1.click:点击推事件 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互: 2.view:跳转URL 用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息. 3.scancode_push:扫码推事件 用户点击按钮后,微信客户

  • 三种Java打印PDF文档的实例代码

    以下内容归纳了通过Java程序打印PDF文档时的3种情形.即: 1 静默打印 2 显示打印对话框打印 3 打印PDF时自定义纸张大小 使用工具:Spire.PDF for Java Jar文件获取及导入: 方法1:下载jar包.下载后,解压文件,并将lib文件夹下的Spire.Pdf.jar导入java程序. 方法2:可通过maven库导入.参考导入方法. Java代码示例 [示例1]静默打印 即通过使用默认打印机直接打印PDF文档.打印时,我们可以设置打印份数,设置纸张打印页边距等. impo

  • Java使用正则表达式(regex)匹配中文实例代码

    只能输入中文 /** * 22.验证汉字 * 表达式 ^[\u4e00-\u9fa5]{0,}$ * 描述 只能汉字 * 匹配的例子 清清月儿 */ @Test public void a1() { Scanner sc = new Scanner(System.in); String input = sc.nextLine(); String regex = "^[\\u4e00-\\u9fa5]*$"; Matcher m = Pattern.compile(regex).matc

  • Java web的读取Excel简单实例代码

    Java web的读取Excel简单实例代码

    目录结构: Data.xls数据: 后台页面: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println(this.getServletContext().getRealPath ("/")); try{ Workbook wb = Workbook.getWorkbook(

  • Java Web 简单的分页显示实例代码

    Java Web 简单的分页显示实例代码

    本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据

  • java 日期各种格式之间的相互转换实例代码

    java 日期各种格式之间的相互转换实例代码 java日期各种格式之间的相互转换,直接调用静态方法 实例代码: java日期各种格式之间的相互转换,直接调用静态方法 package com.hxhk.cc.util; import java.text.SimpleDateFormat; import java.util.Date; import com.lowagie.text.pdf.codec.postscript.ParseException; public class DateUtil

  • java 文件大数据Excel下载实例代码

    java 文件大数据Excel下载实例代码 excel可以用xml表示.故可以以此来实现边写边下载文件 package com.tydic.qop.controller; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.I

随机推荐