|
 |
栏目导栏 |
|
| |
|
|
|
|
|
资料搜索 |
|
| |
|
|
|
|
|
热门文章 |
|
| |
|
|
|
|
|
最新文章 |
|
| |
|
|
|
| |
| |
|
|
|
| |
| 基于css样式绑定的样式驱动式AJAX程序开发（.net实现） |
|
序言： i3RLinux联盟
前面我介绍了我做的.net版的Ajax库（.NET下的简单AJAX处理库 ），现在要介绍的是一种开发模式：样式绑定式驱动开发。 i3RLinux联盟
样式驱动是我自己命名的，（我也不知道它叫什么，嘿嘿）以便区别目前的请求驱动式开发（如struts、webwork等）和事件驱动式开发（如asp.net、JSF等）。 i3RLinux联盟
正文： i3RLinux联盟
1 简介 i3RLinux联盟
首先，让我们来看看传统的WEB开发流程： i3RLinux联盟
·请求驱动： 最常见的一类WEB框架实现了以请求驱动的流程。一个HTTP请求近来，被一个通用的分发器Servlet i3RLinux联盟
（Dispather Servlet）分析，再被分发到一个对应的应用处理器。处理器依次处理UI特有的控制逻辑，调用业务对象和处理会 i3RLinux联盟
话状态，准备一个模型，再转发到视图。 i3RLinux联盟
·事件驱动： 事件驱动框架的设计目标是将桌面UI编程中著名的事件驱动模式搬到WEB环境中来。其特征是；对于如何将 i3RLinux联盟
表单提交到URL、如何将URL映射到控制器这些问题它们不关心；在事件驱动的框架中，表单组件和监听器联系在一起，监听器 i3RLinux联盟
通过事件开调用。而且，这类框架通常不打算实现可插拔的试图技术来呈现给特定的模型对象，而是把WEB页看作一写列界面组 i3RLinux联盟
件的组合物，每个组件可以保持自己的状态，并且知道如何呈现自己，甚至可能使用不同界面皮肤。 i3RLinux联盟
从上面可以看到一个是传统的MVC架构是开发，一个是以页面为中心的快速应用开发（RAD）两者各有各的好处。 i3RLinux联盟
i3RLinux联盟
样式驱动式开发在请求驱动开发或事件驱动开发的基础上进行简单的封装，在界面层融合了以上两者概念优势，它以最前台 i3RLinux联盟
的界面层为基础，通过CSS样式或HTC事件绑定界面元素来执行相应后台业务，从而达到执行相应请求，处理相应的事件的目的 i3RLinux联盟
。 i3RLinux联盟
样式驱动的优势在于只需把前台元素赋予特定的样式，即可实现特殊的动能以及特定的业务处理，从而减少编码量和编译的 i3RLinux联盟
次数，具有“一次编写，到处绑定”的特点。比传统开发复用性更强。尤其是在AJAX大行其道的今天，在请求驱动框架或事件 i3RLinux联盟
驱动现有框架的基础上利用样式绑定式开发基于AJAX的应用，你会发现你的AJAX程序的开发效率会提高很多，尤其是当反复应 i3RLinux联盟
用同一（或相似）后台逻辑的情况会更明显，同样，样式绑定式开发对于面向服务式开发也具有很大的优势。 i3RLinux联盟
i3RLinux联盟
2 基于ASP.NET的样式驱动开发 i3RLinux联盟
i3RLinux联盟
样式驱动的操作不依赖与后台实现，asp.net的runat=server可以魔法搬地将前台元素转化为后台的元素，不过这样的转化 i3RLinux联盟
依赖于特定的元素和后台，比如<input type=text runat=server> 这样确实是将input元素扩展成后台可以使用的服务器元素 i3RLinux联盟
了，但是对于后台来讲他要在页面对应的里进行特定的处理，而且input type=text只能是input type=text也不可能扩展自己 i3RLinux联盟
的功能。样式驱动则可以把一切元素、控件或控件中的元素利用JS的强大功能在前台转换为你想要的功能和效果，然后再送入 i3RLinux联盟
原请求或自定义请求，从而弥补asp.net的一些不足，“一次编写，到处绑定”的特点也为我们省去了多个页面类写重复代码的 i3RLinux联盟
诸多困扰。 i3RLinux联盟
i3RLinux联盟
也许你会说不是有用户控件吗，很抱歉，用户控件跟前台严重耦合，你将它拿到一个项目中也许派不上一点用场。 i3RLinux联盟
i3RLinux联盟
那WEB控件库呢？虽然能重用，跟用户控件比不耦合了，但是局限性太强，复杂度高，我觉得叫一个普通程序员写一个带模 i3RLinux联盟
板项的DataGird能排序的，可以删除、修改、上移下移]可以查看详细信息的控件出来是一件很费事的事。 i3RLinux联盟
i3RLinux联盟
又有人说了，真笨，我直接拖一个DATAGRID然后再这个基础上加按纽，模板列，排序，详细连接好不好啊，还用特意做个 i3RLinux联盟
控件吗？有很抱歉的告诉你，如果是1000个DATAGIRD，每一个都有这些功能的一种或几种，那么你后台够写的了，即使你抽象 i3RLinux联盟
出一层、封装出一个专门的DataGirdBuilder类，也够复杂的，各种重载方法，晕。 i3RLinux联盟
i3RLinux联盟
那么使用样式绑定式的开发就简单了，给DataGird个排序的样式（比如CssClass=sort），后台几句代码，或者干脆不写（ i3RLinux联盟
你的准备比较充足），就可以了，再加个列变为删除按钮（比如其中的一个列里ItemStyle CssClass="delbtn"）,就可以了， i3RLinux联盟
别的DataGrid不需要排序，那么样式去掉。而后页面类里干干静静。样式绑定后变化的元素传值到统一的业务对象进行处理， i3RLinux联盟
一切都很规矩。 i3RLinux联盟
i3RLinux联盟
3 实现 i3RLinux联盟
利用我之前做过的AJAX库，再结合javascript脚本构建一个这样的库不成问题。自然，跟做烧饭做菜一样，这里选料非常的 i3RLinux联盟
重要，这里我要选用来自Dean Edwards和Tino Zijdel的事件操作脚本库（common.js）和Neil Cro~~~~y制作的样式基本操作库（ i3RLinux联盟
css.js）来做好我们这道美味，噢，当然，还有大名鼎鼎的prototype.js库. i3RLinux联盟
i3RLinux联盟
i3RLinux联盟
好了，，前台的制作工序基本完成。 i3RLinux联盟
然后就是利用我前一阵子做的AJAX库了。 i3RLinux联盟
假设是删除，QueryString: command=delrow&JS生成的参数…… i3RLinux联盟
则后台调用AjaxDelRow.cs i3RLinux联盟
i3RLinux联盟
protected override void DoAjax() i3RLinux联盟
...{ i3RLinux联盟
// 搜集参数 i3RLinux联盟
string parlist = request.Params["pars"]; i3RLinux联盟
string[] paritem = parlist.Split('|'); i3RLinux联盟
Hashtable hash = new Hashtable(paritem.Length); i3RLinux联盟
for(int i=0;i<paritem.Length-1;i++) i3RLinux联盟
...{ i3RLinux联盟
string[] paritempart = paritem[i].Split('^'); i3RLinux联盟
hash.Add(paritempart[0],paritempart[1]); i3RLinux联盟
} i3RLinux联盟
i3RLinux联盟
bool isDeled = false; i3RLinux联盟
string table = request.Params["table"]; i3RLinux联盟
// 判断来源 i3RLinux联盟
if(table!=null) i3RLinux联盟
...{ i3RLinux联盟
if(table.Equals("dgBigclassmanage")) //DATAGRID的ID号 i3RLinux联盟
...{ i3RLinux联盟
// 调用对应业务外观的DAO来删除 i3RLinux联盟
// hash["0"]为datagrid的第0列,假设第0列传过来是ID值 i3RLinux联盟
isDeled = (new BusinessFacade()).DeleteById(hash["0"].ToString()); i3RLinux联盟
} i3RLinux联盟
if(isDeled) i3RLinux联盟
...{ i3RLinux联盟
Output("true"); i3RLinux联盟
} i3RLinux联盟
else i3RLinux联盟
...{ i3RLinux联盟
Output("false"); i3RLinux联盟
} i3RLinux联盟
} i3RLinux联盟
AjaxDelRow制作流程请参考.NET下的简单AJAX处理库 i3RLinux联盟
好了，完成删除，，那么所有对应这个业务的删除都可以由命名为dgBigclassmanage的某一元素通过绑定delbtn样式来执行删 i3RLinux联盟
除（当然，这样不科学，不过是DEMO嘛，如果是实际你可以在QueryString里多传一个参数，在到AjaxDelRow派发后再用进行二 i3RLinux联盟
次派发,然后以这个参数做标识就完美了）由于麻烦，，有兴趣的自己做吧。。 呵呵。 i3RLinux联盟
i3RLinux联盟
这个样式只依赖TABLE元素，所以DATAGRID、DATALIST、自己做的TABLE，自定义控件只要最后生成TABLE元素的控件都可以用。 i3RLinux联盟
主要提供一个思想，跟代码制作的好坏无关。在.NET里轻量地使用样式绑定,在有AJAX应用的开发中效果很棒。你也可以自己去实现一个更优秀的轻量框架了。 i3RLinux联盟
i3RLinux联盟
增删改、上下移动记录样式绑定的JS： i3RLinux联盟
i3RLinux联盟
/**//** i3RLinux联盟
* Written by Wangzhongyuan i3RLinux联盟
* i3RLinux联盟
* 这是一个样式驱动的功能按钮控制脚本，样式用法如下： i3RLinux联盟
* i3RLinux联盟
* 修改按钮样式： editgtn 应用样式后即可把目标元素变为修改按钮，目标行变为修改行并出现确定、取消按钮。 i3RLinux联盟
* 删除按钮样式： delbtn 应用样式后即可把目标元素变为删除按钮，点击删除则目标删除。 i3RLinux联盟
* 上移下移按钮样式： updownbtn 应用样式后即可把目标元素变为上移、下移元素，目标行变为可上移和下移。 i3RLinux联盟
* i3RLinux联盟
* 其他需要样式正在制作中........ i3RLinux联盟
**/ i3RLinux联盟
var crudbtn = ...{ i3RLinux联盟
that: false, i3RLinux联盟
isOdd: false, i3RLinux联盟
lastAssignedId : 0, i3RLinux联盟
addbtnid : 0, i3RLinux联盟
newRows: -1, i3RLinux联盟
init : function() ...{ i3RLinux联盟
// 首先, 查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName) i3RLinux联盟
if (!document.getElementsByTagName) ...{ i3RLinux联盟
return; i3RLinux联盟
} i3RLinux联盟
i3RLinux联盟
this.that = this; i3RLinux联盟
i3RLinux联盟
this.run(); i3RLinux联盟
i3RLinux联盟
}, i3RLinux联盟
/**//** i3RLinux联盟
* 遍历document中的所有table,如果有样式crudtable,则应用此脚本 i3RLinux联盟
* i3RLinux联盟
**/ i3RLinux联盟
run : function() ...{ i3RLinux联盟
var tables = document.getElementsByTagName("table"); i3RLinux联盟
i3RLinux联盟
for (var i=0; i < tables.length; i++) ...{ i3RLinux联盟
var thisTable = tables[i]; i3RLinux联盟
i3RLinux联盟
if (css.elementHasClass(thisTable, 'crudtable')) ...{ i3RLinux联盟
this.makecrudTable(thisTable); i3RLinux联盟
} i3RLinux联盟
} i3RLinux联盟
}, i3RLinux联盟
/**//** i3RLinux联盟
* 构建控制按钮 i3RLinux联盟
**/ i3RLinux联盟
makecrudTable : function(table) ...{ i3RLinux联盟
i3RLinux联盟
// 首先, 检测table是否有id,如果没有则创建 i3RLinux联盟
if (!table.id) ...{ i3RLinux联盟
table.id = 'crudTable'+this.lastAssignedId++; i3RLinux联盟
} i3RLinux联盟
// 遍历表格的数据行 i3RLinux联盟
var newRows = new Array(); i3RLinux联盟
// 遍历表格所有数据行 i3RLinux联盟
for (var j = 0; j < table.tBodies[0].rows.length-1; j++) ...{ i3RLinux联盟
// 遍历数据行所有列 i3RLinux联盟
for(var k = 0;k < table.tBodies[0].rows[j+1].cells.length;k++) ...{ i3RLinux联盟
// 判断是否存在删除样式，如果存在则把该单元个转化为删除按钮 i3RLinux联盟
if(css.elementHasClass(table.tBodies[0].rows[j+1].cells[k], 'delbtn')) ...{ i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].id = 'delbtn'+this.addbtnid ++; i3RLinux联盟
var linkEl = createElement('a'); i3RLinux联盟
linkEl.href = '#'; i3RLinux联盟
linkEl.onclick = this.delRow; i3RLinux联盟
linkEl.setAttribute('columnId', k); i3RLinux联盟
i3RLinux联盟
var innerEls = table.tBodies[0].rows[j+1].cells[k].childNodes; i3RLinux联盟
i3RLinux联盟
linkEl.innerText = "删除"; i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl); i3RLinux联盟
} i3RLinux联盟
// 判断是否存在修改样式，如果存在则把该单元个转化为修改按钮 i3RLinux联盟
if(css.elementHasClass(table.tBodies[0].rows[j+1].cells[k], 'editbtn')) ...{ i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].id = 'delbtn'+this.addbtnid ++; i3RLinux联盟
var linkEl = createElement('a'); i3RLinux联盟
linkEl.href = '#'; i3RLinux联盟
linkEl.onclick = this.editRow; i3RLinux联盟
linkEl.setAttribute('columnId', k); i3RLinux联盟
i3RLinux联盟
var innerEls = table.tBodies[0].rows[j+1].cells[k].childNodes; i3RLinux联盟
i3RLinux联盟
linkEl.innerText = "修改"; i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl); i3RLinux联盟
} i3RLinux联盟
// 判断是否存在上移、下移样式，如果存在则把该单元个转化为上移、下移按钮 i3RLinux联盟
if(css.elementHasClass(table.tBodies[0].rows[j+1].cells[k], 'updownbtn')) ...{ i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].id = 'updownbtn'+this.addbtnid ++; i3RLinux联盟
var linkEl = createElement('a'); i3RLinux联盟
linkEl.href = '#'; i3RLinux联盟
linkEl.onclick = this.upRow; i3RLinux联盟
linkEl.setAttribute('columnId', k); i3RLinux联盟
i3RLinux联盟
var innerEls = table.tBodies[0].rows[j+1].cells[k].childNodes; i3RLinux联盟
i3RLinux联盟
linkEl.innerText = "上移"; i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl); i3RLinux联盟
i3RLinux联盟
var p = createElement('span'); i3RLinux联盟
p.innerHTML = " "; i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].appendChild(p); i3RLinux联盟
i3RLinux联盟
var linkEl2 = createElement('a'); i3RLinux联盟
linkEl2.href = '#'; i3RLinux联盟
linkEl2.onclick = this.downRow; i3RLinux联盟
linkEl2.setAttribute('columnId', k); i3RLinux联盟
i3RLinux联盟
var innerEls2 = table.tBodies[0].rows[j+1].cells[k].childNodes; i3RLinux联盟
i3RLinux联盟
linkEl2.innerText = "下移"; i3RLinux联盟
table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl2); i3RLinux联盟
} i3RLinux联盟
} i3RLinux联盟
i3RLinux联盟
} i3RLinux联盟
// 隔行换颜色,依赖odd样式 i3RLinux联盟
this.isOdd = true; i3RLinux联盟
var rows = table.tBodies[0].rows; i3RLinux联盟
i3RLinux联盟
// We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones i3RLinux联盟
for (var i=0;i<rows.length-1;i++) ...{ i3RLinux联盟
this.doStripe(rows[i+1]); i3RLinux联盟
} i3RLinux联盟
}, i3RLinux联盟
/**//** i3RLinux联盟
* 隔行分色策略，依赖odd样式 i3RLinux联盟
**/ i3RLinux联盟
doStripe : function(rowItem) ...{ i3RLinux联盟
if (!this.isOdd) ...{ i3RLinux联盟
css.addClassToElement(rowItem, 'odd'); i3RLinux联盟
} else ...{ i3RLinux联盟
css.removeClassFromElement(rowItem, 'odd'); i3RLinux联盟
} i3RLinux联盟
i3RLinux联盟
this.isOdd = !this.isOdd; i3RLinux联盟
}, i3RLinux联盟
/**//** i3RLinux联盟
* 删除目标列 i3RLinux联盟
**/ i3RLinux联盟
delRow : function(e) ...{ i3RLinux联盟
var that = crudbtn.that; i3RLinux联盟
var linkEl = getEventTarget(e); i3RLinux联盟
var td = linkEl.parentNode; i3RLinux联盟
var tr = td.parentNode; i3RLinux联盟
var thead = tr.parentNode; i3RLinux联盟
var table = thead.parentNode; i3RLinux联盟
i3RLinux联盟
if (!table.tBodies || table.tBodies[0].rows.length <= 1) ...{ i3RLinux联盟
return false; i3RLinux联盟
} i3RLinux联盟
i3RLinux联盟
this.isOdd = true; i3RLinux联盟
var rows = table.tBodies[0].rows; i3RLinux联盟
i3RLinux联盟
// 实现AJAX调用处理删除 i3RLinux联盟
var pars = "pars="; i3RLinux联盟
for(h=0;h<tr.cells.length;h++) ...{ i3RLinux联盟
if(!css.elementHasClass(tr.cells[h],'editbtn')&&!css.elementHasClass(tr.cells[h],'delbtn') i3RLinux联盟
&&!css.elementHasClass(tr.cells[h],'updownbtn')) ...{ i3RLinux联盟
var colid = tr.cells[h].getAttribute('columnId'); i3RLinux联盟
if(tr.cells[h].firstChild.value!=null) ...{ i3RLinux联盟
pars += h +"^"+ tr.cells[h].firstChild.value +"|"; i3RLinux联盟
} i3RLinux联盟
else ...{ i3RLinux联盟
pars += h +"^"+ tr.cells[h].innerText +"|"; i3RLinux联盟
} i3RLinux联盟
} i3RLinux联盟
} i3RLinux联盟
pars += "&command=delrow&callback=afterUpdate&table="+table.id; i3RLinux联盟
table.deleteRow(tr.rowIndex); i3RLinux联盟
i3RLinux联盟
// 重新隔行换色 i3RLinux联盟
for (var i=1;i<rows.length;i++) ...{ i3RLinux联盟
if (!this.isOdd) ...{ i3RLinux联盟
css.addClassToElement(rows[i], 'odd'); i3RLinux联盟
} else ...{ i3RLinux联盟
css.removeClassFromElement(rows[i], 'odd'); i3RLinux联盟
} i3RLinux联盟
this.isOdd = !this.isOdd; i3RLinux联盟
} i3RLinux联盟
new Ajax.Updater('result','Dispatcher.ajax?'+pars,...{evalScripts: true}); i3RLinux联盟
if(table.rows.length<=1) ...{ i3RLinux联盟
alert("该页已无数据,系统将重载数据项"); i3RLinux联盟
window.location = "?"; i3RLinux联盟
} i3RLinux联盟
}, i3RLinux联盟
/**//** i3RLinux联盟
* 修改按钮 i3RLinux联盟
**/ i3RLinux联盟
editRow : function(e) ...{ i3RLinux联盟
var that = crudbtn.that; i3RLinux联盟
var linkEl = getEventTarget(e); i3RLinux联盟
var td = linkEl.parentNode; i3RLinux联盟
var tr = td.parentNode; i3RLinux联盟
var thead = tr.parentNode; i3RLinux联盟
var table = thead.parentNode; i3RLinux联盟
i3RLinux联盟
var column = linkEl.getAttribute('columnId') || td.cellIndex; i3RLinux联盟
i3RLinux联盟
var cellcount = tr.cells.length; i3RLinux联盟
// 如果没点击修改 i3RLinux联盟
if(tr.getAttribute('editing')!=1) ...{ i3RLinux联盟
for(var o=0;o<cellcount;o++) ...{ i3RLinux联盟
// 如果该列含有修改样式、删除样式或其他类似样式，则忽略该列 i3RLinux联盟
if(!css.elementHasClass(tr.cells[o],'editbtn')&&!css.elementHasClass(tr.cells[o],'delbtn') i3RLinux联盟
&&!css.elementHasClass(tr.cells[o],'updownbtn') &&!css.elementHasClass(tr.cells[o],'noedit')) ...{ i3RLinux联盟
var inputEl = createElement('input'); i3RLinux联盟
inputEl.type = "text"; i3RLinux联盟
// 文本框大小 i3RLinux联盟
// inputEl.size = tr.cells[o].innerText.length*2; inputEl.size = tr.cells[o].innerText.replace(/[^\x00-\xff]/gi,'xx').length; i3RLinux联盟
tr.cells[o].setAttribute('columnId', o); i3RLinux联盟
inputEl.setAttribute('oldValue', tr.cells[o].innerHTML); i3RLinux联盟
var inputEls = tr.cells[o].innerText; i3RLinux联盟
inputEl.value = inputEls; i3RLinux联盟
tr.cells[o].firstChild.removeNode(true); i3RLinux联盟
tr.cells[o].appendChild(inputEl); i3RLinux联盟
tr.setAttribute('editing',1); i3RLinux联盟
linkEl.setAttribute('oldValue',linkEl.innerText); i3RLinux联盟
} i3RLinux联盟
} i3RLinux联盟
linkEl.innerText = "确定"; i3RLinux联盟
i3RLinux联盟
var p = createElement('span'); i3RLinux联盟
p.innerHTML = " "; i3RLinux联盟
td.appendChild(p); i3RLinux联盟
i3RLinux联盟
var linkEl2 = createElement('a'); i3RLinux联盟
linkEl2.href="#"; i3RLinux联盟
linkEl2.onclick = that.cancelRow; i3RLinux联盟
linkEl2.innerText = "取消"; i3RLinux联盟
td.appendChild(linkEl2); i3RLinux联盟
} i3RLinux联盟
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论 |
|
|
|
|
|
