| 用.Net实现基于CSS的AJAX开发(5) |
|
来源：互联网 |
时间：2007-04-15 |
浏览：
相关评论 |
报告错误 |
发布文章
|
【字号：大 | 中 | 小】
【背景色 
 】
|
|
/**//**
* 下移按钮
**/
downRow : function(e) ...{
var that = crudbtn.that;
var linkEl = getEventTarget(e);
var td = linkEl.parentNode;
var tr = td.parentNode;
var thead = tr.parentNode;
var table = thead.parentNode;
var otr = tr;
if(tr.rowIndex == table.rows.length-1) ...{
alert("已经是最后一行了");
return false;
}
else ...{
table.moveRow(tr.rowIndex,tr.rowIndex 1);
this.isOdd = true;
var rows = table.tBodies[0].rows;
// 重新隔行换色
for (var i=1;i
if (!this.isOdd) ...{
css.addClassToElement(rows[i], 'odd');
} else ...{
css.removeClassFromElement(rows[i], 'odd');
}
this.isOdd = !this.isOdd;
}
}
// 实现AJAX调用处理下移
// 下移则把pars和pars2的值反过来,后台不变
var pars = "pars2=";
for(h=0;h
if(!css.elementHasClass(tr.cells[h],'editbtn')&&!css.elementHasClass(tr.cells[h],'delbtn')
&&!css.elementHasClass(tr.cells[h],'updownbtn')) ...{
var colid = tr.cells[h].getAttribute('columnId');
if(tr.cells[h].firstChild.value!=null) ...{
pars = h "^" tr.cells[h].firstChild.value "|";
}
else ...{
pars = h "^" tr.cells[h].innerText "|";
}
}
}
var pars2 = "&pars=";
var uprow = table.rows[tr.rowIndex-1];
for(y=0;y
if(!css.elementHasClass(uprow.cells[y],'editbtn')&&!css.elementHasClass(uprow.cells[y],'delbtn')
&&!css.elementHasClass(uprow.cells[y],'updownbtn')) ...{
var colid = uprow.cells[y].getAttribute('columnId');
if(uprow.cells[y].firstChild.value!=null) ...{
pars2 = y "^" uprow.cells[y].firstChild.value "|";
}
else ...{
pars2 = y "^" uprow.cells[y].innerText "|";
}
}
}
pars3 = "&command=MoveUpDown&callback=afterUpdate&table=" table.id;
new Ajax.Updater('result','Dispatcher.ajax?' pars pars2 pars3,...{evalScripts: true});
}
}
function crudbtnInit() ...{
crudbtn.init();
}
// 回调: 处理结束后的反映
afterUpdate = function(e) ...{
if(e == 'true') ...{
}
else if(e == 'false') ...{
alert("您的操作失败了,请重新尝试");
window.location.reload();
}
else if(e == 'repeated') ...{
alert("您写入了重复的信息！请重新输入");
window.location.reload();
}
}
addEvent(window, 'load', crudbtnInit);
后台处理同 AjaxDelRow.cs
排序样式绑定JS：
/**//*
* Written by Wangzhongyuan
* 通过绑定sort样式进行后台排序的代码
*/
var sorting = ...{
that: false,
isOdd: false,
sortColumnIndex : -1,
lastAssignedId : 0,
newRows: -1,
lastSortedTable: -1,
/**//**
* 初始化排序器
**/
init : function() ...{
// 首先, 查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
if (!document.getElementsByTagName) ...{
return;
}
this.that = this;
this.run();
},
/**//**
* 在文档中遍历所有table,如果table拥有sort样式,则启动排序功能
**/
run : function() ...{
var tables = document.getElementsByTagName("table");
for (var i=0; i < tables.length; i ) ...{
var thisTable = tables[i];
if (css.elementHasClass(thisTable, 'sort')) ...{
this.makeSortable(thisTable);
}
}
},
/**//**
* 启动给定表的排序功能
**/
makeSortable : function(table) ...{
// 首先,检测该table是否有ID.如果没有就分配一个给它
if (!table.id) ...{
table.id = 'sortableTable' this.lastAssignedId ;
}
// 判断有没有数据
if(table.rows.length<2)
return ;
// 把表格的第一行视为表头,然后下面要把它们变成可点击
var row = table.tBodies[0].rows[0];
/**//* 结合后台的hack: 主要用于解析初始化时的排序方向.
* 由于考虑到适应自定义数据绑定模板,故越过表头,使用第二行
*/
var row2 = table.tBodies[0].rows[1];
for (var i=0; i < row.cells.length; i ) ...{
// 建立一个链接,并使它拥有能控制排序的onClick事件
var linkEl = createElement('a');
linkEl.href = '#';
linkEl.onclick = this.headingClicked;
linkEl.setAttribute('columnId', i);
linkEl.title = '点击排序';
// 获取标题行的所有列,以便加入链接
var innerEls = row.cells[i].childNodes;
// 遍历标题行的所有列并加入链接
for (var j = 0; j < innerEls.length; j ) ...{
// 如果标题列样式为nosort则不排序
if(!css.elementHasClass(row.cells[i], 'nosort'))
linkEl.appendChild(innerEls[j]);
}
// 把新链接加到表格中
row.cells[i].appendChild(linkEl);
var spanEl = createElement('span');
css.addClassToElement(row.cells[i], 'tableSortArrow');
// 加两个空格
// spanEl.appendChild(document.createTextNode(' '));
row.cells[i].appendChild(spanEl);
// 为每一列判断从后台传过来的排序方向样式
if(css.elementHasClass(row2.cells[i], 'sortOrderASC')) ...{
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode(' ↑'));
spanEl.setAttribute('sortOrder', 'ASC');
}
else if(css.elementHasClass(row2.cells[i], 'sortOrderDESC'))
...{
spanEl.className = 'tableSortArrow';
spanEl.appendChild(document.createTextNode(' ↓'));
spanEl.setAttribute('sortOrder', 'DESC');
}
}
// 初始化隔行换色标志
this.isOdd = false;
var rows = table.tBodies[0].rows;
// 启动隔行换色
for (var i=0;i
this.doStripe(rows[i]);
}
},
|
|
 |
| |
|
|
|
|
收 藏
投 稿
繁 体
RSS 
欢迎在本站发布信息，在线投递稿件
我要投稿
打印本文
推荐本文
加入收藏
返回顶部
关闭窗口
