ExtJS+WF+LINQ打造全功能Grid.docVIP

ExtJS+WCF+LINQ打造全功能Grid 分页功能 远程排序功能 添加新纪录功能 批量删除功能 批量更新功能 并且，如题目中介绍一致，这个全功能Grid结合了下面几种技术: WCF,而且采用Web Model方式。 ExtJs LINQ 这三种都是比较新的技术，尤其是完全采用Rest方式使得ExtJS与WCF进行比较复杂的交互，这个环节实现原理非常简单，就是采用JSON格式在前后台交互数据，但涉及到的细节还是比较多的。LINQ虽然很火，被人说得神乎其神，使用起来也是有诸多要注意的环节。ExtJS中有关UI的细节也存在不少，总结一下，本文中主要解决了如下几条难题： 涉及到ExtJs的包括如下几点： 在ExtJs的Grid中格式化时间显示问题 在ExtJs中添加自定义控件列问题 设定ExtJs中列主键的问题 将Ext.data.Record数组格式化成JSON字符串问题 用Ext.util.JSON.encode序列化javascirpt对象中有中文时候的乱码问题 在ExtJs中提交的时候显示进度条的问题 在对Grid进行多次编辑后，如何取得编辑和数据项的问题 涉及到WCF的包括如下几点： 如何返回能用于ExtJs中Grid分页显示的数据契约对象集合。 如何返回原始数据格式的数据（原始数据格式极大的提高了WCF的灵活度，为上传下载，跨域等问题提供了保证） 如何获取通过POST方式传递的复杂数据。 如何将客户端传递过来的JSON字符串序列化为数据契约的对象 涉及到LINQ的包括如下几点 如何实现数据的分页查询 如何动态的对数据字段进行排序 如何添加数据 如何批量删除数据 如何批量更新数据，批量更新数据遇到并发冲突的时候，如何解决。 上面这些问题，在本文所实现的实例项目中均有所体现。而且实现本文这个项目实例，还需要注意如下几点： 因为本文没有涉及到级联关系，为了添加，修改，删除等操作成功进行，需要将示例数据库AdventureWorks中数据表Product中的全部关系删除 因为在ExtJs与WCF交互中, DataContractJsonSerializer不支持DateTime的序列化，查阅了一下MSDN，不是DataContractJsonSerializer不支持序列化DateTime，它能够与Asp.Net Ajax之间对DateTime数据进行交互，但经过试验对ExtJs却不行，看了一下，好像应该是缺少转义字符的原因。试图反格式化Ext.util.JSON.encode后产生的JSON字符串会产生如下的异常： 所以本文实例中将数据契约Product中的DateTime类型均转换为了String类型 经过第二步的处理之后，利用LINQ对数据进行更新却说什么也不能成功了，总是有数据并发的问题，解决办法是设置Product中的这几个字段的UpdateCheck UpdateCheck.Never ? 新增记录 ? 批量删除 批量修改 ?而且,本文的项目中抽象出了几个常用的js功能方法 1 格式化数组对象为JSON 2 显示进度条 3 简化的form提交 ExtHelper.js//该函数用于将编辑过的Grid中的数据行对应的Store中的数据项转换成JSONfunction?convertRecordsToJson items if items.length 0 return?; var??jsonData? ?[; for i 0;i items.length;i++ record? ?items[i]; if record.dirty jsonData?+ ?Ext.util.JSON.encode record.data ?+?,; jsonData? ?jsonData.substring 0,jsonData.length-1 ?+?]; return?jsonData; //显示一个进度对话框???function?showProcessMsg Ext.MessageBox.show msg:?正在保存数据,?请稍侯, progressText:?正在保存中, width:300, wait:true, waitConfig:? interval:200 , icon:ext-mb-save ; function?showError Ext.MessageBox.hide ; Ext.MessageBox.show title:错误, msg:?操作失败！, buttons:?Ext.Msg.OK, icon:?Ext.MessageBox.ERROR ; function?submit form,url,method