原先只有: 它只是一截, 具体接收数据等交给dwz框架的底层实现了. 现在添加一段 js和css即可实现滑动.
<div id="listContainer">
<table class="linetable" id="treeMenu" width="100%"></table>
</div>它的整页代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/bluemobi-tag.tld" prefix="bmtag"%>
<%@ page language="java" import="java.util.Map" %>
<%@ page language="java" import="com.kid.model.Comment" %>
<%@ page language="java" import="java.util.List" %>
<script type="text/javascript">
var webroot = "${webroot}";
function ajaxDoneCallback(json){
}
navTab._closeOtherTab();
</script>
<link rel="stylesheet" href="${webroot}/treetable/jquery.treetable.css" />
<script src="${webroot }/res/dwz/jquery-1.7.2.js" type="text/javascript"></script>
<script src="${webroot}/treetable/jquery-ui.js"></script>
<script src="${webroot}/treetable/jquery.treetable.js"></script>
<script type="text/javascript">
var id="";
$(document).ready(function(){
var heads = ["","评论内容","评论数","点赞数","hidden:"];
var article = ${tNodes};
$.TreeTable("treeMenu", heads, article);
$("table tr").click(function() {//为表格的行添加点击事件
var tr = $(this);//找到tr原色
var td = tr.find("td");//找到td元素
id = td[4].innerHTML;//获取隐藏的第四个列表内容：id
var array = id.split(":");
if( array[0] != "article" && array[1]){
document.getElementById("viewId").href='comment/view.do?id='+array[1];
}else{
document.getElementById("viewId").href='comment/view.do?id=';
}
})
});
function deleteItem(){
if(id){
var array = id.split(":");
if(array[0] == "article"){
if (confirm("确定删除该篇文章所有评论？")) {
$.ajax({
type : "POST",
url : "comment/delete.do",
data : {id : array[1],type:"article"},
success : function(data) {
}
});
}
}else if(array[0] == "parent"){
if (confirm("确定删除此条评论及其下的回复内容？")) {
$.ajax({
type : "POST",
url : "comment/delete.do",
data : {id : array[1],type:"parent"},
success : function(data) {
}
});
}
}else{
if (confirm("确定删除此条评论？")) {
$.ajax({
type : "POST",
url : "comment/delete.do",
data : {id : array[1],type:"child"},
success : function(data) {
}
});
}
}
}else
alert("请选择一条评论信息!");
}
function getTitleList(){
}
function viewItem()
{
if(id){
var array = id.split(":");
if(array[0] == "parent"){
$.ajax({
type : "POST",
url : "comment/view.do",
data : {id : array[2]},
success : function(data) {
}
});
}else{
$.ajax({
type : "POST",
url : "comment/view.do",
data : {id : array[1]},
success : function(data) {
}
});
}
}else
alert("请选择一条评论信息!");
}
function titleChange()
{
//获得input输入框的内容
var title = document.getElementById('title').value;
var obj = document.getElementById('titleSelect');
//如果输入的内容为空，所有的选项都匹配
if(title!= '' && title.length>=2) {
//获得option中的所有内容
var allText = getSelectText();
// 每个option的内容分割开来
var eachOptin = new Array();
eachOptin=allText.split(","); //字符分割
obj.options.length=0;
for (i=0;i<eachOptin.length-1 ;i=i*2 )
{
//如果option内容中有输入的内容就返回第一次匹配的位置（大于等于0），如果没有匹配的就返回-1
var flag = eachOptin[i+1].indexOf(title) ;
if(flag >=0) {
obj.options.add(new Option(eachOptin[i+1],eachOptin[i]));
}
i++;
}
$("#titleSelect").click();
}
}
function getSelectText()
{
//获得所有select标签
var obj = document.getElementById('titleSelect').options;
var length = document.getElementById('titleSelect').options.length;
//因为该html中只有一个select标签，所以就是name = "titleSelect"代表的标签
//alert(obj.length);
//alert(obj[0]);
//保存所有option 的值
var allText;
for(i=0;i<length;i++) {
allText+= obj[i].value+','+obj[i].text+','; //关键是通过option对象的innerText属性获取到选项文本
}
allText = allText.substr(0,allText.length-1);
return allText;
}
function getSelectTextChange()
{
var text = document.getElementById('titleSelect').options[document.getElementById('titleSelect').selectedIndex].text;
document.getElementById('title').value=text;
}
</script>
<div class="pageHeader">
<form id="pagerForm" method="post" action="comment/commentList.do"
οnsubmit="return navTabSearch(this);">
<div class="searchBar">
<table class="searchContent">
<tbody>
<tr>
<td><label><bmtag:message messageKey="评论板块" /></label></td>
<td>
<select id="fileType" name="fileType" class="combox" >
<option value="" ${comment.fileType==''?'selected="selected"':""}>--请选择--</option>
<option value="1" ${comment.fileType=='1'?'selected="selected"':""}>柿子树推荐</option>
<option value="2" ${comment.fileType=='2'?'selected="selected"':""}>柿子TV</option>
<option value="3" ${comment.fileType=='3'?'selected="selected"':""}>早期教育</option>
<option value="4" ${comment.fileType=='4'?'selected="selected"':""}>儿歌故事</option>
<option value="5" ${comment.fileType=='5'?'selected="selected"':""}>宝贝厨房增</option>
</select>
</td>
<td><label><bmtag:message messageKey="标题" /></label></td>
<td>
<span style="position: absolute; border: 1pt solid #c1c1c1; overflow: hidden; width: 188px; clip: rect(-1px, 190px, 190px, 170px);">
<select name="titleSelect" id="titleSelect"
style="width: 190px; height: 20px; margin: 0px;"
onChange="getSelectTextChange();">
<option value="" style="color: #c2c2c2;">--请选择--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="s123">上123</option>
<option value="sz">苏州</option>
</select>
</span>
<span style="border: 1pt solid #c1c1c1; border-left: 1pt solid #c1c1c1; border-bottom: 1pt solid #c1c1c1; width: 170px;">
<input type="text" autocomplete="off" name="title" id="title"
value="" style="width: 170px; height: 15px; border: 0pt;"
onChange="titleChange();">
</span>
</td>
<td align="center">
<bmtag:button messageKey="common.button.search" type="submit" id="formSubmitter" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<div class="pageContent">
<div class="panelBar">
<ul class="toolBar">
<li><bmtag:link href="#" messageKey="展开"
οnclick="jQuery('#treeMenu').treetable('expandAll'); return false;"
dwzClass="delete" /></li>
<li><bmtag:link href="#" messageKey="收缩"
οnclick="jQuery('#treeMenu').treetable('collapseAll'); return false;"
dwzClass="delete" /></li>
<li><bmtag:link href="/kid/admin/comment/commentList.do" id="viewId" isAuth="false" actionId="ACT-013-003" target="navTab"
messageKey="common.icon.view" dwzClass="edit" />
</li>
<li><bmtag:link οnclick="deleteItem();"
messageKey="common.icon.delete" dwzClass="delete" />
</li>
</ul>
</div>
<div id="listContainer">
<table class="linetable" id="treeMenu" width="100%"></table>
</div>
</div>
<!-- 获取 id="listContainer"表头内容, 并加入到创建的新的table里面去, 将新创建的table添加到class="pageContent"的div中去.-->
<script type="text/javascript">
$(document).ready(function(){
var listHead = $("#treeMenu").find("thead").html(); //获取现有表格的头部代码
var newHead = "<div class='newHeadContainer'><table style='width:100%;'><thead>"+listHead+"</thead></table></div>";
$(".pageContent").append($(newHead));
});
</script>
<!-- 通过div的class, 获取它下面的 table thead tr td:nth-child(第几列)-->
<style type="text/css">
#listContainer{
position: relative;
height: 500px;
overflow-y: auto;
}
.newHeadContainer{
width: 100%;
position: absolute;
left:0px;
top:25px;
z-index: 99;
height: 19px;
}
.newHeadContainer table{
width:100%;
height:100px;
vertical-center:middle;
}
.newHeadContainer table td{
border: 1px solid #888;
font-weight: normal;
padding: 5px 15px 1px 15px;
height: 15px;
text-align: left;
background: #EBEBEB url(images/bg-table-thead.png) repeat-x top left;
}
.newTHead{
width: 100%;
height: 100%;
}
.td_left{
width: 406px;
}
.newHeadContainer table thead tr td:nth-child(1){
width: 405px;
}
.newHeadContainer table thead tr td:nth-child(2){
width: 226px;
}
.newHeadContainer table thead tr td:nth-child(3){
width: 186px;
}
#listContainer table tbody tr td:nth-child(2){
width: 227px;
}
#listContainer table tbody tr td:nth-child(3){
width: 187px;
}
</style>
注意: div的id 以及 table中的class名称, 和它里面的id 在下方复制时候注意修改.
<script type="text/javascript">
$(document).ready(function(){
var listHead = $("#treeMenu").find("thead").html(); //获取现有表格的头部代码
var newHead = "<div class='newHeadContainer'><table style='width:100%;'><thead>"+listHead+"</thead></table></div>";
$(".pageContent").append($(newHead));
});
</script>
<style type="text/css">
#listContainer{
position: relative;
height: 500px;
overflow-y: auto;
}
.newHeadContainer{
width: 100%;
position: absolute;
left:0px;
top:25px;
z-index: 99;
height: 19px;
}
.newHeadContainer table{
width:100%;
height:100px;
vertical-center:middle;
}
.newHeadContainer table td{
border: 1px solid #888;
font-weight: normal;
padding: 5px 15px 1px 15px;
height: 15px;
text-align: left;
background: #EBEBEB url(images/bg-table-thead.png) repeat-x top left;
}
.newTHead{
width: 100%;
height: 100%;
}
.td_left{
width: 406px;
}.newHeadContainer table thead tr td:nth-child(1){ width: 405px;}.newHeadContainer table thead tr td:nth-child(2){ width: 226px;}.newHeadContainer table thead tr td:nth-child(3){ width: 186px;}#listContainer table tbody tr td:nth-child(2){width: 227px;}#listContainer table tbody tr td:nth-child(3){width: 187px;}</style><!-- 通过div的class, 获取它下面的 table thead tr td:nth-child(第几列) 可以对一个表格的一行中的各列设置css样式-->
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
