您好,登錄后才能下訂單哦!
前言
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化,互動(dòng),JavaScript應(yīng)用程序,提供必要的功能。
使用easyui你不需要寫(xiě)很多代碼,你只需要通過(guò)編寫(xiě)一些簡(jiǎn)單HTML標(biāo)記,就可以定義用戶界面。
本文主要給大家介紹了關(guān)于java easyUI自定義網(wǎng)格視圖的相關(guān)內(nèi)容,下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
方法如下:
一:前臺(tái)代碼如下
<!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>標(biāo)題/內(nèi)容:</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>求購(gòu)</option> </select> <span >帖子狀態(tài): </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>發(fā)布時(shí)間:</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" 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" 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" 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" 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" onclick="doOffTop('is_top',0,'取消置頂')" >取消置頂</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"> 后臺(tái)處理中。。。 </div> </div> <script type="text/javascript"> var cardview = $.extend({}, $.fn.datagrid.defaults.view, {//重繪視圖開(kāi)始 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> 發(fā)布時(shí)間: '+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+'配件編號(hào):'+jEmoji.unifiedToHTML(rowData.title )+ '</div>'); }else{ cc.push('<div id="title_'+rowData.postId+'"> '+cs+'配件編號(hào):</div>'); } }else{ if(rowData.title != null){ cc.push('<div id="title_'+rowData.postId+'"> '+cs+'標(biāo)題:'+jEmoji.unifiedToHTML(rowData.title )+ '</div>'); }else{ cc.push('<div id="title_'+rowData.postId+'"> '+cs+'標(biāo)題:</div>'); } } if(rowData.content != null){ cc.push('<div class="c-content" id="content_'+rowData.postId+'"> '+'內(nèi)容:'+jEmoji.unifiedToHTML(rowData.content )+ '</div>'); }else{ cc.push('<div class="c-content" id="content_'+rowData.postId+'"> '+'內(nèi)容:</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 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()); }); } });//重繪視圖結(jié)束 $(function(){ var dg =$('#dg').datagrid({//渲染表格 view: cardview,//更換默認(rèn)視圖 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,//每頁(yè)顯示的記錄條數(shù),默認(rèn)為15 pageList: [10,20,30], onLoadSuccess:function(data){ if(data.errcode == -1){ showResult("更新出錯(cuò)"); }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("請(qǐng)檢查填寫(xiě)錯(cuò)誤的數(shù)據(jù)!"); } } 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("提示", "請(qǐng)選擇"+msg+"行!", "info"); return; }else{ var temID=""; //批量獲取選中行的id for (i = 0; i < selRow.length;i++) { if(selRow[i].isAdmindel==1){ $.messager.alert("提示", "已經(jīng)有選中行的狀態(tài)是'管理員刪除',請(qǐng)去掉此行重試", "info"); return; } /* if(selRow[i].isTop==1){ $.messager.confirm('提示', '你選中要?jiǎng)h除的里面包含置頂帖,是否繼續(xù)?', function (r) { if (!r) { return; } }); } */ if (temID =="") { temID = selRow[i].postId }else{ temID = selRow[i].postId + "," + temID; } } $.messager.confirm('提示', '是否'+msg+'選中數(shù)據(jù)?', 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("提示", "請(qǐng)選擇"+msg+"行!", "info"); return; }else{ var temID=""; //批量獲取選中行的id for (i = 0; i < selRow.length;i++) { if(selRow[i].isTop==1){ $.messager.alert("提示", "已經(jīng)有選中行的狀態(tài)是'置頂',請(qǐng)去掉此行重試", "info"); return; } if(selRow[i].isAdmindel==1){ $.messager.alert("提示", "選中行的狀態(tài)有'管理員刪除',請(qǐng)去掉此行重試", "info"); return; } if(selRow[i].isDelete==1){ $.messager.alert("提示", "選中行的狀態(tài)有'用戶刪除',請(qǐng)去掉此行重試", "info"); return; } if (temID =="") { temID = selRow[i].postId }else{ temID = selRow[i].postId + "," + temID; } } $.messager.confirm('提示', '是否'+msg+'選中數(shù)據(jù)?', 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("提示", "請(qǐng)選擇"+msg+"行!", "info"); return; }else{ var temID=""; //批量獲取選中行的id for (i = 0; i < selRow.length;i++) { if(selRow[i].isTop!=1){ $.messager.alert("提示", "只有'置頂'的才能取消置頂,檢查選中項(xiàng)", "info"); return; }else{ if (temID =="") { temID = selRow[i].postId }else{ temID = selRow[i].postId + "," + temID; } } } $.messager.confirm('提示', '是否'+msg+'選中數(shù)據(jù)?', 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>
二:后臺(tái)返回的數(shù)據(jù)格式
后臺(tái)返回的數(shù)據(jù)格式和經(jīng)典的easyui的數(shù)據(jù)格式是一樣的
數(shù)據(jù)格式:
{"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":"新車(chē)交易","brandName":"長(zhǎng)安鈴木","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}]}
三:視圖效果
四:后臺(tái)數(shù)據(jù)的獲取
后臺(tái)數(shù)據(jù)的獲取為一對(duì)多,因?yàn)橐粋€(gè)帖子會(huì)包含多個(gè)圖片附件。
帖子實(shí)體類:
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; }
附件實(shí)體類:
import lombok.Data; @Data//lombok 免寫(xiě)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>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。