JSTL标签 封装jqGrid表格插件

2024-01-06 00:58

本文主要是介绍JSTL标签 封装jqGrid表格插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jqGrid:

由于jqgrid使用起来参数较多,用起来总觉得麻烦。而且如果一个新人进来,还得学学它的api,笔者就想能不能用jstl标签封装一下,只要这么写,便可以用起来jqgrid。

[html]  view plain copy
  1. <i:table>  
  2.     <i:tr>  
  3.         <i:th>Head 1-1</i:th>  
  4.         <i:th>Head 1-2</i:th>  
  5.     </i:tr>  
  6.     <i:tr>  
  7.         <i:td>Row 1-1</i:td>  
  8.         <i:td>Row 1-2</i:td>  
  9.     </i:tr>  
  10.     <i:tr>  
  11.         <i:td>Row 1-1</i:td>  
  12.         <i:td>Row 1-2</i:td>  
  13.     </i:tr>  
  14. </i:table>  

正常情况下,只需引入如下css和js库,就能正常使用jqgrid了:

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>jqGrid 使用</title>  
  6.     <link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jquery-ui/themes/cupertino/jquery-ui-1.8.20.custom.css'/>">  
  7.     <link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jqGrid/css/ui.jqgrid.css'/>">  
  8.     <script type="text/javascript" src="<c:url value="/js/jQuery/jquery-1.7.2.js"/>"></script>  
  9.     <script type="text/javascript" src="<c:url value="/js/jQuery/jquery-ui/jquery-ui-1.8.20.custom.min.js"/>"></script>  
  10.     <script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/i18n/grid.locale-cn.js"/>"></script>  
  11.     <script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/jquery.jqGrid.min.js"/>"></script>  
  12. </head>  
  13. <body>  
  14.     <table id="data"></table>  
  15.     <div id="dataPager"></div>  
  16.     <script type="text/javascript">  
  17.     jQuery(function(){  
  18.         jQuery("#data").jqGrid({  
  19.             datatype: "local",  
  20.             //width: "100%",  
  21.             height: 400,  
  22.             autowidth:"true",  
  23.             colNames:["编号","用户名", "性别", "邮箱", "QQ","手机号","出生日期",''],  
  24.             colModel:[  
  25.                     {name:"id",index:"id", width:60, sorttype:"int",frozen:true},  
  26.                     {name:"userName",index:"userName", width:90,editable:true,frozen:true},  
  27.                     {name:"gender",index:"gender", width:90},  
  28.                     {name:"email",index:"email", width:125,sorttype:"string"},  
  29.                     {name:"QQ",index:"QQ", width:100},  
  30.                     {name:"mobilePhone",index:"mobilePhone", width:120},  
  31.                     {name:"birthday",index:"birthday", width:100, sorttype:"date"},  
  32.                     {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',  
  33.                         formatoptions:{keys:true}}  
  34.       
  35.             ],  
  36.             sortname:"gender",//默认排序字段  
  37.             sortorder:"asc",//排序方式  
  38.             viewrecords:true,//显示记录条数:  1 - 9 条  
  39.             rowNum:5,//默认每页显示几条  
  40.             rowList:[1,3,5],//可选每页显示几条  
  41.             multiselect: true,  
  42.             pager:"#dataPager",  
  43.             caption: "标题",  
  44.             editurl:"baseinfo/toEditProductType.action"  
  45.         });  
  46.         jQuery("#data").jqGrid('navGrid',"#dataPager",{edit:false,add:false,del:false});  
  47.         jQuery("#data").jqGrid('inlineNav',"#dataPager");  
  48.         jQuery("#data").jqGrid('setFrozenColumns');  
  49.         var mydata = [  
  50.                     {id:"1",userName:"polaris",gender:"男",email:"fef@163.com",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},  
  51.                     {id:"2",userName:"李四",gender:"女",email:"faf@gmail.com",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},  
  52.                     {id:"3",userName:"王五",gender:"男",email:"fae@163.com",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},  
  53.                     {id:"4",userName:"马六",gender:"女",email:"aaaa@gmail.com",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},  
  54.                     {id:"5",userName:"赵钱",gender:"男",email:"4fja@gmail.com",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},  
  55.                     {id:"6",userName:"小毛",gender:"男",email:"ahfi@yahoo.com",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},  
  56.                     {id:"7",userName:"小李",gender:"女",email:"note@sina.com",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},  
  57.                     {id:"8",userName:"小三",gender:"男",email:"oefh@sohu.com",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},  
  58.                     {id:"9",userName:"孙先",gender:"男",email:"76454533@qq.com",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"},  
  59.            ];  
  60.         for(var i=0;i<=mydata.length;i++){  
  61.                 jQuery("#data").jqGrid("addRowData",i+1,mydata[i]);  
  62.         }  
  63.     });  
  64.     </script>  
  65. </body>  
  66. </html>  

其中参数colNames是一个数组,也就是表格标题行。colModel是用来设置每一列的参数,例如列宽,是否冻结,是否可以编辑等等。

还有一个就是准备数据了,也就是上例中的mydata数组。

效果图如下(css是真心不错):


现在要用jstl标签实现这个效果(说白了,就是通过jstl标签生成那一堆js而已)。

为此我分别创建了TableTag,TrTag,TdTag,ThTag ,还有TheadTag,TbodyTag,TfootTag(不过这3个Tag和HTML中的一样,可有可无)



ThTag 要处理jqgrid所需的2个属性,一个是colNames,令一个是colModel数组中的各个元素(由TrTag进行整合colModel)

TdTag 要处理的就是mydata数组中的一个元素中的各个属性,(由TrTag进行整合)

TrTag 则是将ThTag返回的数据,进行整理,形成:

colNames:["标题一","标题二".....],

colModels:[{每一列的设置},{每一列的设置},{每一列的设置}.....]

而TableTag则是将TrTag返回的数据,以及其它属性进行一些简单整合(例如jqgrid的width参数,height参数等等..)


上代码片段:

ThTag.java

[java]  view plain copy
  1. package com.xcy.core.web.tag;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.StringWriter;  
  5.   
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.jsp.JspException;  
  8. import javax.servlet.jsp.JspWriter;  
  9. import javax.servlet.jsp.PageContext;  
  10. import javax.servlet.jsp.tagext.SimpleTagSupport;  
  11.   
  12. import org.apache.commons.lang.StringUtils;  
  13.   
  14. public class ThTag extends SimpleTagSupport{  
  15.     private String align;  
  16.     private String cellattr;  
  17.     private String classes;  
  18.     private String datefmt;  
  19.     private String defval;  
  20.     private String editable;  
  21.     private String editoptions;  
  22.     private String editrules;  
  23.     private String edittype;  
  24.     private String firstsortorder;  
  25.     private String fixed;  
  26.     private String formoptions;  
  27.     private String formatoptions;  
  28.     private String formatter;  
  29.     private String frozen;  
  30.     private String hidedlg;  
  31.     private String hidden;  
  32.     private String index;  
  33.     private String jsonmap;  
  34.     private String key;  
  35.     private String label;  
  36.     private String name;  
  37.     private String resizable;  
  38.     private String search;  
  39.     private String searchoptions;  
  40.     private String sortable;  
  41.     private String sorttype;  
  42.     private String stype;  
  43.     private String surl;  
  44.     private String template;  
  45.     private String title;  
  46.     private String width;  
  47.     private String xmlmap;  
  48.     private String unformat;  
  49.     private String viewable;  
  50.       
  51.     public void setAlign(String align) {  
  52.         this.align = align;  
  53.     }  
  54.   
  55.     public void setCellattr(String cellattr) {  
  56.         this.cellattr = cellattr;  
  57.     }  
  58.   
  59.     public void setClasses(String classes) {  
  60.         this.classes = classes;  
  61.     }  
  62.   
  63.     public void setDatefmt(String datefmt) {  
  64.         this.datefmt = datefmt;  
  65.     }  
  66.   
  67.     public void setDefval(String defval) {  
  68.         this.defval = defval;  
  69.     }  
  70.   
  71.     public void setEditable(String editable) {  
  72.         this.editable = editable;  
  73.     }  
  74.   
  75.     public void setEditoptions(String editoptions) {  
  76.         this.editoptions = editoptions;  
  77.     }  
  78.   
  79.     public void setEditrules(String editrules) {  
  80.         this.editrules = editrules;  
  81.     }  
  82.   
  83.     public void setEdittype(String edittype) {  
  84.         this.edittype = edittype;  
  85.     }  
  86.   
  87.     public void setFirstsortorder(String firstsortorder) {  
  88.         this.firstsortorder = firstsortorder;  
  89.     }  
  90.   
  91.     public void setFixed(String fixed) {  
  92.         this.fixed = fixed;  
  93.     }  
  94.   
  95.     public void setFormoptions(String formoptions) {  
  96.         this.formoptions = formoptions;  
  97.     }  
  98.   
  99.     public void setFormatoptions(String formatoptions) {  
  100.         this.formatoptions = formatoptions;  
  101.     }  
  102.   
  103.     public void setFormatter(String formatter) {  
  104.         this.formatter = formatter;  
  105.     }  
  106.   
  107.     public void setFrozen(String frozen) {  
  108.         this.frozen = frozen;  
  109.     }  
  110.   
  111.     public void setHidedlg(String hidedlg) {  
  112.         this.hidedlg = hidedlg;  
  113.     }  
  114.   
  115.     public void setHidden(String hidden) {  
  116.         this.hidden = hidden;  
  117.     }  
  118.   
  119.     public void setIndex(String index) {  
  120.         this.index = index;  
  121.     }  
  122.   
  123.     public void setJsonmap(String jsonmap) {  
  124.         this.jsonmap = jsonmap;  
  125.     }  
  126.   
  127.     public void setKey(String key) {  
  128.         this.key = key;  
  129.     }  
  130.   
  131.     public void setLabel(String label) {  
  132.         this.label = label;  
  133.     }  
  134.   
  135.     public void setName(String name) {  
  136.         this.name = name;  
  137.     }  
  138.   
  139.     public void setResizable(String resizable) {  
  140.         this.resizable = resizable;  
  141.     }  
  142.   
  143.     public void setSearch(String search) {  
  144.         this.search = search;  
  145.     }  
  146.   
  147.     public void setSearchoptions(String searchoptions) {  
  148.         this.searchoptions = searchoptions;  
  149.     }  
  150.   
  151.     public void setSortable(String sortable) {  
  152.         this.sortable = sortable;  
  153.     }  
  154.   
  155.     public void setSorttype(String sorttype) {  
  156.         this.sorttype = sorttype;  
  157.     }  
  158.   
  159.     public void setStype(String stype) {  
  160.         this.stype = stype;  
  161.     }  
  162.   
  163.     public void setSurl(String surl) {  
  164.         this.surl = surl;  
  165.     }  
  166.   
  167.     public void setTemplate(String template) {  
  168.         this.template = template;  
  169.     }  
  170.   
  171.     public void setTitle(String title) {  
  172.         this.title = title;  
  173.     }  
  174.   
  175.     public void setWidth(String width) {  
  176.         this.width = width;  
  177.     }  
  178.   
  179.     public void setXmlmap(String xmlmap) {  
  180.         this.xmlmap = xmlmap;  
  181.     }  
  182.   
  183.     public void setUnformat(String unformat) {  
  184.         this.unformat = unformat;  
  185.     }  
  186.   
  187.     public void setViewable(String viewable) {  
  188.         this.viewable = viewable;  
  189.     }  
  190.   
  191.     @Override  
  192.     public void doTag() throws JspException, IOException {  
  193.         PageContext pageContext = (PageContext)this.getJspBody().getJspContext();   
  194.         HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();  
  195.         JspWriter out = pageContext.getOut();  
  196.         StringWriter sw = new StringWriter();  
  197.         getJspBody().invoke(sw);  
  198.         String thInnerText = sw.getBuffer().toString();  
  199.         thInnerText = StringUtils.replace(thInnerText, "\"""\\\"");  
  200.         String jsonProperties = TagTools.KeyValuePair2Json("align:"+this.align+":false","cellattr:"+this.cellattr+":false","classes:"+this.classes+":false","datefmt:"+this.datefmt+":false","defval:"+this.defval+":false","editable:"+this.editable+":false","editoptions:"+this.editoptions+":false","editrules:"+this.editrules+":false","edittype:"+this.edittype+":false","firstsortorder:"+this.firstsortorder+":false","fixed:"+this.fixed+":false","formoptions:"+this.formoptions+":false","formatoptions:"+this.formatoptions+":false","formatter:"+this.formatter+":false","frozen:"+this.frozen+":true","hidedlg:"+this.hidedlg+":false","hidden:"+this.hidden+":false","index:"+this.index+":false","jsonmap:"+this.jsonmap+":false","key:"+this.key+":false","label:"+this.label+":false","name:"+this.name+":false","resizable:"+this.resizable+":false","search:"+this.search+":false","searchoptions:"+this.searchoptions+":false","sortable:"+this.sortable+":false","sorttype:"+this.sorttype+":false","stype:"+this.stype+":false","surl:"+this.surl+":false","template:"+this.template+":false","title:"+this.title+":false","width:"+this.width+":false","xmlmap:"+this.xmlmap+":false","unformat:"+this.unformat+":false","viewable:"+this.viewable+":false");  
  201.         //jsonProperties是colModel部分,thInnerText.trim()则是colName部分  
  202.         String s = "{"+jsonProperties+"}_"+"\""+thInnerText.trim()+"\",;";  
  203.         out.write(s);  
  204.     }  
  205. }  

TdTag.java

[java]  view plain copy
  1. package com.xcy.core.web.tag;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.StringWriter;  
  5. import java.io.Writer;  
  6.   
  7. import javax.servlet.http.HttpServletRequest;  
  8. import javax.servlet.jsp.JspException;  
  9. import javax.servlet.jsp.JspWriter;  
  10. import javax.servlet.jsp.PageContext;  
  11. import javax.servlet.jsp.tagext.SimpleTagSupport;  
  12.   
  13. import org.apache.commons.lang.StringUtils;  
  14.   
  15. public class TdTag extends SimpleTagSupport{  
  16.       
  17.     private String name;  
  18.       
  19.     public String getName() {  
  20.         return name;  
  21.     }  
  22.   
  23.     public void setName(String name) {  
  24.         this.name = name;  
  25.     }  
  26.   
  27.     @Override  
  28.     public void doTag() throws JspException, IOException {  
  29.         PageContext pageContext = (PageContext)this.getJspBody().getJspContext();   
  30.         HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();  
  31.         JspWriter out = pageContext.getOut();  
  32.         StringWriter sw = new StringWriter();  
  33.         getJspBody().invoke(sw);  
  34.         String tdInnerText = sw.getBuffer().toString().trim();  
  35.         tdInnerText = StringUtils.replace(tdInnerText, "\"""\\\"");//解决双引号问题  
  36.         tdInnerText = tdInnerText.replaceAll("\\s{1,}"" ");  
  37.         //下面的变量s为mydata数组的每一个元素的一个键值对(也就是一个单元格的数据.  
  38.         String s = this.name+":\""+tdInnerText+"\",";  
  39.         out.write(s);  
  40.     }  
  41. }  


TrTag.java

[java]  view plain copy
  1. package com.xcy.core.web.tag;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.StringWriter;  
  5.   
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.jsp.JspException;  
  8. import javax.servlet.jsp.JspWriter;  
  9. import javax.servlet.jsp.PageContext;  
  10. import javax.servlet.jsp.tagext.SimpleTagSupport;  
  11.   
  12. public class TrTag extends SimpleTagSupport{  
  13.   
  14.     @Override  
  15.     public void doTag() throws JspException, IOException {  
  16.         PageContext pageContext = (PageContext)this.getJspBody().getJspContext();   
  17.         HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();  
  18.         JspWriter out = pageContext.getOut();  
  19.         StringWriter sw = new StringWriter();  
  20.         getJspBody().invoke(sw);  
  21.         String trInnerData = sw.getBuffer().toString().trim();  
  22.         //这个if用来判断子标签式th还是td  
  23.         if(trInnerData.startsWith("{")){  
  24.             trInnerData = trInnerData.replaceAll(";\\s+\\{"";{");  
  25.             String[] ths = trInnerData.split(";");  
  26.             StringBuffer colNames = new StringBuffer("colNames:[");  
  27.             StringBuffer colModel = new StringBuffer("colModel:[");  
  28.             for (int i = 0; i < ths.length; i++) {  
  29.                 String[] th = ths[i].split("_");  
  30.                 colModel.append(th[0]);  
  31.                 colNames.append(th[1]);  
  32.                 if(i!=ths.length-1){  
  33.                     colModel.append(",");  
  34.                 }else{  
  35.                     colNames.deleteCharAt(colNames.length()-1);  
  36.                 }  
  37.             }  
  38.             colModel.append("],");  
  39.             colNames.append("],");  
  40.             out.write(colNames.toString().trim());  
  41.             out.write(colModel.toString().trim());  
  42.         }else{  
  43.             StringBuffer datas = new StringBuffer("€{");  
  44.             trInnerData = trInnerData.replaceAll(",\\s+"",");  
  45.             datas.append(trInnerData).deleteCharAt(datas.length()-1).append("},");  
  46.             out.write(datas.toString().trim());  
  47.         }  
  48.     }  
  49.       
  50. }<span style="color:#ff0000;">  
  51. </span>  

TableTag.java

[java]  view plain copy
  1. package com.xcy.core.web.tag;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.StringWriter;  
  5. import java.io.Writer;  
  6. import java.util.ArrayList;  
  7. import java.util.List;  
  8.   
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.jsp.JspContext;  
  11. import javax.servlet.jsp.JspException;  
  12. import javax.servlet.jsp.JspWriter;  
  13. import javax.servlet.jsp.PageContext;  
  14. import javax.servlet.jsp.tagext.SimpleTagSupport;  
  15.   
  16. import com.xcy.core.web.validate.Validate;  
  17.   
  18. /** 
  19.  * @author Siuon 
  20.  * 
  21.  */  
  22. public class TableTag extends SimpleTagSupport{  
  23.     private static final String RN = "\r\n";  
  24.     private String id;  
  25.       
  26.     //options  
  27.     private String ajaxGridOptions;  
  28.     private String ajaxSelectOptions;  
  29.     private String altclass;  
  30.     private String altRows;  
  31.     private String autoencode = "false";    //autoencode=true 则使用innerText= "<a href="..">a</a>"  autoencode=false则使用innerHTML  
  32.     private String autowidth = "false"//与父容器同宽度? 默认为false  
  33.     private String caption;             //标题  
  34.     private String cellLayout;  
  35.     private String cellEdit;  
  36.     private String cellsubmit;  
  37.     private String cellurl;  
  38.     private String cmTemplate;  
  39.     private String colModel;  
  40.     private String colNames;  
  41.     private String data;  
  42.     private String datastr;  
  43.     private String datatype = "local";  
  44.     private String deepempty;  
  45.     private String deselectAfterSort;  
  46.     private String direction;  
  47.     private String editurl;  
  48.     private String emptyrecords;  
  49.     private String ExpandColClick;  
  50.     private String ExpandColumn;  
  51.     private String footerrow;  
  52.     private String forceFit;  
  53.     private String gridstate;  
  54.     private String gridview;  
  55.     private String grouping;  
  56.     private String headertitles;  
  57.     private String height;  
  58.     private String hiddengrid;  
  59.     private String hidegrid;  
  60.     private String hoverrows;  
  61.     private String idPrefix;  
  62.     private String ignoreCase;  
  63.     private String inlineData;  
  64.     private String jsonReader;  
  65.     private String lastpage;  
  66.     private String lastsort;  
  67.     private String loadonce = "false";      //jqgrid的loadonce如果设置为true,则会一次性把数据都加载到客户端,以后的排序、分页都是在客户端进行了。如果数据量不多,一次性加载到客户端后的操作就快多了,不用每次ajax去取,挺好的。但是如果这时候想reload jqgrid,发现reload不了了。因为loadonce为true时候,在第一次加载完成之后,程序会自动把datatype设置为local,之后的操作都变为在本地进行。如果要让loadonce:true和reload同时使用,就要在reload之前把datatype重新还原成json或xml,就能正常reload了。  $("#list").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');  
  68.     private String loadtext;  
  69.     private String loadui;  
  70.     private String mtype;  
  71.     private String multikey;  
  72.     private String multiboxonly;  
  73.     private String multiselect = "false";   //是否能多选(其实就是加了复选框  
  74.     private String multiselectWidth;  
  75.     private String page;  
  76.     private String pager;                   //分页部分显示位置  
  77.     private String pagerpos;  
  78.     private String pgbuttons;  
  79.     private String pginput;  
  80.     private String pgtext;  
  81.     private String prmNames;  
  82.     private String postData;  
  83.     private String reccount;  
  84.     private String recordpos = "right"//记录条数显示的位置  
  85.     private String records;  
  86.     private String recordtext;  
  87.     private String resizeclass;  
  88.     private String rowList = "[10,20,30]";  //可选每页显示几条,例如 [10,20,30]  可供选择  
  89.     private String rownumbers;  
  90.     private String rowNum = "10";           //默认每页显示几条,例如:10  
  91.     private String rowTotal;  
  92.     private String rownumWidth;  
  93.     private String savedRow;  
  94.     private String searchdata;  
  95.     private String scroll;  
  96.     private String scrollOffset;  
  97.     private String scrollTimeout;  
  98.     private String scrollrows;  
  99.     private String selarrrow;  
  100.     private String selrow;  
  101.     private String shrinkToFit;  
  102.     private String sortable;  
  103.     private String sortname;                //默认排序字段  
  104.     private String sortorder = "asc";       //排序方式  
  105.     private String subGrid;  
  106.     private String subGridOptions;  
  107.     private String subGridModel;  
  108.     private String subGridType;  
  109.     private String subGridUrl;  
  110.     private String subGridWidth;  
  111.     private String toolbar;  
  112.     private String toppager;  
  113.     private String totaltime;  
  114.     private String treedatatype;  
  115.     private String treeGrid;  
  116.     private String treeGridModel;  
  117.     private String treeIcons;  
  118.     private String treeReader;  
  119.     private String tree_root_level;  
  120.     private String url;  
  121.     private String userData;  
  122.     private String userDataOnFooter;  
  123.     private String viewrecords = "true";    //是否显示记录条数,即是否显示:"1 - 9 条"  
  124.     private String viewsortcols;  
  125.     private String width;  
  126.     private String xmlReader;  
  127.       
  128.     //Event  
  129.     private String afterInsertRow;  
  130.     private String beforeProcessing;  
  131.     private String beforeRequest;  
  132.     private String beforeSelectRow;  
  133.     private String gridComplete;  
  134.     private String loadBeforeSend;  
  135.     private String loadComplete;  
  136.     private String loadError;  
  137.     private String onCellSelect;  
  138.     private String ondblClickRow;  
  139.     private String onHeaderClick;  
  140.     private String onPaging;  
  141.     private String onRightClickRow;  
  142.     private String onSelectAll;  
  143.     private String onSelectRow;  
  144.     private String onSortCol;  
  145.     private String resizeStart;  
  146.     private String resizeStop;  
  147.     private String serializeGridData;  
  148.       
  149.     //extendsion  
  150.     private String edit = "false";  
  151.     private String add = "false";  
  152.     private String del = "false";  
  153.       
  154.     //getter、setter 太长,就不贴了  
  155.   
  156.     @Override  
  157.     public void doTag() throws JspException, IOException {  
  158.         PageContext pageContext = (PageContext)this.getJspBody().getJspContext();   
  159.         HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();  
  160.         JspWriter out = pageContext.getOut();  
  161.         out.write("<table id=\""+id+"\"></table>");  
  162.         out.newLine();  
  163.         out.write("<div id=\""+id+"Pager\"></div>");  
  164.         out.newLine();  
  165.           
  166.         StringWriter sw = new StringWriter();  
  167.         getJspBody().invoke(sw);//调用TableTag中的子标签 将执行结果输出到指定流sw中。     
  168.         StringBuffer tableInnerData = sw.getBuffer();  
  169.         int i = tableInnerData.indexOf("colNames");  
  170.         int j = tableInnerData.indexOf("colModel");  
  171.         int k = tableInnerData.indexOf("€");  
  172.         if(k==-1) k = tableInnerData.length();  
  173.         String colNames = tableInnerData.substring(i,j).trim();  
  174.         String colModel = tableInnerData.substring(j,k).trim();  
  175.         String innerData = tableInnerData.substring(k).trim();  
  176.         innerData = innerData.replaceAll("€\\{""{").replaceAll(",\\s+\\{"",{").replaceAll(",$""");  
  177.         StringBuffer datas = new StringBuffer("var ___datas = [");  
  178.         datas.append(innerData);  
  179.         datas.append("];");  
  180.         out.write(getJavaScript(colNames,colModel,datas));  
  181.     }  
  182.     public String getJavaScript(CharSequence colNames,CharSequence colModel,CharSequence datas){  
  183.         StringBuffer script = new StringBuffer();  
  184.         String jsonProperties = TagTools.KeyValuePair2Json("id:"+this.id+":false","ajaxGridOptions:"+this.ajaxGridOptions+":false","ajaxSelectOptions:"+this.ajaxSelectOptions+":false","altclass:"+this.altclass+":false","altRows:"+this.altRows+":false","autoencode:"+this.autoencode+":true","autowidth:"+this.autowidth+":true","caption:"+this.caption+":false","cellLayout:"+this.cellLayout+":false","cellEdit:"+this.cellEdit+":false","cellsubmit:"+this.cellsubmit+":false","cellurl:"+this.cellurl+":false","cmTemplate:"+this.cmTemplate+":false","colModel:"+this.colModel+":false","colNames:"+this.colNames+":false","data:"+this.data+":false","datastr:"+this.datastr+":false","datatype:"+this.datatype+":false","deepempty:"+this.deepempty+":false","deselectAfterSort:"+this.deselectAfterSort+":false","direction:"+this.direction+":false","editurl:"+this.editurl+":false","emptyrecords:"+this.emptyrecords+":false","ExpandColClick:"+this.ExpandColClick+":false","ExpandColumn:"+this.ExpandColumn+":false","footerrow:"+this.footerrow+":false","forceFit:"+this.forceFit+":false","gridstate:"+this.gridstate+":false","gridview:"+this.gridview+":false","grouping:"+this.grouping+":false","headertitles:"+this.headertitles+":false","height:"+this.height+":false","hiddengrid:"+this.hiddengrid+":false","hidegrid:"+this.hidegrid+":false","hoverrows:"+this.hoverrows+":false","idPrefix:"+this.idPrefix+":false","ignoreCase:"+this.ignoreCase+":false","inlineData:"+this.inlineData+":false","jsonReader:"+this.jsonReader+":false","lastpage:"+this.lastpage+":false","lastsort:"+this.lastsort+":false","loadonce:"+this.loadonce+":false","loadtext:"+this.loadtext+":false","loadui:"+this.loadui+":false","mtype:"+this.mtype+":false","multikey:"+this.multikey+":false","multiboxonly:"+this.multiboxonly+":false","multiselect:"+this.multiselect+":true","multiselectWidth:"+this.multiselectWidth+":false","page:"+this.page+":false","pager:"+this.pager+":false","pagerpos:"+this.pagerpos+":false","pgbuttons:"+this.pgbuttons+":false","pginput:"+this.pginput+":false","pgtext:"+this.pgtext+":false","prmNames:"+this.prmNames+":false","postData:"+this.postData+":false","reccount:"+this.reccount+":false","recordpos:"+this.recordpos+":false","records:"+this.records+":false","recordtext:"+this.recordtext+":false","resizeclass:"+this.resizeclass+":false","rowList:"+this.rowList+":true","rownumbers:"+this.rownumbers+":false","rowNum:"+this.rowNum+":false","rowTotal:"+this.rowTotal+":false","rownumWidth:"+this.rownumWidth+":false","savedRow:"+this.savedRow+":false","searchdata:"+this.searchdata+":false","scroll:"+this.scroll+":false","scrollOffset:"+this.scrollOffset+":false","scrollTimeout:"+this.scrollTimeout+":false","scrollrows:"+this.scrollrows+":false","selarrrow:"+this.selarrrow+":false","selrow:"+this.selrow+":false","shrinkToFit:"+this.shrinkToFit+":false","sortable:"+this.sortable+":false","sortname:"+this.sortname+":false","sortorder:"+this.sortorder+":false","subGrid:"+this.subGrid+":false","subGridOptions:"+this.subGridOptions+":false","subGridModel:"+this.subGridModel+":false","subGridType:"+this.subGridType+":false","subGridUrl:"+this.subGridUrl+":false","subGridWidth:"+this.subGridWidth+":false","toolbar:"+this.toolbar+":false","toppager:"+this.toppager+":false","totaltime:"+this.totaltime+":false","treedatatype:"+this.treedatatype+":false","treeGrid:"+this.treeGrid+":false","treeGridModel:"+this.treeGridModel+":false","treeIcons:"+this.treeIcons+":false","treeReader:"+this.treeReader+":false","tree_root_level:"+this.tree_root_level+":false","url:"+this.url+":false","userData:"+this.userData+":false","userDataOnFooter:"+this.userDataOnFooter+":false","viewrecords:"+this.viewrecords+":true","viewsortcols:"+this.viewsortcols+":false","width:"+this.width+":false","xmlReader:"+this.xmlReader+":false","edit:"+this.edit+":false","add:"+this.add+":false","del:"+this.del+":false","afterInsertRow:"+this.afterInsertRow+":true","beforeProcessing:"+this.beforeProcessing+":true","beforeRequest:"+this.beforeRequest+":true","beforeSelectRow:"+this.beforeSelectRow+":true","gridComplete:"+this.gridComplete+":true","loadBeforeSend:"+this.loadBeforeSend+":true","loadComplete:"+this.loadComplete+":true","loadError:"+this.loadError+":true","onCellSelect:"+this.onCellSelect+":true","ondblClickRow:"+this.ondblClickRow+":true","onHeaderClick:"+this.onHeaderClick+":true","onPaging:"+this.onPaging+":true","onRightClickRow:"+this.onRightClickRow+":true","onSelectAll:"+this.onSelectAll+":true","onSelectRow:"+this.onSelectRow+":true","onSortCol:"+this.onSortCol+":true","resizeStart:"+this.resizeStart+":true","resizeStop:"+this.resizeStop+":true","serializeGridData:"+this.serializeGridData+":true");  
  185.         script.append("<script type=\"text/javascript\">"+RN);  
  186.         script.append("     jQuery(function(){"+RN);  
  187.         script.append("     jQuery(\"#"+id+"\").jqGrid({"+RN);  
  188.         script.append("         "+jsonProperties+","+RN);  
  189.         script.append("         "+colNames+RN);  
  190.         script.append("         "+colModel+RN);  
  191.         script.append("     }).navGrid(\"#"+id+"Pager\",{"+TagTools.KeyValuePair2Json("edit:"+edit+":true","add:"+add+":true","del:"+del+":true")+"});"+RN);  
  192.         script.append("     "+datas+RN);  
  193.         script.append("     jQuery(\"#"+id+"\").jqGrid('setFrozenColumns'); "+RN);  
  194.         script.append("     for(var i=0;i<=___datas.length;i++)"+RN);  
  195.         script.append("             jQuery(\"#"+id+"\").jqGrid(\"addRowData\",i+1,___datas[i]);"+RN);  
  196.         script.append("     });"+RN);  
  197.         script.append("     jQuery(\"#"+id+"\").jqGrid('setGridParam',{\"page\":1,}).trigger(\"reloadGrid\"); "+RN);  
  198.         script.append("</script>"+RN);  
  199.         return script.toString();  
  200.     }  
  201. }<span style="color:#ff0000;">  
  202. </span>  


完了之后,写标签说明文件,也就是tld文件,由于太长,只截一部分图。


测试代码:

[php]  view plain copy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>  
  4. <%@ taglib uri="http://blog.csdn.net/xiaochunyong" prefix="i" %>  
  5. <!DOCTYPE html>  
  6. <html>  
  7.     <head>  
  8.         <link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jquery-ui/themes/cupertino/jquery-ui-1.8.20.custom.css'/>">  
  9.         <link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jquery-ui/themes/demos.css'/>">  
  10.         <link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jqGrid/css/ui.jqgrid.css'/>">  
  11.         <link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jqGrid/plugins/ui.multiselect.css'/>">  
  12.         <script type="text/javascript" src="<c:url value="/js/jQuery/jquery-1.7.2.js"/>"></script>  
  13.         <script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/i18n/grid.locale-cn.js"/>"></script>  
  14.         <script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/jquery.jqGrid.min.js"/>"></script>  
  15.     </head>  
  16.   
  17.   
  18.     <body>  
  19.         <i:table id="dataTable" caption="标题" autowidth="true" height="300" multiselect="true" viewrecords="true" recordpos="right" rowNum="20" rowList="[10,20,30]" sortname="age" sortorder="asc" loadonce="false">  
  20.             <i:tr>  
  21.                 <i:th name="webname" frozen="true">网站名称</i:th>  
  22.                 <i:th name="weburl" frozen="true">网站地址</i:th>  
  23.                 <i:th name="username" frozen="true">用户名</i:th>  
  24.                 <i:th name="email">邮箱</i:th>  
  25.                 <i:th name="phone">手机号码</i:th>  
  26.                 <i:th name="note">备注</i:th>  
  27.                 <i:th name="op">操作</i:th>  
  28.             </i:tr>  
  29.             <c:forEach begin="1" end="50">  
  30.                 <i:tr>  
  31.                     <i:td name="webname">CSDN</i:td>  
  32.                     <i:td name="weburl"><a href="http://www.csdn.net">http://www.csdn.net</a></i:td>  
  33.                     <i:td name="username">zhangsan</i:td>  
  34.                     <i:td name="email">zhangsan@qq.com</i:td>  
  35.                     <i:td name="phone">187123123</i:td>  
  36.                     <i:td name="note">...</i:td>  
  37.                     <i:td name="op">  
  38.                         <a href="#" οnclick="alert('修改');return false;">修改</a>  
  39.                         <a href="#" οnclick="alert('删除');return false;">删除</a>  
  40.                     </i:td>  
  41.                 </i:tr>  
  42.             </c:forEach>  
  43.             <i:tr>  
  44.                 <i:td name="webname">合计</i:td>  
  45.             </i:tr>  
  46.         </i:table>  
  47.     </body>  
  48. </html>  
效果:




右键查看源码:




OK~~呼,大功告成,源码地址,有兴趣的可以下载看看:jstl4jqgrid.rar

这篇关于JSTL标签 封装jqGrid表格插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/574717

相关文章

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性:封装、继承、多态 。而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说就是套壳屏蔽细节 。     比如:对于电脑这样一个复杂的设备,提供给用户的就只是:开关机、通过键盘输入,显示器, USB 插孔等,让用户来和计算机进行交互,完成日常事务。但实际上:电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

Maven(插件配置和生命周期的绑定)

1.这篇文章很好,介绍的maven插件的。 2.maven的source插件为例,可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example,然后配置到riil-collect.xml中。  <build>   <plugins>    <pl

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚

Jenkins 插件 地址证书报错问题解决思路

问题提示摘要: SunCertPathBuilderException: unable to find valid certification path to requested target...... 网上很多的解决方式是更新站点的地址,我这里修改了一个日本的地址(清华镜像也好),其实发现是解决不了上述的报错问题的,其实,最终拉去插件的时候,会提示证书的问题,几经周折找到了其中一遍博文

哈希表的封装和位图

文章目录 2 封装2.1 基础框架2.2 迭代器(1)2.3 迭代器(2) 3. 位图3.1 问题引入3.2 左移和右移?3.3 位图的实现3.4 位图的题目3.5 位图的应用 2 封装 2.1 基础框架 文章 有了前面map和set封装的经验,容易写出下面的代码 // UnorderedSet.h#pragma once#include "HashTable.h"

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中,条件语句应该是相对难以处理的,毕竟条件语句太过于多样性。 条件语句大致分为以下几种: 1、单一条件,比如:where id = 1; 2、多个条件,相互间关系统一。比如:where id > 10 and age > 20 and score < 60; 3、多个条件,相互间关系不统一。比如:where (id > 10 OR age > 20) AND sco

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b