Ext apiDoc 离线版制作-一口一口吃掉Struts（五）——...-项目的部分代码（手写智能提示，无刷新分页）

当前位置: 编程技术>WEB前端

本页文章导读:

▪Ext apiDoc 离线版制作需要几个js包，并修改index.html就可以了。 1. 离线index.html 2. 在线index.html 需要的资源：Ext apidoc 离线.zip 作者：JustOneRoad 发表于2013-3-22 16:32:15 原文链接 .........

▪一口一口吃掉Struts（五）——测试Struts标签库 Struts标签库的使用和JSTL标签库使用方式类似。认识可以了，建议熟练掌握JSTL标签库。struts标签库基本认识就可以了。核心操作：配置： * 配置国际化支持，在struts-config.xml文.........

▪项目的部分代码（手写智能提示，无刷新分页） <div class="content"> <div class="search"> <label class="search-label">搜索项目：</label> <img src=/blog_article/"@Url.Content("~/Content/Images/PMS_b.........

[1]Ext apiDoc 离线版制作

来源: 互联网发布时间: 2013-11-06

需要几个js包，并修改index.html就可以了。

1. 离线index.html

2. 在线index.html

需要的资源：Ext apidoc 离线.zip

作者：JustOneRoad 发表于2013-3-22 16:32:15 原文链接

阅读：39 评论：0 查看评论

[2]一口一口吃掉Struts（五）——测试Struts标签库

来源: 互联网发布时间: 2013-11-06

Struts标签库的使用和JSTL标签库使用方式类似。

认识可以了，建议熟练掌握JSTL标签库。struts标签库基本认识就可以了。

核心操作：

配置：
* 配置国际化支持，在struts-config.xml文件中加入如下配置：
<message-resources parameter="MessageResources" />
* 最好提供国际化资源文件（MessageResources.properties），将该文件放到src下

使用：
采用taglib引入
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

测试代码：

ACTION

package com.jialin;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class TestAction extends Action {

	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		//普通字符串
		request.setAttribute("hello", "helloworld");
		//html文本
		request.setAttribute("world", "<font color='red'>Hello World!</font>");
		//日期
		request.setAttribute("today", new Date());
		//数字
		request.setAttribute("number", 12345.1234);
		
		Group group = new Group();
		group.setName("师院");
		
		User user = new User();
		user.setUsername("张三");
		user.setAge(18);
		user.setGroup(group);
		//结构数据
		request.setAttribute("user", user);
		
		//空
		request.setAttribute("attr1", null);
		request.setAttribute("attr2", "");
		request.setAttribute("attr3", new ArrayList());
		
	
		//List
		List userList = new ArrayList();
		
		for (int i=0; i<10; i++) {
			User user1 = new User();
			user1.setUsername("张三_" + i);
			user1.setAge(18 + i);
			user1.setGroup(group);
			
			userList.add(user1);
		}
		
		request.setAttribute("userlist", userList);
		
		return mapping.findForward("showresult");
	}

}

User

package com.jialin;

public class User {

	private String username;
	
	private int age;
	
	private Group group;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public Group getGroup() {
		return group;
	}

	public void setGroup(Group group) {
		this.group = group;
	}
}

Group

package com.jialin;

public class Group {

	private String name;

	public String getName() {
		return name;
	}

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

JSP

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>     
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>      

    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<h1>测试beanwrite标签</h1>
	<li>普通字符串</li><br>
hello(标签):<bean:write name="hello"/>
<p></p>
	<li>html文本</li><br>
world(default):<bean:write name="world"/><br/>
world(filter true):<bean:write name="world" filter="true"/><br/>
world(filter false):<bean:write name="world" filter="false"/>
<p>
	<li>格式化日期</li><br>
	today(default):<bean:write name="today"/><br>
	today(format="yyyy-MM-dd HH:mm:ss"):<bean:write name="today" format="yyyy-MM-dd HH:mm:ss"/>
	<p>
	<li>格式化数字</li><br>
	n(default):<bean:write name="number"/><br>
	n(format="###,###.#####"):<bean:write name="number" format="###,###.#####"/><br>
	n(format="###,###.00000"):<bean:write name="number" format="###,###.00000#"/><br>
	<P>
	<li>结构</li><br>
	姓名：<input type="text" name="username" value="<bean:write name="user" property="username"/>"> <br>
	年龄：<input type="text" name="userage" value="<bean:write name="user" property="age"/>"> <br>
	所属组：<input type="text" name="usergroup" value="<bean:write name="user" property="group.name"/>"> <br>
	<h1>测试logic:empty,logic:notEmpty,logic:present,logic:notPresent</h1>
	<hr>
	<logic:empty name="attr1">
		atrr1为空<br>
	</logic:empty>
	<logic:notEmpty name="attr1">
		atrr1不为空<br>
	</logic:notEmpty>
	<logic:present name="attr1">
		atrr1存在<br>
	</logic:present>
	<logic:notPresent name="attr1">
		atrr1不存在<br>
	</logic:notPresent>
	<p>
	<logic:empty name="attr2">
		atrr2为空<br>
	</logic:empty>
	<logic:notEmpty name="attr2">
		atrr2不为空<br>
	</logic:notEmpty>
	<logic:present name="attr2">
		atrr2存在<br>
	</logic:present>
	<logic:notPresent name="attr2">
		atrr2不存在<br>
	</logic:notPresent>
	<p>
	<logic:empty name="attr3">
		atrr3为空<br>
	</logic:empty>
	<logic:notEmpty name="attr3">
		atrr3不为空<br>
	</logic:notEmpty>
	<logic:present name="attr3">
		atrr3存在<br>
	</logic:present>
	<logic:notPresent name="attr3">
		atrr3不存在<br>
	</logic:notPresent>
	<p>
	
	<h1>测试迭代标签</h1>
	<hr>
	<table border="1">
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>所属组</td>
		</tr>
		<logic:empty name="userlist">
			<tr>
				<td colspan="3">没有符合条件的数据</td>
			</tr>
		</logic:empty>
		<logic:notEmpty name="userlist">
			<logic:iterate id="user" name="userlist">
				<tr>
					<td>
						<bean:write name="user" property="username"/>
					</td>
					<td>
						<bean:write name="user" property="age"/>
					</td>
					<td>
						<bean:write name="user" property="group.name"/>
					</td>
				</tr>
			</logic:iterate>
		</logic:notEmpty>
	</table>
</body>
</html>

测试结果：

下篇继续……

作者：shan9liang 发表于2013-3-22 16:29:47 原文链接

阅读：30 评论：0 查看评论

[3]项目的部分代码（手写智能提示，无刷新分页）

来源: 互联网发布时间: 2013-11-06

<div class="content">
            <div class="search">
                <label class="search-label">搜索项目：</label>
                <img src=/blog_article/"@Url.Content("~/Content/Images/PMS_bb_search.png")" alt="search" id="seacherconfirm"/>
                <div id="autocompletefield">
                    <div class="searchers">
                        <input type="text" id="seachers" name="" tabindex="1" art="textbox" value="" emptytext="名称、拼音、编号、简称" maxlength="10" showmaxlength="true" />
                    </div>
                    <div id='autocomplete'>
                    </div>
                </div>
            </div>
            <div id="pagespace">
                <div id="pagenode">
                </div>
                <div id="pagerspace">
                    <div art="pager" id="pager" totalcount="0" template="textMode" pagesize=""
                        pageindex="" onpageindexchanged="pageIndexChanged">
                    </div>
                    <p id="pagemsg"></p>
                </div>
            </div>
        </div>

 // 开始进入，加载第一页的数据
        $(function () {
            var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
            var pageindex = 1;
            var pagesize = 3;
            var condition = null;
            var projectstatus = null;
            startpage(url, pageindex, pagesize, condition, projectstatus);
        });

        // 在建项按键计数2器
        var constructProjectCounter = 0;
        // 维保期按键计数器
        var maintainceProjectCounter = 0;
        // 在建项和维保期按钮之间的互斥信号量
        var semaphore = 0;
        // 信号量参数
        var statusprovider = null;

        // 初始化智能提示框的位置
        $("#autocomplete").css("left", $("#seachers").offset().left - 180);
        $("#autocomplete").css("top", $("#seachers").offset().top + 23);

        // 监听键盘抬起的事件
        $("#seachers").keyup(function () {
            var len = $(this).val().trim().length;//解决了中文输入法的问题！

            if (len >= 1) {
                var ul = "@this.Url.Action("AutoGet", "Project")";
                var msg = $("#seachers").val().trim();
                uploadautocompletedata(ul, msg);
            } else {
                $("#autocomplete").empty();
            }
        });

        // 失去焦点是清空
        $("#autocompletefield").mouseleave(function () {
            $("#autocomplete").empty();
        });

        // 搜索框获得焦点清空
        $("#seachers").focus(function () {
            $("#seachers").val("");
        });

        // 当页码开始改变的时候调用
        function pageIndexChanged() {
            var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
            var pageindex = $("#pager").pager("pageindex");
            var pagesize = $("#pager").pager("pagesize");

            var condition = $("#seachers").val().trim();
            var projectstatus = statusprovider;

            $("#pagenode").empty();
            startpage(url, pageindex, pagesize, condition, projectstatus);
        }

        // 加载智能提示消息
        function uploadautocompletedata(ul, msg) {
            $.getJSON(ul, { msg: msg }, function (data) {
                $("#autocomplete").empty();
                for (var i = 0; i < data.Total; i++) {
                    var itemsearch = data.Rows[i];
                    var createelement = $("<div >" +
                        "<p >" + itemsearch.ProjectName + "</p>" +
                        "<p ><span>项目简称：</span><span >" + itemsearch.ProjectShortName +
                        "</span><span>项目编号：</span><span >" + itemsearch.ProjectNumber + "</span></p>" +
                        "</div>");
                    $("#autocomplete").append(createelement);
                }
                $(".autoitem").click(function () {
                    $("#seachers").val($(this).find($(".fullname")).text().trim());

                    var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
                    var pageindex = 1;
                    var pagesize = 3;
                    var condition = $("#seachers").val().trim();
                    var projectstatus = statusprovider;

                    $("#pagenode").empty();
                    startpage(url, pageindex, pagesize, condition, projectstatus);
                    $("#autocomplete").empty();
                });
            });
        }

        // 查询在建期项目
        $("#ConstructProject").click(function () {
            constructProjectCounter++;
            $("#seachers").val("");

            var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
            var pageindex = 1;
            var pagesize = 3;

            var condition = null;
            var projectstatus;

            if (semaphore == 1) {
                $("#MaintainceProject").css({ "background-color": "#11AEE1" });
                $(".safeguard").css("color", "white");
                maintainceProjectCounter = 0;
            }

            if (constructProjectCounter % 2 != 0) {
                projectstatus = "在建项";
                $("#ConstructProject").css({ "background-color": "white" });
                $(".creating").css({ "color": "#11AEE1" });
                semaphore = 1;
                statusprovider = projectstatus;
            } else {
                projectstatus = null;
                $("#ConstructProject").css({ "background-color": "#11AEE1", "color": "white" });
                $(".creating").css({ "color": "white" });
                semaphore = 0;
                statusprovider = null;
            }

            $("#pagenode").empty();
            startpage(url, pageindex, pagesize, condition, projectstatus);

        });

        // 维保期项目
        $("#MaintainceProject").click(function () {
            // 计数器自加
            maintainceProjectCounter++;
            $("#seachers").val("");

            var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
            var pageindex = 1;
            var pagesize = 3;

            var condition = null;
            var projectstatus;

            if (semaphore == 1) {
                $("#ConstructProject").css({ "background-color": "#11AEE1" });
                $(".creating").css("color", "white");
                constructProjectCounter = 0;
            }

            if (maintainceProjectCounter % 2 != 0) {
                projectstatus = "维保期";
                $("#MaintainceProject").css({ "background-color": "white" });
                $(".safeguard").css("color", "#11AEE1");
                semaphore = 1;
                statusprovider = projectstatus;
            } else {
                projectstatus = null;
                $("#MaintainceProject").css({ "background-color": "#11AEE1" });
                $(".safeguard").css("color", "white");
                semaphore = 0;
                statusprovider = null;
            }

            $("#pagenode").empty();
            startpage(url, pageindex, pagesize, condition, projectstatus);
        });

        // 确认搜索
        $("#seacherconfirm").click(function () {
            var url = "@this.Url.Action("ProjectDisplayPagerData", "Manager")";
                var pageindex = 1;
                var pagesize = 3;
                var condition = $("#seachers").val().trim();
                var projectstatus = statusprovider;

                $("#pagenode").empty();
                startpage(url, pageindex, pagesize, condition, projectstatus);
            });

            // 获取后台分页数据，并动态创建元素，实现无刷新分页----> 不解释
            function startpage(url, pageindex, pagesize, condition, projectstatus) {
                $.getJSON(url, { pageindex: pageindex, pagesize: pagesize, condition: condition, projectstatus: projectstatus }, function (data) {
                    for (var i = 0; i < data.Rows.length; i++) {
                        var item = data.Rows[i];
                        var projectNumber