- 浏览: 9792 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
月亮不懂夜的黑:
很是可以啊,我也在做计算器就进来观摩一下,比我的强悍多了。
javax.swing 写的计算器 提供源码 -
nishijia:
很不错 要是坦克能好看点九好了 真的无法联想到长那样子
[javase] javax.swing 写的一个坦克大战 -
westice:
这是什么原因,我没有,孤独的坦克在哪里战斗,上面说不要用JPa ...
[javase] javax.swing 写的一个坦克大战 -
foxlish:
运行产生了:Exception in thread " ...
[javase] javax.swing 写的一个坦克大战 -
westice:
参观了,简单有效,用GBK编码吧,我这儿一堆乱码。我也在写坦克 ...
[javase] javax.swing 写的一个坦克大战
GT-Grid 这个列表组件我就不介绍了,相信朋友们都知道!在最近的两个项目里,后台都用到了GT-Grid,唯一觉得麻烦的就是jsp页面中要写很多js的配置,因此对其进行了封装,优化最后和大家分享我这个团队的结果!
封装的思路: 使用标签 标签在解析时在页面中打印响应的配置js
以下是标签代码:
GtColumnTag.java
GtTag.java
这两段代码相信大家也都明白了吧!
接着便是在web-inf下的tld文件了 文件名:gt-tag.tld
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.0" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd">
<description><![CDATA["Gt-Grid Tag "]]></description>
<display-name>"GT Tags"</display-name>
<tlib-version>1.0</tlib-version>
<short-name>s</short-name>
<uri>/gt-tags</uri>
<tag>
<description><![CDATA[GT-Grid Configs ]]></description>
<name>table</name>
<tag-class>com.jframe.tag.GtTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<description><![CDATA[]]></description>
<name>id</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>dataset</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>columns</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>container</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>toolbarPosition</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>toolbarContent</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>pageSize</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>pageSizeList</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>loadURL</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>remotePaging</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>remoteSort</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>autoLoad</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>selectRowByCheck</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>width</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>height</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>beforeSaveFunction</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>saveURL</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<dynamic-attributes>true</dynamic-attributes>
</tag>
<tag>
<description><![CDATA[GT-Grid Column ]]></description>
<name>column</name>
<tag-class>com.jframe.tag.GtColumnTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<description><![CDATA[]]></description>
<name>name</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>type</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>index</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>initValue</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>id</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>header</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>fieldName</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>minWidth</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>width</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>align</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>sortable</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>sortOrder</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>hidden</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>printable</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>renderer</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>isCheckColumn</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>isCheckbox</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>dateFormat</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>editType</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>options</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>validRule</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>validatorFunction</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>mappingArray</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<dynamic-attributes>true</dynamic-attributes>
</tag>
</taglib>
到这里基本上就都完了 然后就是jsp页面的使用
部分js
到此结束
封装的思路: 使用标签 标签在解析时在页面中打印响应的配置js
以下是标签代码:
GtColumnTag.java
package com.jframe.tag; /** * Title:自定列表列标签 * Description: * Copyright: Copyright (c) 2009-2011 * @author:jframe lixiaojie wangjun * @version 1.0 */ import javax.servlet.jsp.JspException; import javax.servlet.jsp.JspWriter; import javax.servlet.jsp.tagext.BodyContent; import javax.servlet.jsp.tagext.BodyTagSupport; import javax.servlet.jsp.tagext.DynamicAttributes; import javax.servlet.jsp.tagext.Tag; public class GtColumnTag extends BodyTagSupport implements DynamicAttributes { private static final long serialVersionUID = 2852493162447418830L; private String name; //数据集唯一标示 必填1 private String type; //数据类型 date int float string 默认是string private String index; //字段对应的"record的属性名". 根据index,GT-Grid就可以知道这一列 对应的时record哪个属性的值. private String initValue; //调用gt函数产生新的数据集 值例如:function(record){return record['english'] + record['math'];}} private String id; //每个列表组件都有一个id 该id在页面内唯一 private String header; //列显示名称 必填2 private String fieldName; //对应数据库字段 private String minWidth; //列最小宽度 private String width; //宽 private String align; //对其方式 private String sortable; //是否排序 ,只能设置一个列 ,true/false private String sortOrder; //排序规则asc desc private String hidden; //列是否被隐藏 private String printable; //列是否能打印 private String renderer; //调用gt的方法返回值 方法: function(value ,record,columnObj,grid,colNo,rowNo){return '<a href=".?no='+record['no']+'" >'+ record['name'] +' 的详细信息</a>';}} //例2: GT.Grid.mappingRenderer( {'U': '未知' , 'M':'男', 'F':'女'} , '未知' ) private String isCheckColumn;//是否是checkbox显示 必须设置GTTable属性selectRowByCheck : true, checkbox 名字是: gt_grid1_chk_no 规律 gt不变 grid1 是列表id chk不变 no 是列名 private String isCheckbox; //自定义checkbox private String dateFormat; //日期格式化 private String editType; private String options; private String validRule; private String validatorFunction; private String[] mappingArray; @Override public int doStartTag() throws JspException { if(this.index==null) { this.index=this.name; } if(this.id==null) { this.id=this.name; } if(this.fieldName!=null) { this.name=this.fieldName; } return EVAL_BODY_INCLUDE; } @Override public void doInitBody() throws JspException { // TODO Auto-generated method stub super.doInitBody(); } @Override public void setBodyContent(BodyContent b) { // TODO Auto-generated method stub super.setBodyContent(b); } @Override public int doAfterBody() throws JspException { // TODO Auto-generated method stub return super.doAfterBody(); } @Override public int doEndTag() throws JspException { try { StringBuffer columnDataStr=new StringBuffer(); StringBuffer columnConfigStr=new StringBuffer(); GtTag tableTag=(GtTag)this.getParent(); columnDataStr.append("{name:").append("'").append(name).append("'"); if(type!=null) { columnDataStr.append(",type:").append("'").append(type).append("'"); } columnDataStr.append(",index:").append("'").append(index).append("'"); if(initValue!=null) { columnDataStr.append(",initValue:").append(initValue); } if("true".equals(this.isCheckbox)) { columnDataStr.append(",initValue:").append("function(record){return '<input name=\\'id-checkbox\\' type=checkbox value=\\''+record['"+index+"']+'\\'>'} "); this.width="35"; sortable="false"; } columnDataStr.append("}"); columnConfigStr.append("{id:").append("'").append(id).append("'"); if("true".equals(this.isCheckbox)) { columnConfigStr.append(",header:").append("'").append("<input id=selectAllCheckbox type=checkbox onclick=selectAllCheckbox(this)>").append("'"); columnConfigStr.append(",title:").append("'全选'"); } else { columnConfigStr.append(",header:").append("'").append(header).append("'"); } if(fieldName!=null) { columnConfigStr.append(",fieldName:").append("'").append(fieldName).append("'"); } if(minWidth!=null) { columnConfigStr.append(",minWidth:").append("'").append(minWidth).append("'"); } if(width!=null) { columnConfigStr.append(",width:").append("'").append(width).append("'"); } if(align!=null) { columnConfigStr.append(",align:").append("'").append(align).append("'"); } if(sortable!=null) { columnConfigStr.append(",sortable:").append(sortable); } if(sortOrder!=null) { columnConfigStr.append(",sortOrder:").append("'").append(sortOrder).append("'"); } if(hidden!=null) { columnConfigStr.append(",hidden:").append(hidden); } if(printable!=null) { columnConfigStr.append(",printable:").append(printable); } if(dateFormat!=null) { renderer=null; columnConfigStr.append(",renderer : function(value ,record,columnObj,grid,colNo,rowNo){return dateformat(value,'").append(dateFormat).append("');}"); tableTag.getJsCode().append("Date.prototype.pattern=function(fmt){var o={\"M+\":this.getMonth()+1,\"d+\":this.getDate(),\"h+\":this.getHours()%12==0?12:this.getHours()%12,\"H+\":this.getHours(),\"m+\":this.getMinutes(),\"s+\":this.getSeconds(),\"q+\":Math.floor((this.getMonth()+3)/3),\"S\":this.getMilliseconds()};var week={\"0\":\"\u65e5\",\"1\":\"\u4e00\",\"2\":\"\u4e8c\",\"3\":\"\u4e09\",\"4\":\"\u56db\",\"5\":\"\u4e94\",\"6\":\"\u516d\"};if(/(y+)/.test(fmt)){fmt=fmt.replace(RegExp.$1,(this.getFullYear()+\"\").substr(4-RegExp.$1.length));}if(/(E+)/.test(fmt)){fmt=fmt.replace(RegExp.$1,((RegExp.$1.length>1)?(RegExp.$1.length>2?\"\u661f\u671f\":\"\u5468\"):\"\")+week[this.getDay()+\"\"]);}for(var k in o){if(new RegExp(\"(\"+k+\")\").test(fmt)){fmt=fmt.replace(RegExp.$1,(RegExp.$1.length==1)?(o[k]):((\"00\"+o[k]).substr((\"\"+o[k]).length)));}}return fmt;}; "); tableTag.getJsCode().append("function dateformat(value,formatStr){if(value==null||value==''){return'';}var d=new Date();d.setYear(Number(value.substring(0,4)));d.setMonth(Number(value.substring(5,7)-1));d.setDate(Number(value.substring(8,10)));d.setHours(Number(value.substring(11,13)));d.setMinutes(Number(value.substring(14,16)));d.setSeconds(Number(value.substring(17,19)));return d.pattern(formatStr);}"); } if(mappingArray!=null&&mappingArray.length>0) { renderer=null; columnConfigStr.append(",renderer : GT.Grid.mappingRenderer( {"); StringBuffer str=new StringBuffer(); for(int i=0;i<mappingArray.length;i++) { str.append("'").append(i).append("':'").append(mappingArray[i]).append("',"); } String tempStr=str.toString(); columnConfigStr.append(tempStr.substring(0, tempStr.length()-1)); columnConfigStr.append("} , '未知' ) "); } if(renderer!=null) { columnConfigStr.append(",renderer:").append(renderer); } if(isCheckColumn!=null) { columnConfigStr.append(",isCheckColumn:").append(isCheckColumn); } if(this.editType!=null) { columnConfigStr.append(",editor:{type:'" ).append(this.editType).append("'"); if(this.validRule!=null) { columnConfigStr.append(",validRule :'").append(this.validRule).append("'"); } if(this.validatorFunction!=null) { columnConfigStr.append(",validator : function(value,record,colObj,grid){ return ").append(this.validatorFunction).append("(value,record,colObj,grid);}"); } columnConfigStr.append("}"); } columnConfigStr.append("}"); tableTag.getDataStr().append(columnDataStr).append(","); tableTag.getConfigStr().append(columnConfigStr).append(","); if("true".equals(this.isCheckbox)) { tableTag.getJsCode().append("function selectAllCheckbox(arg){var chks=document.getElementsByName('id-checkbox');"); tableTag.getJsCode().append("if(arg.checked){for(var i=0;i<chks.length;i++){chks[i].checked=true;}}else{for(var "); tableTag.getJsCode().append("i=0;i<chks.length;i++){chks[i].checked=false;}}}"); } this.clear(); } catch (Exception e) { e.printStackTrace(); } return super.doEndTag(); } public void setDynamicAttribute(String arg0, String arg1, Object arg2) throws JspException { } @Override public Tag getParent() { return super.getParent(); } @Override public void setParent(Tag t) { super.setParent(t); } public void clear() { name =null; type=null; index=null; initValue=null; id =null; header=null; fieldName=null; minWidth=null; width=null; align=null; sortable=null; sortOrder=null; hidden =null; printable=null; renderer=null; isCheckColumn=null; isCheckbox=null; dateFormat=null; editType=null; options=null; validRule=null; validatorFunction=null; mappingArray=null; } //get 、set 方法 public String getName() { return name; } public void setName(String name) { this.name = name; } public String getType() { return type; } public void setType(String type) { this.type = type; } public String getIndex() { return index; } public void setIndex(String index) { this.index = index; } public String getInitValue() { return initValue; } public void setInitValue(String initValue) { this.initValue = initValue; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getHeader() { return header; } public void setHeader(String header) { this.header = header; } public String getFieldName() { return fieldName; } public void setFieldName(String fieldName) { this.fieldName = fieldName; } public String getMinWidth() { return minWidth; } public void setMinWidth(String minWidth) { this.minWidth = minWidth; } public String getWidth() { return width; } public void setWidth(String width) { this.width = width; } public String getAlign() { return align; } public void setAlign(String align) { this.align = align; } public String getSortable() { return sortable; } public void setSortable(String sortable) { this.sortable = sortable; } public String getSortOrder() { return sortOrder; } public void setSortOrder(String sortOrder) { this.sortOrder = sortOrder; } public String getHidden() { return hidden; } public void setHidden(String hidden) { this.hidden = hidden; } public String getPrintable() { return printable; } public void setPrintable(String printable) { this.printable = printable; } public String getRenderer() { return renderer; } public void setRenderer(String renderer) { this.renderer = renderer; } public String getIsCheckColumn() { return isCheckColumn; } public void setIsCheckColumn(String isCheckColumn) { this.isCheckColumn = isCheckColumn; } public String getIsCheckbox() { return isCheckbox; } public void setIsCheckbox(String isCheckbox) { this.isCheckbox = isCheckbox; } public String getEditType() { return editType; } public void setEditType(String editType) { this.editType = editType; } public String getOptions() { return options; } public void setOptions(String options) { this.options = options; } public String getValidRule() { return validRule; } public void setValidRule(String validRule) { this.validRule = validRule; } public String getValidatorFunction() { return validatorFunction; } public void setValidatorFunction(String validatorFunction) { this.validatorFunction = validatorFunction; } public String getDateFormat() { return dateFormat; } public void setDateFormat(String dateFormat) { this.dateFormat = dateFormat; } public String[] getMappingArray() { return mappingArray; } public void setMappingArray(String[] mappingArray) { this.mappingArray = mappingArray; } }
GtTag.java
package com.jframe.tag; /** * Title:自定义列表标签 * Description: * Copyright: Copyright (c) 2009-2011 * @author:li xiao jie * @version 1.0 */ import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet.jsp.JspWriter; import javax.servlet.jsp.tagext.BodyContent; import javax.servlet.jsp.tagext.BodyTagSupport; import javax.servlet.jsp.tagext.DynamicAttributes; import org.apache.log4j.Logger; public class GtTag extends BodyTagSupport implements DynamicAttributes { private static final long serialVersionUID = -4866840081048266381L; private StringBuffer outStr=null; //最终返回页面结果 private StringBuffer dataStr=null; //从子标签中获得数据集定义 private StringBuffer configStr=null; //从子标签中获得列定义信息 private String id; //列表对象唯一id private String dataset ; //数据集描述 private String columns ; //描述 private String container ; //显示位置 private String toolbarPosition ; //工具栏的位置. 可选值:top bottom null private String toolbarContent ; //具栏上要显示的东西 如 nav | goto | pagesize | state | reload | print private String pageSize ; //每页记录数 private String pageSizeList ; //可选每页记录数 如 5,10,15,20 private String loadURL ; //调用的action地址 private String remotePaging ; //true :后台翻页 false :前台翻页 private String remoteSort ; //true :数据库排序 false :页面排序 private String autoLoad ; //true :加载数据 false :第一次显示不加载数据 用于条件查询 private String selectRowByCheck; //通过checkBox列 来选择行. true false private String width; private String height; private StringBuffer jsCode=new StringBuffer(); //扩展使用的js private String beforeSaveFunction; //保存前执行的js private String saveURL; private Logger log = Logger.getLogger(this.getClass()); @Override public int doStartTag() throws JspException { //初始化数据 outStr=new StringBuffer("<script type=\"text/javascript\" >"); dataStr=new StringBuffer(" var dsConfig= {fields :["); configStr=new StringBuffer(" var colsConfig = ["); if(id==null) { id="grid1"; } if(dataset==null) { dataset="dsConfig"; } if(columns==null) { columns="colsConfig"; } if(toolbarPosition==null) { toolbarPosition="bottom"; } if(toolbarContent==null) { toolbarContent="nav | goto | pagesize | reload | print | state"; } if(pageSize==null) { pageSize="10"; } if(pageSizeList==null) { pageSizeList="5,10,15,20"; } if(remotePaging==null) { remotePaging="true"; } if(remoteSort==null) { remoteSort="false"; } if(autoLoad==null) { autoLoad="true"; } if(selectRowByCheck==null) { selectRowByCheck="false"; } if(width==null) { width="100%"; } if(height==null) { height="100%"; } return EVAL_BODY_INCLUDE; } @Override public void doInitBody() throws JspException { // TODO Auto-generated method stub super.doInitBody(); } @Override public void setBodyContent(BodyContent b) { // TODO Auto-generated method stub super.setBodyContent(b); } @Override public int doAfterBody() throws JspException { // TODO Auto-generated method stub return super.doAfterBody(); } @Override public int doEndTag() throws JspException { try { dataStr.replace(dataStr.lastIndexOf(","), dataStr.length(), " ]}; "); configStr.replace(configStr.lastIndexOf(","), configStr.length(), " ]; "); JspWriter out = pageContext.getOut(); outStr.append(dataStr); outStr.append(configStr); outStr.append("var gridConfig={"); outStr.append("id : ").append("\"").append(id).append("\","); outStr.append("dataset : ").append(dataset).append(","); outStr.append("columns : ").append(columns).append(","); outStr.append("container : ").append("'").append(container).append("',"); outStr.append("toolbarPosition : ").append("'").append(toolbarPosition).append("',"); outStr.append("toolbarContent : ").append("'").append(toolbarContent).append("',"); outStr.append("pageSize : ").append(pageSize).append(","); outStr.append("pageSizeList : ").append("[").append(pageSizeList).append("],"); outStr.append("loadURL : ").append("'").append(loadURL).append("',"); outStr.append("remotePaging : ").append(remotePaging).append(","); outStr.append("remoteSort : ").append(remoteSort).append(","); outStr.append("autoLoad : ").append(autoLoad).append(","); outStr.append("selectRowByCheck : ").append(selectRowByCheck).append(","); outStr.append("width : ").append("'").append(width).append("',"); outStr.append("height : ").append("'").append(height).append("'"); if(beforeSaveFunction!=null) { outStr.append(",beforeSave : function(reqParam){return ").append(this.beforeSaveFunction).append("(reqParam);}"); } if(this.saveURL!=null) { outStr.append(",saveURL : '").append(this.saveURL).append("'"); outStr.append(",afterSave:function(arg1,arg2,arg3){if(arg2){alert(\"操作成功!\");}else{this.saveSuccess();}}"); } outStr.append(" };"); outStr.append("var mygrid=new GT.Grid( gridConfig );"); outStr.append(" GT.Utils.onLoad( function(){mygrid.render();} ); "); outStr.append(this.jsCode); outStr.append("</script>"); out.write(outStr.toString()); this.clear(); log.info(outStr.toString()); } catch (Exception e) { e.printStackTrace(); } return super.doEndTag(); } public void setDynamicAttribute(String arg0, String arg1, Object arg2) throws JspException { } public void clear() { id=null; dataset =null; columns =null; container =null; toolbarPosition =null; toolbarContent =null; pageSize =null; pageSizeList =null; loadURL =null; remotePaging =null; remoteSort =null; autoLoad =null; selectRowByCheck=null; width=null; height=null; jsCode=new StringBuffer(); this.beforeSaveFunction=null; this.saveURL=null; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getDataset() { return dataset; } public void setDataset(String dataset) { this.dataset = dataset; } public String getColumns() { return columns; } public void setColumns(String columns) { this.columns = columns; } public String getContainer() { return container; } public void setContainer(String container) { this.container = container; } public String getToolbarPosition() { return toolbarPosition; } public void setToolbarPosition(String toolbarPosition) { this.toolbarPosition = toolbarPosition; } public String getToolbarContent() { return toolbarContent; } public void setToolbarContent(String toolbarContent) { this.toolbarContent = toolbarContent; } public String getPageSize() { return pageSize; } public void setPageSize(String pageSize) { this.pageSize = pageSize; } public String getPageSizeList() { return pageSizeList; } public void setPageSizeList(String pageSizeList) { this.pageSizeList = pageSizeList; } public String getLoadURL() { return loadURL; } public void setLoadURL(String loadURL) { this.loadURL = loadURL; } public String getRemotePaging() { return remotePaging; } public void setRemotePaging(String remotePaging) { this.remotePaging = remotePaging; } public String getRemoteSort() { return remoteSort; } public void setRemoteSort(String remoteSort) { this.remoteSort = remoteSort; } public String getAutoLoad() { return autoLoad; } public void setAutoLoad(String autoLoad) { this.autoLoad = autoLoad; } public StringBuffer getDataStr() { return dataStr; } public void setDataStr(StringBuffer dataStr) { this.dataStr = dataStr; } public StringBuffer getConfigStr() { return configStr; } public void setConfigStr(StringBuffer configStr) { this.configStr = configStr; } public String getSelectRowByCheck() { return selectRowByCheck; } public void setSelectRowByCheck(String selectRowByCheck) { this.selectRowByCheck = selectRowByCheck; } public String getWidth() { return width; } public void setWidth(String width) { this.width = width; } public String getHeight() { return height; } public void setHeight(String height) { this.height = height; } public StringBuffer getJsCode() { return jsCode; } public void setJsCode(StringBuffer jsCode) { this.jsCode = jsCode; } public String getBeforeSaveFunction() { return beforeSaveFunction; } public void setBeforeSaveFunction(String beforeSaveFunction) { this.beforeSaveFunction = beforeSaveFunction; } public String getSaveURL() { return saveURL; } public void setSaveURL(String saveURL) { this.saveURL = saveURL; } }
这两段代码相信大家也都明白了吧!
接着便是在web-inf下的tld文件了 文件名:gt-tag.tld
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.0" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd">
<description><![CDATA["Gt-Grid Tag "]]></description>
<display-name>"GT Tags"</display-name>
<tlib-version>1.0</tlib-version>
<short-name>s</short-name>
<uri>/gt-tags</uri>
<tag>
<description><![CDATA[GT-Grid Configs ]]></description>
<name>table</name>
<tag-class>com.jframe.tag.GtTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<description><![CDATA[]]></description>
<name>id</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>dataset</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>columns</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>container</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>toolbarPosition</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>toolbarContent</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>pageSize</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>pageSizeList</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>loadURL</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>remotePaging</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>remoteSort</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>autoLoad</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>selectRowByCheck</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>width</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>height</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>beforeSaveFunction</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>saveURL</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<dynamic-attributes>true</dynamic-attributes>
</tag>
<tag>
<description><![CDATA[GT-Grid Column ]]></description>
<name>column</name>
<tag-class>com.jframe.tag.GtColumnTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<description><![CDATA[]]></description>
<name>name</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>type</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>index</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>initValue</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>id</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>header</name>
<required>true</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>fieldName</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>minWidth</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>width</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>align</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>sortable</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>sortOrder</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>hidden</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>printable</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>renderer</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>isCheckColumn</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>isCheckbox</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>dateFormat</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>editType</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>options</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>validRule</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>validatorFunction</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<description><![CDATA[]]></description>
<name>mappingArray</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<dynamic-attributes>true</dynamic-attributes>
</tag>
</taglib>
到这里基本上就都完了 然后就是jsp页面的使用
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="/gt-tags" prefix="t"%> <%@ include file="/common/head.jsp" %> <%@ page import="com.jframe.yxl.common.Contants" %> <html> <head> <script type="text/javascript" src="<%=path%>/common/js/manager/newslist.js"></script> </head> <body> <table width="100%" align="center" border="0" cellpadding="3" cellspacing="1" bgcolor="#CBD8AC" style="margin-bottom:8px;margin-top:8px;"> <tr> <td background="<%=path %>/common/image/manager/hd_row_bg.gif" align="center" style="font-size:14px;color:#666600;font-weight:bold;"> 新 闻 管 理</td> </tr> <tr bgcolor="#FFFFFF"> <td> <a href="toAddNews.do" class="manager" title="添加一个新闻">新闻发布</a> <a class="manager" title="现在就在这里">新闻列表</a> <a href="#" onclick="newsManager(0)" class="manager" title="关闭选中新闻项的留言功能">留言屏蔽</a> <a href="#" onclick="newsManager(1)" class="manager" title="开启选中新闻项的留言功能">留言启用</a> <a href="#" onclick="deleteAll()" class="manager" >删除选中</a> </td> </tr> </table> <form name="queryForm"> <div class="gt-panel" style="width:100%;" > <div class="gt-panel-head"><span>新闻检索</span></div> <div class="gt-panel-body"> <table width="100%" class="mtable"> <tr> <td width="20%" align="right">新闻类型:</td> <td width="30%"> <select name="newsType" id=newsType> <option value="">--请选择--</option> <s:iterator id="type" value="%{#request.newsType}"> <option value="${type.newsTypeUuid}">${type.newsTypeName }</option> </s:iterator> </select> </td> <td width="20%" align="right">标题:</td> <td width="30%"><input size="30" id="newstitle"></td> </tr> <tr> <td width="20%" align="right">发布人名称:</td> <td width="30%"><input size="30" id="createnewsusername"> </td> <td width="20%" align="right">关键字:</td> <td width="30%"><input size="30" title="多个关键字请用空格隔开" id="newskeys"></td> </tr> <tr> <td width="20%" align="right">发布日期:</td> <td width="30%">起:<input size="10" title="开始日期" readonly id="qtime">--止:<input size="10" readonly title="结束" id="ztime"></td> <td width="20%" align="right">链接地址</td> <td width="30%"><input size="30" id="newurl"> </td> </tr> <tr> <td colspan="2" align="right"><input type="button" class="gt-input-button" value="查询" onClick="query()" /></td> <td colspan="2"><input type="reset" class="gt-input-button" value="重置" /></td> </tr> </table> </div> </div> </form> <div id="grid1_container"></div> <t:table container="grid1_container" loadURL="newsList.do" selectRowByCheck="true" > <t:column name="newsUuid" header="编号" type="string" fieldName="newsUuid" isCheckColumn="true"></t:column> <t:column name="newsTitle" header="标题" fieldName="newsTitle"></t:column> <t:column name="newsCreateUserName" header="发布人" fieldName="newsCreateUserName"></t:column> <t:column name="newsCreateDate" type="date" dateFormat="yyyy-MM-dd HH:mm" header="发布时间" fieldName="newsCreateDate"></t:column> <t:column name="newsRequestCount" header="访问数" fieldName="newsRequestCount"></t:column> <t:column name="newsSurportCount" header="支持数" fieldName="newsSurportCount"></t:column> <t:column name="newsAgainstCount" header="反对数" fieldName="newsAgainstCount"></t:column> <t:column name="newsMessageEnable" renderer="GT.Grid.mappingRenderer( {'0': '不启用' , '1':'启用'},'未知' )" header="是否启用留言屏蔽" fieldName="newsMessageEnable"></t:column> <t:column name="newsManager" fieldName="newsManager" header="操作" sortable="false"></t:column> </t:table> <div id="infoDiv" style=" display:none;position:absolute; z-index:5; top:20px; left:20px; border:solid 4px #CCCCCC; background-color:#E6FFF3; height:600px; width:800px; overflow-y:auto;"> <table width="100%" border="0" class="mtable"> <tr background="<%=path %>/common/image/manager/hd_row_bg.gif"> <td align="center" style="font-size:14px;color:#666666;font-weight:bold;" colspan="4">新闻信息详情 <a href="#" onclick="javascript:$('#infoDiv').hide(500),$('#newsType').show();">关闭</a></td> </tr> <tr> <td width="20%" align="right">标题:</td> <td width="30%"> <label id="lnewsTitle"></label> </td> <td width="20%" align="right">所属类型:</td> <td width="30%"><label id="lnewsType"></label></td> </tr> <tr> <td align="right">来源:</td> <td colspan="3"><label id="lnewsSource"></label></td> </tr> <tr> <td align="right">内容摘要:</td> <td colspan="3"><label id="lnewsContantZy"></label></td> </tr> <tr> <td align="right">搜索关键字:</td> <td colspan="3"><label id="lnewsSearchDes"></label></td> </tr> <tr> <td align="right">搜索描述:</td> <td colspan="3"><label id="lnewsSearchMate"></label></td> </tr> <tr> <td align="right">访问地址:</td> <input type="hidden" id="path" value="<%=path %>/<%=Contants.HTMl_NEWS_FILE %>"> <td colspan="3"><label id="lnewsUrl"></label></td> </tr> <tr> <td align="right">目前访问量:</td> <td colspan="3"><label id="lnewsRequestCount"></label></td> </tr> <tr> <td align="right">目前反对数:</td> <td><label id="lnewsAgainstCount"></label></td> <td align="right">目前支持数:</td> <td><label id="lnewsSurportCount"></label></td> </tr> <tr> <td align="right">新闻发布人:</td> <td><label id="lnewsCreateUserName"></label></td> <td align="right">新闻发布时间:</td> <td><label id="lnewsCreateDate"></label></td> </tr> <tr> <td align="right">最后修改人:</td> <td><label id="lnewsUpdateUserName"></label></td> <td align="right">最后修改时间:</td> <td><label id="lnewsUpdateTime"></label></td> </tr> <tr> <td align="right">留言是否屏蔽:</td> <td><label id="lnewsMessageEnable"></label></td> <td align="right">新闻内容:</td> <td>见下</td> </tr> <tr> <td colspan="4" id="lnewsContant"></td> </tr> </table> </div> </body> </html> <%@ include file="/common/bottom.jsp" %>
部分js
$(function(){ $("#qtime").click(function(){WdatePicker({skin:'whyGreen',oncleared:function(){$(this).blur();},onpicked:function(){$(this).blur();}})}); $("#ztime").click(function(){WdatePicker({skin:'whyGreen',oncleared:function(){$(this).blur();},onpicked:function(){$(this).blur();}})}); }); function query(){ var param = {newsTitle:document.getElementById("newstitle").value, newsKeys:document.getElementById("newskeys").value, createUserName:document.getElementById("createnewsusername").value, newsUrl:document.getElementById("newUrl").value, qTime:document.getElementById('qtime').value, zTime:document.getElementById('ztime').value, newsType:document.getElementById('newsType').value }; mygrid.query(param); } /* newsInfo 不能随便更改的函数 */ function newsInfo( op, newsid) { if(op == "info") { //显示信息 $.post( "findNewsById.do", {newsUuid:newsid}, function(data) { $("#lnewsTitle").html(data.news.newsTitle); $("#lnewsSource").html(data.news.newsSource); $("#lnewsSearchMate").html(data.news.newsSearchMate); $("#lnewsContantZy").html(data.news.newsContantZy); $("#lnewsSearchDes").html(data.news.newsSearchDes); $("#lnewsSearchMate").html(data.news.newsSearchMate); $("#lnewsUrl").html("<a href='"+$("#path").val()+"/"+data.news.newsUrl+"' target='_blank' >"+data.news.newsUrl+"</a>"); $("#lnewsRequestCount").html(data.news.newsRequestCount); $("#lnewsAgainstCount").html(data.news.newsAgainstCount); $("#lnewsCreateUserName").html(data.news.newsCreateUserName); $("#lnewsSurportCount").html(data.news.newsSurportCount); $("#lnewsUpdateUserName").html(data.news.newsUpdateUserName); $("#lnewsCreateDate").html(data.news.newsCreateDate.replace(/T/," ")); $("#lnewsUpdateTime").html(data.news.newsUpdateTime.replace(/T/," ")); $("#lnewsMessageEnable").html(data.news.newsMessageEnable==1?"启用":"禁用"); $("#lnewsContant").html(data.news.newsContant); var types = data.news.newsTypes; for(i=0;i<types.length;i++) { $("#lnewsType").html($("#lnewsType").html()+types[i]+" "); } $("#infoDiv").show(700); }, "json" ); $("#newsType").hide(); }else if(op=="update") { //修改 document.location.assign("toNewsUpdate.do?newsUuid="+newsid); }else if(op=="delete") { //删除 if(confirm("确定要删除这条数据吗?")) { document.location.assign("newsDelete.do?newsUuid="+newsid); } }else{ alert("参数不正确!"); } } function deleteAll() { var checkboxs = mygrid.getSelectedRecords(); if(checkboxs.length==0) { alert("您还没有选择您要操作的项目!"); return; }else{ if(confirm("确定一次操作这"+checkboxs.length+"条数据!")) { var url="newsDelete.do?newsUuid="; for(i=0;i<checkboxs.length;i++) { if(i==checkboxs.length-1) url+=checkboxs[i].newsUuid; else url+=checkboxs[i].newsUuid+"&newsUuid="; } document.location.assign(url); } } } /** 新闻留言屏蔽与开启的功能函数 op 1为启用 0 为关闭 */ function newsManager(op) { var checkboxs = mygrid.getSelectedRecords(); if(checkboxs.length==0) { alert("您还没有选择您要操作的新闻项目!"); return; }else{ if(confirm("确定一次操作这"+checkboxs.length+"条数据!")) { var url="updatenewsMessageEnable.do?newsUuid="; for(i=0;i<checkboxs.length;i++) { if(i==checkboxs.length-1) url+=checkboxs[i].newsUuid; else url+=checkboxs[i].newsUuid+"&newsUuid="; } url+="&newsMessageEnable="+op; document.location.assign(url); } } }
到此结束
相关推荐
在本教程中,我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。 首先,我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目,可以使用 Vue CLI 创建一个新的项目。在已有的项目中...
其次,`gt-grid` 提供了丰富的列配置选项,包括列宽、排序、过滤、自定义渲染等。在`gtdemo1`文件中,我们可能能看到如何定义这些列配置,例如设置`field`属性来关联数据模型的字段,使用`header`定义列头文本,或者...
在"gt_grid_demo"中,我们可以通过查看示例代码学习如何实现这些自定义功能。 总结,GT-Grid 的源码分析和后台交互实践是一个深入了解组件工作原理和优化数据管理的好途径。通过"gt_grid_demo",我们可以学习到如何...
GT-Grid 1.0 是一个强大的分布式计算框架,它为大数据处理提供了高效、灵活的解决方案。本基础教程旨在帮助初学者快速理解并掌握GT-Grid 1.0 的核心概念和基本操作,以便在实际项目中应用。下面将详细阐述GT-Grid ...
- **业务系统**:在CRM、ERP等企业级应用中,gt-grid可用于管理客户信息、订单数据等。 - **协作平台**:在团队协作工具中,gt-grid可以作为任务管理或项目进度的展示方式。 通过深入学习gt-grid的源码、开发工具...
此外,GT-Grid还支持动态加载数据,以优化页面性能,特别是处理大数据时。 EXT-Grid则是EXT JS框架的一部分,EXT JS是一个完整的前端开发库,提供了一套完整的UI组件。EXT-Grid拥有丰富的内置特性,如拖放、行级...
3. **My**:这可能是用户创建的一个自定义组件或者配置文件夹,可能包含了用户根据自身需求定制的GT-Grid样式、扩展功能或者特定的事件处理。通过研究这个文件夹,我们可以学习到如何扩展GT-Grid以满足个性化需求,...
在"gt-grid.rar+demo"中,"gt-grid"的样例源码可能包含了如何配置gt-grid实例、数据绑定、事件处理、自定义列模板等内容。通过学习这些样例,开发者可以快速上手gt-grid,并理解其工作原理。 5. **集成与使用** ...
(ECSide是GT-Grid作者的另一作品, 是一个在国内拥有广泛用户群的列表组件,它基于传统的jspTag技术) GT-Grid 的主要 特性: Ajax实现 (翻页,数据的crud 基于ajax技术) 固定表头和工具栏 自定义复杂表头 可调整列宽: ...
GT-Grid 教程示例 GT-Grid 教程示例GT-Grid 教程示例GT-Grid 教程示例
`gt-grid`是一款由"胖哥"开发的高效、功能丰富的表格组件,专为页面展示设计,旨在帮助开发者更便捷地构建数据密集型的用户界面。本教程将深入探讨`gt-grid`的基本使用方法和核心特性。 ### 1. 安装与引入 首先,...
在本示例中,“gt-grid 分页 用ajax 开发的 里面有例子”显然演示了如何使用`gt-grid`配合Ajax实现分页功能。 首先,我们需要理解Ajax的核心概念。Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的...
4. **自定义列和模板**:GT-grid提供强大的列配置能力,开发者可以自定义列的宽度、对齐方式、是否可编辑等属性。同时,通过使用模板语言,可以实现复杂的数据格式化和渲染,如日期、货币等特殊格式的展示。 5. **...
4. **分页**:对于大量数据,GT-Grid组件支持分页显示,提高页面加载速度,改善用户体验。 5. **编辑功能**:用户可以直接在Grid中进行单元格编辑,方便数据的增删改操作,通常包括行内编辑、弹出编辑等多种模式。 ...
- 自定义扩展:GT-GRID提供丰富的API和事件,允许开发者根据需求进行功能扩展和样式自定义。 总之,GT-GRID插件是开发高效数据网格应用的理想选择,其强大的功能和灵活性使其在众多网格插件中脱颖而出。通过学习和...
本示例通过“自定义表格列头,利用PopupButton做的过滤界面”来实现这一目标,这是一类常见的功能,广泛应用于数据密集型应用,如数据分析工具、管理信息系统等。PopupButton是一种交互元素,它可以在点击时弹出一个...
初始化GT-Grid需要指定其容器、数据源以及其他配置信息。具体步骤如下: 1. **选择容器**:在HTML文件中定义一个用于放置GT-Grid的容器,如上面示例中的`<div id="grid1_container">`。 2. **创建GT-Grid实例**:...
- **安装**:通常通过npm或yarn进行安装,例如`npm install ag-grid-community`。 - **初始化**:在项目中引入ag-Grid,并创建数据网格实例,设置数据源和列定义。 - **文档与示例**:ag-Grid提供详尽的官方文档和...
2. **JavaScript/TypeScript代码**:实现ag-Grid的功能,如监听事件、自定义组件、数据处理等。 3. **CSS样式**:可能包含针对ag-Grid的样式调整,以适应项目需求。 四、学习和使用 1. **官方文档**:深入理解ag-...
2、例子中实现了一个自定义的Editor:AlignModeUITypeEditor,以支持自定义的属性设计器。 3、例子中实现了一个自定义的Attribute:DisplayNameAttribute和一个自定一个TypeConverter:EnumConverter,以支持显示的...