JSTL标签 封装jqGrid表格插件

最新推荐文章于 2023-05-24 17:39:43 发布
最新推荐文章于 2023-05-24 17:39:43 发布
阅读量1.4k 收藏
点赞数

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

HadesCool
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jqGrid实例下载（数据交互，统计，时间插件都已实现）
03-09
jqGrid实例下载（数据交互，统计，时间插件都已实现）
JSTL标签依赖包下载
08-06
JSTL标签依赖包jar包html标签 JSTL标签依赖包jar包html标签 JSTL标签依赖包jar包html标签
39jqGrid - 集成时间选择器插件
阿甘兄
04-24 1057
这是第一次集成其他的插件。第一个插件就是日期插件(Datepicker)。 尝试去点击某一行，并且选择Last Sales单元格。 一个时间选择面板将会弹出。 HTML代码举例 <html> <head> <title>jqGrid 实例</title> <link rel="stylesheet" href="/jqGr...
jqGrid 表格插件
Yasha的博客
05-27 482
jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。 $(document).ready(function(){     $("#list4").jqGrid({         url:contextPath + "search.action",         datatype:"json"
jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间
人生若南柯一梦
05-24 4197
jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间
JSTL.rar_JSTL标签
09-24
自定义JSTL标签，自动读取数据绑定在控件上。
JSTL标签库-tomcat10-简化JSP中java代码
05-04
JSTL标签库-tomcat10-简化JSP中java代码
jstl标签库介绍.zip|jstl标签库介绍.zip
09-07
总结了一些常用的jstl标签，jstl标准标签库，jstl-core核心标签库，jstl-functions标签库，对于学习jstl有所帮助
基于jstl 标签的使用介绍
10-27
本篇文章小编为大家介绍，基于jstl 标签的使用介绍，需要的朋友参考下
高级表格支持库3.0#4版(eGrid.fne)-易语言
06-13
本支持库实现了对表格的支持。 操作系统支持： Windows 高级表格升级记录  By:邓学彬 2020/07 ===================================== [属性修改] 01.增加属性：点燃边框色，让焦点单元格的文字颜色、边框颜色分开设置 02.增加属性：表头，打开 表头设计器 ，可视化设计表头 ===================================== [组件增加] 增加可以放置到单元格里面的组件 01.表格按钮 02.表格选择按钮 03.表格单选按钮 04.表格开关按钮 05.表格进度条 ===================================== [命令修改] 01.高级表格.置列类型，增加 #表格常量.组件型 02.高级表格.置列类型，增加 #表格常量.宽文本型 03.高级表格.置数据，增加 组件型 数据的设置 04.高级表格.置数据，增加 日期时间型 数据的处理 05.高级表格.置数据，增加 宽文本(Unicode) 数据的处理 06.高级表格.置日期格式，增加：#表格常量.日期时间格式1(yyyy-MM-dd HH:mm) 07.高级表格.置日期格式，增加：#表格常量.日期时间格式2(yyyy-MM-dd HH:mm:ss) 08.高级表格.置日期格式，增加：#表格常量.时间格式1(HH:mm) 09.高级表格.置日期格式，增加：#表格常量.时间格式2(HH:mm:ss) 10.高级表格.清空数据，增加参数：保留表头 11.增加命令：高级表格.置组件，和“置数据”相似，一个单元格可以设置多个组件 12.增加命令：高级表格.置按钮选中 13.增加命令：高级表格.取按钮选中 14.增加命令：高级表格.置进度条位置 15.增加命令：高级表格.取进度条位置 16.增加命令：高级表格.取宽文本数据 17.增加命令：高级表格.取文本数据，和“取数据”相似，避免返回通用型出现的数据类型不一致问题。 18.增加命令：高级表格.取逻辑数据 19.增加命令：高级表格.取图片数据 20.增加命令：高级表格.存到字节集，将表格中所有现有数据保存到字节集中。 21.增加命令：高级表格.从字节集读，从字节集中读入表格数据 22.增加命令：高级表格.自动调整行，根据内容长度、字体大小调整行高 23.增加命令：高级表格.自动调整列，根据内容长度、字体大小调整列宽 24.增加命令：高级表格.自动调整行列，根据内容长度、字体大小调整行高、列宽 25.增加命令：高级表格.自动调整表头，根据表头设置的宽度为-1的列，平均分配列宽，铺满表格。 26.增加命令：高级表格.分配列宽，其他列剩下的宽度，平均分给指定的列，铺满表格。 ===================================== [事件修改] 01.增加事件：按钮被点击，单元格里的按钮、选择按钮被点击时触发 02.增加事件：横向滚动条被改变 03.增加事件：纵向滚动条被改变 04.增加事件：滚动到底部，滚动条或鼠标滚轮滚动到底部时触发。 ===================================== [其他修改] 01.修复在某些情况下，TAB键切换单元格失效的问题
Ajax,jqgrid,标签页Iframe进销存代码
07-25
Ajax提交框架,jqgrid表格,标签页Iframe数据传递,前后台JSON数据交互,sqlserver数据库 ,vs2010
jqgrid加时间控件
热门推荐
orichisonic的专栏
11-12 1万+
     var lastsel3;        mygrid = $("#list").jqGrid({            width: 800,            height: 450,            url: LoadActionSubmit/,            datatype: json,            mtype: P
通过jsp直接操作数据库
microdsy的专栏
10-26 6677
<p>在数据库中存储有证书和由证书解析出来的主题。但是在程序运行一段时间之后，发现不能兼容某些特别格式的证书。所以就修改了证书的验证方式。但是对于已经存储在数据库中的数据，就需要我们手动提取出证书，然后按照新的解析方式解析出主题后，再将其存储在数据库中。</P> <p>然而因为这是已经上线正在使用的系统，而实施人员又不懂逻辑。写成一个java类，手动调用太麻烦，所以就考虑将这些逻辑全部写在jsp中，然后直接访问一下这
起点小说解锁.js
最新发布
04-27
起点小说解锁.js
299-煤炭大数据智能分析解决方案.pptx
04-27
299-煤炭大数据智能分析解决方案.pptx
299-教育行业信息化与数据平台建设分享.pptx
04-27
299-教育行业信息化与数据平台建设分享.pptx
基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
idea2021不支持jstl标签
09-04
您可以在项目的构建工具（如Maven或Gradle）中添加JSTL的依赖项，然后在JSP文件中导入JSTL标签库，并使用标签进行编程。 请注意，即使Idea2021不直接支持JSTL标签，您仍然可以使用其他方法来简化JSP开发。例如，您...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值