快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

新葡的京集团350vip_博格自动化网进入



Display是很着名的体现层标签,方便快捷,效率不错,信托很多人都用过。近来拿来正式钻研了一下,发明新葡的京集团350vip它缺少一个今朝很盛行的特征:表格列宽可调剂。扩充这个功能对照轻易想到的法子是,改动标签的源码,增添响应的节制代码。这样做有个不好的地方,便是,当标签进级的时刻有些不轻易处置惩罚。

另一种要领,便是应用javascript结果DOM节制技巧,在页面上直接添加响应的代码。

代码对照简单,还简单加了几句注释,不进行过多解说了。必要阐明的是,只写了几句简单的代码,没有斟酌多浏览器支持支持的问题;当表头有排序链接的时刻,会把表头撑成两行,这是因为display.css文件中,对付sortable类的定义为宽度100%的block模式,可将宽度改动成99%来办理(办理得不是很优雅)。

将代码存成jsp文件,放到display例子高低文中就可以了。

代码如下:

%@ page language="java" pageEncoding="GB18030"

import="java.util.*,org.displaytag.sample.*"%>

%@ taglib uri="http://displaytag.sf.net/el" prefix="display"%>

html xmlns="http://www.w3.org/1999/xhtml">

head>

title>表格标签测试样例(作者:wallimn,电邮:wallimn@sohu.com)title>

style type="text/css" media="all">

@import url("css/maven-base.css");

@import url("css/maven-theme.css");

@import url("css/site.css");

@import url("css/screen.css");

style>

style t新葡的京集团350vipype="text/css">

.ghr {

display: block;

cursor: col-resize;

width: 2px;

padding: 0px;

margin: 2px 0px 0px 0px;

height: 10px;

font-size: 1px;

float: right;

position: relative;

right: 0px;

z-index: 2;

}

.debug {

border: 1px solid red;

}

style>

head>

body>

%

request.setAttribute("test", new ReportList(20));

%>

h2>以外挂JS代码的要领,实现Display标签形成的表格列宽可控h2>

display:table name="test" class="Mars" style="width:600" id="mytab">

display:column property="amount" title="账号" style="width:200" />

display:column property="project"/>

display:column property="task" />

display:column property="count" />

display:column property="city" title="城市" />

display:table>

script type="text/javascript">

//这个函数没有应用,开始测试时应用的。

function OldMethod(){

var tables = document.getElementsByTagName("table");

var ctrlObj;

if (tables) {

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

if (tables[i].className) {

var ths = tables[i].getElementsByTagName("th");

for ( var j = 0; jths.length; j++) {

ths[j].insertBefore(CreateHeadCtrl(),ths[j].firstChild);

}

}

}

}

}

//创建用于拖动节制的元素

function CreateHeadCtrl() {

var f = document.createElement("font");

//f.className = "ghr debug";

f.className = "ghr";

f.onmousedown = MouseDownToResize;

f.onmouseup = MouseUpToResize;

f.onmousemove = MouseMoveToResize;

return f;新葡的京集团350vip

}

//添加节制元素的代码

function applyCtrl(tableId){

var table = document.getElementById(tableId);

if (table) {

var ths = table.getElementsByTagName("th");

for ( var j = 0; jths.length; j++) {

ths[j].insertBefore(CreateHeadCtrl(),ths[j].firstChild);

}

}

}

//新葡的京集团350vip此处为表格添加节制元素。

applyCtrl("mytab");

function Mo新葡的京集团350vipuseDownToResize() {

//alert(obj.outerHTML);

obj = this;

obj.mouseDownX = event.clientX;//鼠标点击的坐标

obj.pareneTdW = (obj.parentElement.offsetWidth) ? obj.parentElement.offsetWidth : 100;//原TD的宽

obj.setCapture();

return false;

}

function MouseMoveToResize() {

obj = this;

if (!obj.mouseDownX)

return false;

var newWidth = obj.pareneTdW * 1 + event.clientX * 1 - obj.mouseDownX;

if (newWidth > 0) {

obj.parentElement.style.width = newWidth;

}

}

function MouseUpToResize() {

obj = this;

obj.releaseCapture();

obj.mouseDownX = 0;

}

script>

您可能还会对下面的文章感兴趣: