学习ajax+css 做的一个奇偶板块例子

本文链接：https://blog.csdn.net/ONLYONE_HTLIU/article/details/2203115

1，建立divblock.css

body {

text-align: left;

font-family: Arial, sans-serifarial, Verdana, Helvetica;

font-size: 12px;

line-height: 1.5em;

color: black;

}

div.leftcontent {

float: left;

width: 380px;

display: inline;

margin-top: 10px;

margin-bottom: 10px;

position: relative;

overflow: hidden;

border: 1px solid #a8bacd;

}

div.rightcontent {

float: right;

width: 380px;

display: inline;

margin-top: 10px;

margin-bottom: 10px;

position: relative;

overflow: hidden;

border: 1px solid #a8bacd;

}

h3 {

font-size: 1.2em;

line-height: 1.5em;

margin: 0 0 0.5em 0;

padding:0;

color: black;

}

h3 {

text-align: center;

font-size: 12px;

font-weight: normal;

background-image: url(/InfoIssue/page/jscripts/img/bg_box_title.png);

border-bottom: 1px solid #a8bacd;

padding: 2px 0;

}

a.more {

background-image: url(/InfoIssue/page/jscripts/img/icon_more.gif);

background-repeat: no-repeat;

width: 40px;

height: 10px;

text-decoration: none;

position: absolute;

bottom: 0px;

right: 4px;

line-height: 10px;

}

a.new {

width: 40px;

height: 20px;

text-decoration: none;

position: absolute;

bottom: 0px;

right:40px;

line-height: 20px;

color: red;

}

img {

margin-top: 5px;

margin-left: 80px;

margin-bottom: 5px;

position: relative;

}

span.date {

right: 10px;

position: absolute;

}

2，建立ext.js：可以下载/*
* Ext JS Library 2.0.2
* http://extjs.com/license
*/

3，建立页面：（因为用eos所以ajax部分用的是hiddensubmit）

< html >

< HEAD >

< LINK href ="/InfoIssue/page/jscripts/divblock.css" rel ="stylesheet" type ="text/css" >

< script language ="javascript" type ="text/javascript" src ="/InfoIssue/page/jscripts/ext.js" ></ script >

< script language ="javascript" type ="text/javascript" src ="/InfoIssue/page/jscripts/divblock.js" ></ script >

< SCRIPT language ="JavaScript" src ="/fbtools/page/hiddensubmit.js" type ="text/javascript" ></ SCRIPT >

< SCRIPT >

Ext.namespace("DIV");

var DIV = function() {

var tt = new Ext.Template(

'<div>',

'<div class="{0}"><h3>{1}</h3><a class="new" href="JavaScript:οnclick=send({2})">发布</a><a class="more" href="JavaScript:οnclick=IntoTheme({2})"></a><div id="Ext-{6}"><img src="/InfoIssue/page/img/ajax-loader.gif"/></div></div>',

'<div class="{3}"><h3>{4}</h3><a class="new" href="JavaScript:οnclick=send({5})">发布</a><a class="more" href="JavaScript:οnclick=IntoTheme({5})"></a><div id="Ext-{7}"><img src="/InfoIssue/page/img/ajax-loader.gif"/></div></div>',

'<div>'

);

var t = new Ext.Template(

'<div>',

'<div class="{0}"><h3>{1}</h3><a class="new" href="JavaScript:οnclick=send({2})">发布</a><a class="more" href="JavaScript:οnclick=IntoTheme({2})"></a><div id="Ext-{3}"><img src="/InfoIssue/page/img/ajax-loader.gif"/></div></div>',

'<div>'

);

var tpl = new Ext.XTemplate(

'<ol>',

'<tpl for="kids">',

'<li><a href="JavaScript:οnclick=IntoRebackTheme({sendtextId})">{sendtextName:this.blankFm}</a><span class="date">{sendtextCreatetime}</span></li>',

'</tpl>',

'</ol>'

);

tpl.blankFm = function(val){

return val;

};

var obj = null;

return {

init : function() {

tt.compile();

t.compile();

var obj = this.queryDivBlock(1);

this.commonTemplate(tt,t,obj);

allBlock : function() {

var obj = this.queryDivBlock(0);

this.commonTemplate(tt,t,obj);

queryDivBlock : function(isShow) {

var sub = new HiddenSubmit("InfoIssue.biz.bizGetDivBlockInfo");

if(isShow=="1"){

sub.add("BlockTd/isShow",isShow);

}

if(sub.submit())

{

return eval(sub.getProperty("str"));

}

queryListInfo : function(obj) {

for(var i=0; i<(obj.length); i++) {

var sub = new HiddenSubmit("InfoIssue.biz.bizGetListInfo");

sub.add("SendthemeTd/blockId/criteria/value",obj[i].blockId);

if(sub.submit())

{

var str = "({kids : "+sub.getProperty("str")+"})";

var data = eval(str);

tpl.overwrite("Ext-"+obj[i].blockId, data);

}

commonTemplate : function(tt,t,obj) {

Ext.get('Ext-block').update('');

var odd = (obj.length)%2;

var i=0

for(; i<(obj.length-odd); i=i+2) {

tt.append('Ext-block', ['leftcontent',obj[i].blockName,obj[i].blockId,'rightcontent',obj[i+1].blockName,obj[i+1].blockId,obj[i].blockId,obj[i+1].blockId]);

}

if(odd==1){

t.append('Ext-block',['leftcontent',obj[i].blockName,obj[i].blockId,obj[i].blockId]);

}

this.queryListInfo(obj);

rightPad : function (val, size, ch) {

var result = new String(val);

if(!ch) {

ch = " ";

}

while (result.length < size) {

result = result + ch;

}

return result.toString();

}

};

}();

Ext.onReady(function(){

DIV.init();

});

</ SCRIPT >

</ HEAD >

< BODY >

< div style ="text-align:right;" >< a href ="javascript:DIV.allBlock();" > 显示所有版块 </ a ></ div >

< div id ='Ext-block' ></ div >

< form method ="post" name ="listForm" target ="GeneralResult" >

< input type ="hidden" name ="flag" />

</ form >

</ BODY >

</ html >

< script >

function IntoTheme(id){

document.listForm.target="_self";

document.listForm.action ="InfoIssue.pr.prIntoThemeInit.do?BlockTd/blockId="+id;

document.listForm.submit();

}

function IntoRebackTheme(sendtextId){

document.listForm.target="_self";

document.listForm.action ="InfoIssue.pr.prIntoRebackThemeInit.do?SendthemeTd/sendtextId="+sendtextId;

document.listForm.submit();

}

function send(a){

document.listForm.target="_self";

document.listForm.action ="InfoIssue.pr.prIntoSendTheme.do?SendthemeTd/blockId="+a;

document.listForm.submit();

}

</ script >

4，InfoIssue.biz.bizGetDivBlockInfo 是取符合条件的list

构建代码：

package com.starit;

import java.text.MessageFormat;

import org.w3c.dom. * ;

import com.primeton.business.bncommon.bizlet.util.BNXmlUtil;

import com.primeton.tp.core.api.BizContext;

/**

* @author Administrator

* @version 1.0

* @date 2007-4-27

* @class_displayName Common

public class Common {

/**

* 转换的形式为[{......},{......},{......}.....]

* @param doc type: Document, DOM;

* @param param type: BizContext;

* @return: int ,运算逻辑返回值，如果失败返回0，成功返回1

* @throws Exception

* <p>

* ** bizlet 的显示名称 **

* @bizlet_displayName ConvertJson

* @bizlet_param passing="in" type="EOSEntityList" value="list" name="" desc=""

* @bizlet_param passing="in_out" type="field" value="str" name="" desc=""

public static int ConvertJson(Document doc, BizContext param)

throws Exception {

Node node = (Node) param.getParaObjectAt(0);

Node str = (Node) param.getParaObjectAt(1);

StringBuffer strBuffer = new StringBuffer("[");

NodeList entityNodeList = node.getChildNodes();

for(int i=0; i<entityNodeList.getLength();i++) {

Node entityNode = entityNodeList.item(i);

NodeList fieldNodeList = entityNode.getChildNodes();

strBuffer.append("{");

boolean flag_1 = true;

for(int j=0;j<fieldNodeList.getLength();j++) {

Node fieldNode = fieldNodeList.item(j);

if(!flag_1) {

strBuffer.append(", ");

} else {

flag_1 = false;

}

strBuffer.append(fieldNode.getNodeName()+" : ""+fieldNode.getFirstChild()+""");

}

strBuffer.append("}");

if(i!=(entityNodeList.getLength()-1))

{

strBuffer.append(", ");

}

strBuffer.append("]");

BNXmlUtil.setNodeValue(str, new String(strBuffer));

return 1;

}

/**

* 转换的形式为[{......},{......},{......}.....]

* @param doc type: Document, DOM;

* @param param type: BizContext;

* @return: int ,运算逻辑返回值，如果失败返回0，成功返回1

* @throws Exception

* <p>

* ** bizlet 的显示名称 **

* @bizlet_displayName ConvertJson

* @bizlet_param passing="in" type="EOSEntityList" value="list" name="" desc=""

* @bizlet_param passing="in_out" type="field" value="str" name="" desc=""

public static int ConvertSelectJson(Document doc, BizContext param)

throws Exception {

Node node = (Node) param.getParaObjectAt(0);

Node str = (Node) param.getParaObjectAt(1);

StringBuffer strBuffer = new StringBuffer("[");

NodeList entityNodeList = node.getChildNodes();

for(int i=0; i<entityNodeList.getLength();i++) {

Node entityNode = entityNodeList.item(i);

NodeList fieldNodeList = entityNode.getChildNodes();

strBuffer.append("{");

boolean flag_1 = true;

for(int j=0;j<fieldNodeList.getLength();j++) {

Node fieldNode = fieldNodeList.item(j);

if(!flag_1) {

strBuffer.append(", ");

} else {

flag_1 = false;

}

strBuffer.append("NAME : ""+fieldNode.getFirstChild()+""");

}

strBuffer.append("}");

if(i!=(entityNodeList.getLength()-1))

{

strBuffer.append(", ");

}

strBuffer.append("]");

BNXmlUtil.setNodeValue(str, new String(strBuffer));

return 1;

}

/**

* @param doc type: Document, DOM;

* @param param type: BizContext;

* @return: int ,运算逻辑返回值，如果失败返回0，成功返回1

* @throws Exception

* <p>

* ** bizlet 的显示名称 **

* @bizlet_displayName CreateSQL

* @bizlet_param passing="in_out" type="EOSEntity" value="Hidden" name="" desc=""

* @bizlet_param passing="in_out" type="EOSEntity" value="Entity" name="" desc=""

* @bizlet_param passing="in_out" type="constant" value="flag" name="" desc="表示是生成更新语句还是插入语句"

* @bizlet_param passing="in_out" type="constant" value="form_rec_id" name="" desc=""

* @bizlet_param passing="in_out" type="constant" value="field_rec_id" name="" desc=""

* @bizlet_param passing="in_out" type="EOSEntityList" value="list" name="" desc=""

public static int CreateSQL(Document doc, BizContext param) throws Exception{

Node hidden = (Node)param.getParaObjectAt(0);

Node entity = (Node)param.getParaObjectAt(1);

String flag = (String)param.getParaObjectAt(2);

String formRecID = (String)param.getParaObjectAt(3);

Node nodeList = (Node)param.getParaObjectAt(4);

//保证hidden 和 entity子节点的个数相同，获取任意一个的长度，来遍历

NodeList hiddenList = hidden.getChildNodes();

NodeList entityList = entity.getChildNodes();

Element tempNode;

Element tempNodeC = null;

Text tempNodeT;

String insertSql = "insert into ioms_common_field_rec (FIELD_VALUE,FIELD_ID,FORM_REC_ID,FIELD_REC_ID) VALUES (''{0}'',''{1}'',''{2}'',''";

String updateSql = "update ioms_common_field_rec set FIELD_VALUE=''{0}'' where FIELD_ID=''{1}'' and FORM_REC_ID=''{2}''" ;

int length = hidden.getChildNodes().getLength();

for(int i=0; i<length;i++)

{

String temp = "";

String fieldStr = hiddenList.item(i).getFirstChild().toString();

String valueStr = "";

for(int j=0; j<length;j++)

{

//System.out.println(hiddenList.item(i).getNodeName());

//System.out.println(entityList.item(j).getNodeName());

if(hiddenList.item(i).getNodeName()==entityList.item(j).getNodeName())

{

if(entityList.item(j).getFirstChild()!=null)

valueStr = entityList.item(j).getFirstChild().toString();

break;

}

String []arr = fieldStr.split("/");

if(flag.equals("0") || flag=="0")

{

arr[0] = valueStr;

arr[2] = formRecID;

temp = MessageFormat.format(insertSql,arr);

}

else

{

arr[0] = valueStr;

arr[2] = formRecID;

temp = MessageFormat.format(updateSql,arr).toString();

}

tempNodeC=doc.createElement("SQL");

tempNode = doc.createElement("entity");

tempNodeT = doc.createTextNode(temp);

tempNodeC.appendChild(tempNodeT);

tempNode.appendChild(tempNodeC);

nodeList.appendChild(tempNode);

}

return 1;

}

5，显示效果：