JSTL标签封装jqGrid表格插件

jqGrid：

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

<i:table>
	<i:tr>
		<i:th>Head 1-1</i:th>
		<i:th>Head 1-2</i:th>
	</i:tr>
	<i:tr>
		<i:td>Row 1-1</i:td>
		<i:td>Row 1-2</i:td>
	</i:tr>
	<i:tr>
		<i:td>Row 1-1</i:td>
		<i:td>Row 1-2</i:td>
	</i:tr>
</i:table>

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jqGrid 使用</title>
	<link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jquery-ui/themes/cupertino/jquery-ui-1.8.20.custom.css'/>">
	<link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jqGrid/css/ui.jqgrid.css'/>">
	<script type="text/javascript" src="<c:url value="/js/jQuery/jquery-1.7.2.js"/>"></script>
	<script type="text/javascript" src="<c:url value="/js/jQuery/jquery-ui/jquery-ui-1.8.20.custom.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/i18n/grid.locale-cn.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/jquery.jqGrid.min.js"/>"></script>
</head>
<body>
	<table id="data"></table>
	<div id="dataPager"></div>
	<script type="text/javascript">
	jQuery(function(){
		jQuery("#data").jqGrid({
			datatype: "local",
			//width: "100%",
			height: 400,
			autowidth:"true",
			colNames:["编号","用户名", "性别", "邮箱", "QQ","手机号","出生日期",''],
			colModel:[
			        {name:"id",index:"id", width:60, sorttype:"int",frozen:true},
			        {name:"userName",index:"userName", width:90,editable:true,frozen:true},
			        {name:"gender",index:"gender", width:90},
			        {name:"email",index:"email", width:125,sorttype:"string"},
			        {name:"QQ",index:"QQ", width:100},
			        {name:"mobilePhone",index:"mobilePhone", width:120},
			        {name:"birthday",index:"birthday", width:100, sorttype:"date"},
			        {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',
						formatoptions:{keys:true}}
	
			],
			sortname:"gender",//默认排序字段
			sortorder:"asc",//排序方式
			viewrecords:true,//显示记录条数:  1 - 9 条
			rowNum:5,//默认每页显示几条
			rowList:[1,3,5],//可选每页显示几条
			multiselect: true,
			pager:"#dataPager",
			caption: "标题",
			editurl:"baseinfo/toEditProductType.action"
		});
		jQuery("#data").jqGrid('navGrid',"#dataPager",{edit:false,add:false,del:false});
		jQuery("#data").jqGrid('inlineNav',"#dataPager");
		jQuery("#data").jqGrid('setFrozenColumns');
	    var mydata = [
	                {id:"1",userName:"polaris",gender:"男",email:"[email protected]",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
	                {id:"2",userName:"李四",gender:"女",email:"[email protected]",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
	                {id:"3",userName:"王五",gender:"男",email:"[email protected]",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
	                {id:"4",userName:"马六",gender:"女",email:"[email protected]",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
	                {id:"5",userName:"赵钱",gender:"男",email:"[email protected]",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
	                {id:"6",userName:"小毛",gender:"男",email:"[email protected]",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
	                {id:"7",userName:"小李",gender:"女",email:"[email protected]",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
	                {id:"8",userName:"小三",gender:"男",email:"[email protected]",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
	                {id:"9",userName:"孙先",gender:"男",email:"[email protected]",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"},
	       ];
		for(var i=0;i<=mydata.length;i++){
		        jQuery("#data").jqGrid("addRowData",i+1,mydata[i]);
		}
	});
	</script>
</body>
</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

package com.xcy.core.web.tag;

import java.io.IOException;
import java.io.StringWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.SimpleTagSupport;

import org.apache.commons.lang.StringUtils;

public class ThTag extends SimpleTagSupport{
	private String align;
	private String cellattr;
	private String classes;
	private String datefmt;
	private String defval;
	private String editable;
	private String editoptions;
	private String editrules;
	private String edittype;
	private String firstsortorder;
	private String fixed;
	private String formoptions;
	private String formatoptions;
	private String formatter;
	private String frozen;
	private String hidedlg;
	private String hidden;
	private String index;
	private String jsonmap;
	private String key;
	private String label;
	private String name;
	private String resizable;
	private String search;
	private String searchoptions;
	private String sortable;
	private String sorttype;
	private String stype;
	private String surl;
	private String template;
	private String title;
	private String width;
	private String xmlmap;
	private String unformat;
	private String viewable;
	
	public void setAlign(String align) {
		this.align = align;
	}

	public void setCellattr(String cellattr) {
		this.cellattr = cellattr;
	}

	public void setClasses(String classes) {
		this.classes = classes;
	}

	public void setDatefmt(String datefmt) {
		this.datefmt = datefmt;
	}

	public void setDefval(String defval) {
		this.defval = defval;
	}

	public void setEditable(String editable) {
		this.editable = editable;
	}

	public void setEditoptions(String editoptions) {
		this.editoptions = editoptions;
	}

	public void setEditrules(String editrules) {
		this.editrules = editrules;
	}

	public void setEdittype(String edittype) {
		this.edittype = edittype;
	}

	public void setFirstsortorder(String firstsortorder) {
		this.firstsortorder = firstsortorder;
	}

	public void setFixed(String fixed) {
		this.fixed = fixed;
	}

	public void setFormoptions(String formoptions) {
		this.formoptions = formoptions;
	}

	public void setFormatoptions(String formatoptions) {
		this.formatoptions = formatoptions;
	}

	public void setFormatter(String formatter) {
		this.formatter = formatter;
	}

	public void setFrozen(String frozen) {
		this.frozen = frozen;
	}

	public void setHidedlg(String hidedlg) {
		this.hidedlg = hidedlg;
	}

	public void setHidden(String hidden) {
		this.hidden = hidden;
	}

	public void setIndex(String index) {
		this.index = index;
	}

	public void setJsonmap(String jsonmap) {
		this.jsonmap = jsonmap;
	}

	public void setKey(String key) {
		this.key = key;
	}

	public void setLabel(String label) {
		this.label = label;
	}

	public void setName(String name) {
		this.name = name;
	}

	public void setResizable(String resizable) {
		this.resizable = resizable;
	}

	public void setSearch(String search) {
		this.search = search;
	}

	public void setSearchoptions(String searchoptions) {
		this.searchoptions = searchoptions;
	}

	public void setSortable(String sortable) {
		this.sortable = sortable;
	}

	public void setSorttype(String sorttype) {
		this.sorttype = sorttype;
	}

	public void setStype(String stype) {
		this.stype = stype;
	}

	public void setSurl(String surl) {
		this.surl = surl;
	}

	public void setTemplate(String template) {
		this.template = template;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public void setWidth(String width) {
		this.width = width;
	}

	public void setXmlmap(String xmlmap) {
		this.xmlmap = xmlmap;
	}

	public void setUnformat(String unformat) {
		this.unformat = unformat;
	}

	public void setViewable(String viewable) {
		this.viewable = viewable;
	}

	@Override
	public void doTag() throws JspException, IOException {
		PageContext pageContext = (PageContext)this.getJspBody().getJspContext(); 
		HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();
		JspWriter out = pageContext.getOut();
		StringWriter sw = new StringWriter();
		getJspBody().invoke(sw);
		String thInnerText = sw.getBuffer().toString();
		thInnerText = StringUtils.replace(thInnerText, "\"", "\\\"");
		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");
		//jsonProperties是colModel部分,thInnerText.trim()则是colName部分
		String s = "{"+jsonProperties+"}_"+"\""+thInnerText.trim()+"\",;";
		out.write(s);
	}
}

TdTag.java

package com.xcy.core.web.tag;

import java.io.IOException;
import java.io.StringWriter;
import java.io.Writer;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.SimpleTagSupport;

import org.apache.commons.lang.StringUtils;

public class TdTag extends SimpleTagSupport{
	
	private String name;
	
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Override
	public void doTag() throws JspException, IOException {
		PageContext pageContext = (PageContext)this.getJspBody().getJspContext(); 
		HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();
		JspWriter out = pageContext.getOut();
		StringWriter sw = new StringWriter();
		getJspBody().invoke(sw);
		String tdInnerText = sw.getBuffer().toString().trim();
		tdInnerText = StringUtils.replace(tdInnerText, "\"", "\\\"");//解决双引号问题
		tdInnerText = tdInnerText.replaceAll("\\s{1,}", " ");
		//下面的变量s为mydata数组的每一个元素的一个键值对(也就是一个单元格的数据.
		String s = this.name+":\""+tdInnerText+"\",";
		out.write(s);
	}
}

TrTag.java

package com.xcy.core.web.tag;

import java.io.IOException;
import java.io.StringWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class TrTag extends SimpleTagSupport{

	@Override
	public void doTag() throws JspException, IOException {
		PageContext pageContext = (PageContext)this.getJspBody().getJspContext(); 
		HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();
		JspWriter out = pageContext.getOut();
		StringWriter sw = new StringWriter();
		getJspBody().invoke(sw);
		String trInnerData = sw.getBuffer().toString().trim();
		//这个if用来判断子标签式th还是td
		if(trInnerData.startsWith("{")){
			trInnerData = trInnerData.replaceAll(";\\s+\\{", ";{");
			String[] ths = trInnerData.split(";");
			StringBuffer colNames = new StringBuffer("colNames:[");
			StringBuffer colModel = new StringBuffer("colModel:[");
			for (int i = 0; i < ths.length; i++) {
				String[] th = ths[i].split("_");
				colModel.append(th[0]);
				colNames.append(th[1]);
				if(i!=ths.length-1){
					colModel.append(",");
				}else{
					colNames.deleteCharAt(colNames.length()-1);
				}
			}
			colModel.append("],");
			colNames.append("],");
			out.write(colNames.toString().trim());
			out.write(colModel.toString().trim());
		}else{
			StringBuffer datas = new StringBuffer("€{");
			trInnerData = trInnerData.replaceAll(",\\s+", ",");
			datas.append(trInnerData).deleteCharAt(datas.length()-1).append("},");
			out.write(datas.toString().trim());
		}
	}
	
}

TableTag.java

package com.xcy.core.web.tag;

import java.io.IOException;
import java.io.StringWriter;
import java.io.Writer;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.jsp.JspContext;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.SimpleTagSupport;

import com.xcy.core.web.validate.Validate;

/**
 * @author Siuon
 *
 */
public class TableTag extends SimpleTagSupport{
	private static final String RN = "\r\n";
	private String id;
	
	//options
	private String ajaxGridOptions;
	private String ajaxSelectOptions;
	private String altclass;
	private String altRows;
	private String autoencode = "false";	//autoencode=true 则使用innerText= "<a href="..">a</a>"  autoencode=false则使用innerHTML
	private String autowidth = "false";	//与父容器同宽度？ 默认为false
	private String caption;				//标题
	private String cellLayout;
	private String cellEdit;
	private String cellsubmit;
	private String cellurl;
	private String cmTemplate;
	private String colModel;
	private String colNames;
	private String data;
	private String datastr;
	private String datatype = "local";
	private String deepempty;
	private String deselectAfterSort;
	private String direction;
	private String editurl;
	private String emptyrecords;
	private String ExpandColClick;
	private String ExpandColumn;
	private String footerrow;
	private String forceFit;
	private String gridstate;
	private String gridview;
	private String grouping;
	private String headertitles;
	private String height;
	private String hiddengrid;
	private String hidegrid;
	private String hoverrows;
	private String idPrefix;
	private String ignoreCase;
	private String inlineData;
	private String jsonReader;
	private String lastpage;
	private String lastsort;
	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');
	private String loadtext;
	private String loadui;
	private String mtype;
	private String multikey;
	private String multiboxonly;
	private String multiselect = "false";	//是否能多选(其实就是加了复选框
	private String multiselectWidth;
	private String page;
	private String pager;					//分页部分显示位置
	private String pagerpos;
	private String pgbuttons;
	private String pginput;
	private String pgtext;
	private String prmNames;
	private String postData;
	private String reccount;
	private String recordpos = "right";	//记录条数显示的位置
	private String records;
	private String recordtext;
	private String resizeclass;
	private String rowList = "[10,20,30]";	//可选每页显示几条,例如 [10,20,30]  可供选择
	private String rownumbers;
	private String rowNum = "10";			//默认每页显示几条，例如:10
	private String rowTotal;
	private String rownumWidth;
	private String savedRow;
	private String searchdata;
	private String scroll;
	private String scrollOffset;
	private String scrollTimeout;
	private String scrollrows;
	private String selarrrow;
	private String selrow;
	private String shrinkToFit;
	private String sortable;
	private String sortname;				//默认排序字段
	private String sortorder = "asc";		//排序方式
	private String subGrid;
	private String subGridOptions;
	private String subGridModel;
	private String subGridType;
	private String subGridUrl;
	private String subGridWidth;
	private String toolbar;
	private String toppager;
	private String totaltime;
	private String treedatatype;
	private String treeGrid;
	private String treeGridModel;
	private String treeIcons;
	private String treeReader;
	private String tree_root_level;
	private String url;
	private String userData;
	private String userDataOnFooter;
	private String viewrecords = "true";	//是否显示记录条数，即是否显示:"1 - 9 条"
	private String viewsortcols;
	private String width;
	private String xmlReader;
	
	//Event
	private String afterInsertRow;
	private String beforeProcessing;
	private String beforeRequest;
	private String beforeSelectRow;
	private String gridComplete;
	private String loadBeforeSend;
	private String loadComplete;
	private String loadError;
	private String onCellSelect;
	private String ondblClickRow;
	private String onHeaderClick;
	private String onPaging;
	private String onRightClickRow;
	private String onSelectAll;
	private String onSelectRow;
	private String onSortCol;
	private String resizeStart;
	private String resizeStop;
	private String serializeGridData;
    
	//extendsion
	private String edit = "false";
	private String add = "false";
	private String del = "false";
    
	//getter、setter 太长，就不贴了

	@Override
	public void doTag() throws JspException, IOException {
		PageContext pageContext = (PageContext)this.getJspBody().getJspContext(); 
		HttpServletRequest request = (HttpServletRequest)pageContext.getRequest();
		JspWriter out = pageContext.getOut();
		out.write("<table id=\""+id+"\"></table>");
		out.newLine();
		out.write("<div id=\""+id+"Pager\"></div>");
		out.newLine();
		
		StringWriter sw = new StringWriter();
		getJspBody().invoke(sw);//调用TableTag中的子标签 将执行结果输出到指定流sw中。	
		StringBuffer tableInnerData = sw.getBuffer();
		int i = tableInnerData.indexOf("colNames");
		int j = tableInnerData.indexOf("colModel");
		int k = tableInnerData.indexOf("€");
		if(k==-1) k = tableInnerData.length();
		String colNames = tableInnerData.substring(i,j).trim();
		String colModel = tableInnerData.substring(j,k).trim();
		String innerData = tableInnerData.substring(k).trim();
		innerData = innerData.replaceAll("€\\{", "{").replaceAll(",\\s+\\{", ",{").replaceAll(",$", "");
		StringBuffer datas = new StringBuffer("var ___datas = [");
		datas.append(innerData);
		datas.append("];");
		out.write(getJavaScript(colNames,colModel,datas));
	}
	public String getJavaScript(CharSequence colNames,CharSequence colModel,CharSequence datas){
		StringBuffer script = new StringBuffer();
		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");
		script.append("<script type=\"text/javascript\">"+RN);
		script.append("		jQuery(function(){"+RN);
		script.append("		jQuery(\"#"+id+"\").jqGrid({"+RN);
		script.append("			"+jsonProperties+","+RN);
		script.append("			"+colNames+RN);
		script.append("			"+colModel+RN);
		script.append("		}).navGrid(\"#"+id+"Pager\",{"+TagTools.KeyValuePair2Json("edit:"+edit+":true","add:"+add+":true","del:"+del+":true")+"});"+RN);
		script.append("	    "+datas+RN);
		script.append("		jQuery(\"#"+id+"\").jqGrid('setFrozenColumns'); "+RN);
		script.append("		for(var i=0;i<=___datas.length;i++)"+RN);
		script.append("		        jQuery(\"#"+id+"\").jqGrid(\"addRowData\",i+1,___datas[i]);"+RN);
		script.append("		});"+RN);
		script.append("		jQuery(\"#"+id+"\").jqGrid('setGridParam',{\"page\":1,}).trigger(\"reloadGrid\"); "+RN);
		script.append("</script>"+RN);
		return script.toString();
	}
}

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

测试代码：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://blog.csdn.net/xiaochunyong" prefix="i" %>
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jquery-ui/themes/cupertino/jquery-ui-1.8.20.custom.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jquery-ui/themes/demos.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jqGrid/css/ui.jqgrid.css'/>">
		<link rel="stylesheet" type="text/css" href="<c:url value='/js/jQuery/jqGrid/plugins/ui.multiselect.css'/>">
		<script type="text/javascript" src="<c:url value="/js/jQuery/jquery-1.7.2.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/i18n/grid.locale-cn.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/js/jQuery/jqGrid/js/jquery.jqGrid.min.js"/>"></script>
	</head>


	<body>
		<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">
			<i:tr>
				<i:th name="webname" frozen="true">网站名称</i:th>
				<i:th name="weburl" frozen="true">网站地址</i:th>
				<i:th name="username" frozen="true">用户名</i:th>
				<i:th name="email">邮箱</i:th>
				<i:th name="phone">手机号码</i:th>
				<i:th name="note">备注</i:th>
				<i:th name="op">操作</i:th>
			</i:tr>
			<c:forEach begin="1" end="50">
				<i:tr>
					<i:td name="webname">CSDN</i:td>
					<i:td name="weburl"><a href="http://www.csdn.net">http://www.csdn.net</a></i:td>
					<i:td name="username">zhangsan</i:td>
					<i:td name="email">[email protected]</i:td>
					<i:td name="phone">187123123</i:td>
					<i:td name="note">...</i:td>
					<i:td name="op">
						<a href="#" onclick="alert('修改');return false;">修改</a>
						<a href="#" onclick="alert('删除');return false;">删除</a>
					</i:td>
				</i:tr>
			</c:forEach>
			<i:tr>
				<i:td name="webname">合计</i:td>
			</i:tr>
		</i:table>
	</body>
</html>

效果：

右键查看源码：

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

JSTL标签 封装jqGrid表格插件

猜你喜欢

JSTL标签封装jqGrid表格插件