jsp自定义标签封装jqGrid

    jsp标签技术非常实用,这不,才到公司实习就用到了。我是用一个jsp标签封装了jqGrid(jQuery的一个表格插件)通过一个select语句就能自动构建表格,并能从数据库中取得参数。整个小架构就不发出来了,因为我把jqGrid表格进行了二次封装,如果又想要的,可以留言哈。下面主要讲的是jsp自定义标签的用法。

一、写一个tag的解析类 要继承TagSupport类,复写 doStartTag()或者doEndTag就行了。
package com.lubby.tag;
import java.io.IOException;
import java.util.Properties;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.TagSupport;
import org.apache.struts2.ServletActionContext;
import com.lubby.util.PropertiesUtil;
import com.opensymphony.xwork2.ActionContext;

public class jqgrid extends TagSupport {
private String sql;
@Override
public int doEndTag() throws JspException {
try {
PropertiesUtil.setProperties(sql);
System.out.println(sql);
pageContext.getOut().print("<div id=\"content\"><table id=\"gridTable\" ></table><div id=\"gridPager\" 
style=\"height:40px\" ></div></div>");
} catch (IOException e) {
e.printStackTrace();
}
return EVAL_PAGE;
}
public void setSql(String sql) {
this.sql = sql;
}
public String getSql() {
return sql;
}
}

二、建立tld文件  (tld的taglib有两种引用,我用的是不用再web.xml配置的那种)

<?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["To make it easier to access dynamic data;"]]></description>
    <display-name>Permission Tags</display-name>
    
    <tlib-version>1.0</tlib-version>
    <short-name>lubby</short-name>
    <uri>www.lubby.com</uri> //在声明标签的时候使用
   
 <tag>
        <name>jqgrid</name>     //在jsp中标签名
        <tag-class>com.lubby.tag.jqgrid</tag-class>  //标签的解释类
        <body-content>empty</body-content>     //没有body体
        <attribute> //设置参数
            <name>sql</name> //参数名为sql
            <required>true</required> //参数是必须提供的
            <fragment>true</fragment>
        </attribute>
    </tag>
    </taglib>

三、在页面上使用标签
1.声明标签
<%@ taglib prefix="s" uri="www.lubby.com"%>
2.使用标签
<s:jqgrid sql = "select t1.id as 编号 ,t1.bussiness as 业务类型 ,t1.customer as 手机号码 ,t1.brand as 品牌 from info t1" />
3.客户端访问时生成的代码是:

<div id="content"><table id="gridTable" ></table><div id="gridPager" style="height:40px" ></div></div>

需要注意的是:jsp自定义标签的原理:jsp最终会转化为servlet,自定义标签也会转化为servlet里面执行代码,servlet会返回给客户端html代码,
客户端(游览器)解释所接收到的html代码。自定义标签由应用服务器转化成html代码。客户端访问的实际上是已经转化的html页面。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
封装 jqGrid 表头条件搜索,你可以按照以下步骤进行: 1. 在 HTML 页面中添加一个表格,并为其指定一个唯一的 ID。 2. 在 JavaScript 中使用 jqGrid 插件对该表格进行初始化,并设置表头条件搜索的相关参数,例如: ``` $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", index: "id", width: 55 }, { name: "name", index: "name", width: 90 }, { name: "category", index: "category", width: 80, stype: "select", searchoptions: { value: ":All;1:Category 1;2:Category 2" } }, { name: "price", index: "price", width: 80, align: "right", formatter: "currency", formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ " }, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] } }, ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "desc", caption: "jqGrid Example", height: "auto", autowidth: true, search: true, searchOnEnter: false, searchOperators: true, searchToolbar: true, }); ``` 在上面的代码中,`colModel` 数组中的每个元素表示表格中的一列,其中 `stype` 属性用于指定该列的搜索类型,例如 `select` 表示下拉列表框,`text` 表示文本框,`date` 表示日期选择框等。`searchoptions` 属性用于设置该列的搜索选项,例如 `value` 属性可以设置下拉列表框中的选项,`sopt` 属性可以设置该列支持的搜索操作符。 3. 在 HTML 页面中添加一个搜索框,并为其指定一个唯一的 ID。 4. 在 JavaScript 中使用 jqGrid 插件的 `filterToolbar` 方法对搜索框进行初始化,并指定要搜索的表格的 ID,例如: ``` $("#grid").jqGrid("filterToolbar", { searchOnEnter: false, searchOperators: true }); ``` 在上面的代码中,`searchOnEnter` 属性表示是否在按下回车键时触发搜索操作,`searchOperators` 属性表示是否显示搜索操作符列表。 通过以上步骤,你就可以封装 jqGrid 表头条件搜索了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值