用.Net实现基于CSS的AJAX开发(2)
2008-05-01 04:35
501 查看
.Lpw171{display:none;} 好了,完成删除,,那么所有对应这个业务的删除都可以由命名为dgBigclassmanage的某一元素通过绑定delbtn样式来执行删
除(当然,这样不科学,不过是DEMO嘛,如果是实际你可以在QueryString里多传一个参数,在到AJAXDelRow派发后再用进行二次派发,然后以这个参数做标识就完美了)由于麻烦,,有兴趣的自己做吧。。呵呵。
这个样式只依赖TABLE元素,所以DATAGRID、DATALIST、自己做的TABLE,自定义控件只要最后生成TABLE元素的控件都可以用。
主要提供一个思想,跟代码制作的好坏无关。在.Net里轻量地使用样式绑定,在有AJAX应用的开发中效果很棒。你也可以自己去实现一个更优秀的轻量框架了。
增删改、上下移动记录样式绑定的JS:
/**//**
*WrittenbyWangzhongyuan
*
*这是一个样式驱动的功能按钮控制脚本,样式用法如下:
*
*修改按钮样式:editgtn应用样式后即可把目标元素变为修改按钮,目标行变为修改行并出现确定、取消按钮。
*删除按钮样式:delbtn应用样式后即可把目标元素变为删除按钮,点击删除则目标删除。
*上移下移按钮样式:updownbtn应用样式后即可把目标元素变为上移、下移元素,目标行变为可上移和下移。
*
*其他需要样式正在制作中........
**/
varcrudbtn=...{
that:false,
isOdd:false,
lastAssignedId:0,
addbtnid:0,
newRows:-1,
init:function()...{
//首先,查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
if(!document.getElementsByTagName)...{
return;
}
this.that=this;
this.run();
},
/**//**
*遍历document中的所有table,如果有样式crudtable,则应用此脚本
*
**/
run:function()...{
vartables=document.getElementsByTagName("table");
for(vari=0;i<tables.length;i++)...{
varthisTable=tables[i];
if(CSS.elementHasClass(thisTable,'crudtable'))...{
this.makecrudTable(thisTable);
}
}
},
/**//**
*构建控制按钮
**/
makecrudTable:function(table)...{
//首先,检测table是否有id,如果没有则创建
if(!table.id)...{
table.id='crudTable'+this.lastAssignedId++;
}
//遍历表格的数据行
varnewRows=newArray();
//遍历表格所有数据行
for(varj=0;j<table.tBodies[0].rows.length-1;j++)...{
//遍历数据行所有列
for(vark=0;k<table.tBodies[0].rows[j+1].cells.length;k++)...{
//判断是否存在删除样式,如果存在则把该单元个转化为删除按钮
if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'delbtn'))...{
table.tBodies[0].rows[j+1].cells[k].id='delbtn'+this.addbtnid++;
varlinkEl=createElement('a');
linkEl.href='#';
linkEl.onclick=this.delRow;
linkEl.setAttribute('columnId',k);
varinnerEls=table.tBodies[0].rows[j+1].cells[k].childNodes;
linkEl.innerText="删除";
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
}
//判断是否存在修改样式,如果存在则把该单元个转化为修改按钮
if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'editbtn'))...{
table.tBodies[0].rows[j+1].cells[k].id='delbtn'+this.addbtnid++;
varlinkEl=createElement('a');
linkEl.href='#';
linkEl.onclick=this.editRow;
linkEl.setAttribute('columnId',k);
varinnerEls=table.tBodies[0].rows[j+1].cells[k].childNodes;
linkEl.innerText="修改";
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
}
//判断是否存在上移、下移样式,如果存在则把该单元个转化为上移、下移按钮
if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'updownbtn'))...{
table.tBodies[0].rows[j+1].cells[k].id='updownbtn'+this.addbtnid++;
除(当然,这样不科学,不过是DEMO嘛,如果是实际你可以在QueryString里多传一个参数,在到AJAXDelRow派发后再用进行二次派发,然后以这个参数做标识就完美了)由于麻烦,,有兴趣的自己做吧。。呵呵。
这个样式只依赖TABLE元素,所以DATAGRID、DATALIST、自己做的TABLE,自定义控件只要最后生成TABLE元素的控件都可以用。
主要提供一个思想,跟代码制作的好坏无关。在.Net里轻量地使用样式绑定,在有AJAX应用的开发中效果很棒。你也可以自己去实现一个更优秀的轻量框架了。
增删改、上下移动记录样式绑定的JS:
/**//**
*WrittenbyWangzhongyuan
*
*这是一个样式驱动的功能按钮控制脚本,样式用法如下:
*
*修改按钮样式:editgtn应用样式后即可把目标元素变为修改按钮,目标行变为修改行并出现确定、取消按钮。
*删除按钮样式:delbtn应用样式后即可把目标元素变为删除按钮,点击删除则目标删除。
*上移下移按钮样式:updownbtn应用样式后即可把目标元素变为上移、下移元素,目标行变为可上移和下移。
*
*其他需要样式正在制作中........
**/
varcrudbtn=...{
that:false,
isOdd:false,
lastAssignedId:0,
addbtnid:0,
newRows:-1,
init:function()...{
//首先,查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
if(!document.getElementsByTagName)...{
return;
}
this.that=this;
this.run();
},
/**//**
*遍历document中的所有table,如果有样式crudtable,则应用此脚本
*
**/
run:function()...{
vartables=document.getElementsByTagName("table");
for(vari=0;i<tables.length;i++)...{
varthisTable=tables[i];
if(CSS.elementHasClass(thisTable,'crudtable'))...{
this.makecrudTable(thisTable);
}
}
},
/**//**
*构建控制按钮
**/
makecrudTable:function(table)...{
//首先,检测table是否有id,如果没有则创建
if(!table.id)...{
table.id='crudTable'+this.lastAssignedId++;
}
//遍历表格的数据行
varnewRows=newArray();
//遍历表格所有数据行
for(varj=0;j<table.tBodies[0].rows.length-1;j++)...{
//遍历数据行所有列
for(vark=0;k<table.tBodies[0].rows[j+1].cells.length;k++)...{
//判断是否存在删除样式,如果存在则把该单元个转化为删除按钮
if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'delbtn'))...{
table.tBodies[0].rows[j+1].cells[k].id='delbtn'+this.addbtnid++;
varlinkEl=createElement('a');
linkEl.href='#';
linkEl.onclick=this.delRow;
linkEl.setAttribute('columnId',k);
varinnerEls=table.tBodies[0].rows[j+1].cells[k].childNodes;
linkEl.innerText="删除";
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
}
//判断是否存在修改样式,如果存在则把该单元个转化为修改按钮
if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'editbtn'))...{
table.tBodies[0].rows[j+1].cells[k].id='delbtn'+this.addbtnid++;
varlinkEl=createElement('a');
linkEl.href='#';
linkEl.onclick=this.editRow;
linkEl.setAttribute('columnId',k);
varinnerEls=table.tBodies[0].rows[j+1].cells[k].childNodes;
linkEl.innerText="修改";
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
}
//判断是否存在上移、下移样式,如果存在则把该单元个转化为上移、下移按钮
if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'updownbtn'))...{
table.tBodies[0].rows[j+1].cells[k].id='updownbtn'+this.addbtnid++;
相关文章推荐
- 用.Net实现基于CSS的AJAX开发(3)
- 用.Net实现基于CSS的AJAX开发(1)
- 用.Net实现基于CSS的AJAX开发(5)
- 用.Net实现基于CSS的AJAX开发(6)
- 用.Net实现基于CSS的AJAX开发(4)
- 基于css样式绑定的样式驱动式AJAX程序开发(.net实现)
- DWCS6搭建jsp开发环境及使用ajax实现用户注册(基于文件)
- 用GWT实现基于Ajax的Web开发
- 基于DDD的.NET开发框架 - ABP缓存Caching实现
- .net知识系列之八:net中的ajax开发(javascript实现ajax,ajaxApro实现ajax,微软ajax库实现ajax)
- 一起谈.NET技术,使用WCF实现SOA面向服务编程——使用AJAX+WCF服务页面开发
- 基于.Net(C#开发)平台的三层框架架构软件的设计与实现
- 清新空气---我的.net(C#)生涯知识总结 跨CSS,JS,JAVA,AJAX,WPF,WCF,LINQ,ASP.NET,Winform,Sqlserver,Mysql,EF,OOP,开发工具等
- 基于DDD的.NET开发框架 - ABP仓储实现
- 使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
- DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
- 使用WC“.NET研究”F实现SOA面向服务编程——使用AJAX+WCF服务页面开发
- 基于.NET平台的应用程序开发中实现唯一应用程序运行实例
- 基于.NET平台的应用程序开发中实现唯一应用程序运行实例
- Ubuntu 14.04 Web 程序开发(4)基于JQuery+Ajax+Json+Servlet实现PUT GET