sqlserver+asp.net+devextreme从零开始(3)

前两篇文章结束后，仍然一行正式代码都没写，但是已经做出了一个简陋的可以连接数据库进行增删查改的ASP.NET本地网站。

现在要开始订制需求。还是为了少些代码，打算在理解的基础上，多些山寨，少些自主思想。

需求list如下：

1表格列不用太多，显示在内容下面。但是有时候又需要这些列进行排序或者筛选。类似于列可以在终端配置。

2详情页不需要单独的页面，而是直接显示在同一页中，分成两半，带上图片。

3……

类似的需求可能还有很多，所以需要找三方插件公司来帮忙。

devexpress。

总之，找devexpress公司的devextreme框架的一个demo很符合这个要求，异常强大的按条件筛选、排序、客户端自定义筛选和列定制等等，而且是html5的。

找到最接近我想象的demo见图：

好了，就开始山寨它了。

下载安装devextreme的控件，然后试用。。。

运行demo。学习官方教程。此处略去我过去两个月对devexpress的wpf控件的学习……

研究上图的demo代码，根据之前的asp.net mvc的demo中学习的情况，发现：

1.需要学点javascript，不然没法混。快速学习了大神的入门教程，发现javascript入门比比较简单，基不管是名字还是基本表达式都有点像java，但是写好了比较难，我打算和后续工作同步进行学习，毕竟目前只要读懂就ok。http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

2.demo的界面用到了bootstrap和less框架，暂时不研究，直接山寨，好像是个大坑。毕竟目前的核心工作不是调整页面的样式。

用devexpress在vs中自带的框架生成了一个deevextrememvcapp，发现和demo的框架还是很接近的，可以随便改动用来练手。

第一个任务是解决devextreme框架引入，替换掉原有表格。

第二个任务是完善表格，加入相关功能，包括excel导出

第三个任务是完善详情页，重点是图片及图片数据库。

开始第一个任务：

发现连代码都看不懂，因为bootstrap的框架什么的不熟悉。学习了http://getbootstrap.com/2.3.2/javascript.html

发现需要了解jquery。学习了http://www.w3school.com.cn/jquery/

发现web前端是大坑啊。在w3school网站上花了两天概要性的复习了html，css。

然后尝试自动生成odata的框架，连接测试成功。

根据单位对于我所做东西的急切程度，打算先用纯前端做一个单机的web，实现主要的产品查询功能先。

1.数据源使用excel转换为json

2.大体功能框架使用devextreme的框架，代替bootstrap。主要是因为他家的很多控件，尤其是强大的表格控件，可以条件筛选和导出excel

3.使用离线的图片集+导出的excel+publisher格式制作的模版，然后用微软的邮件合并功能来实现自动生成大批量的产品单页。

先解决第一件事情，找到一个网站https://shancarter.github.io/mr-data-converter/可以解决，而且是开源的，便于以后的集成。

第二件事情使用dxextreme的框架，全面学习参照源代码中的离线demo包。DevExpress Demos 16.1\DevExtreme\WidgetsGallery。

第三件事情已经找实习生帮忙完成2套，4个产品的publisher模版，生成了近200个产品的 彩页，不是很美观，但是还可以了，算作标准化的第一步。

以上全部是思路，实际操作中发现。

1.可以直接从excle生成csv文件，然后从csv文件直接生成json，使用D3.js 中的d3.csv("food.csv",function(error,data)函数。

读取本地数据的问题，可以有两种方法，一是数据直接写到网页代码里；而是使用chrome的本地模式，即加启动参数  --allow-file-access-from-files.

考虑可以让大家使用excel软件直接编辑csv文件，然后我可以直接读取csv文件为json。这样，初期的离线数据的更新维护会容易。

更新：最后采用的方法是由excel的vba直接将内容生成json格式的数据数据，然后做js文件引用。也就是说用js硬编码做离线数据库，速度快，巨好用，因为数据库整个小于10M.

2.在实际实现的时候如下，发现没有必要实现详情页，目前没有意义。未来成为网络版本的时候才会有意义。

功能强大，可筛选，可搜索，可聚类，可导出excel的搜索页如下；

3.彩页模版合成后效果如下

最终，我和三个实习生用两周的时间总计制作完成了约800个上述彩页。科学技术是第一生产力啊。excel数据源截图：

本系列暂告一段落。