AJAX 入门视频之 Ext 2.0.1 Grid 增删节 & DWR 1 实例
日期：2014-05-16 浏览次数：20702 次
AJAX 入门视频之 Ext 2.0.1 Grid 增删改 & DWR 1 实例
说实话, 我也是特别懒的人, 很早就想看看 Ext, 尤其是做一个实时编辑的带后台的表格例子, 一直没能深入, 今天抽时间深入看了看 Ext 的 EditorGrid,可编辑的表格控件,总算凑出来了个实时增删改的例子(不单独弹出添加对话框的那种),带用DWR 1 (不用DWR 2 是因为2个头太大了)开发的后台服务器端,没有整合Spring,JPA啊,Struts,Hibernate等等的流感框架, 这样总的代码非常的小,省得当大家接触到了一些大量的自己不熟悉的框架的时候会产生发晕的感觉,而且那样下来整个例子的源码会远远超过1MB,发布的包更是估计要超过5MB了. 在此之前上网找了好多资料, 然而大部分都是基于 Ext 1 开发, 而 2.0 的呢, 大多又找不到源码下载, 而且其类库比较复杂, 所以今天做它是花了一番功夫,不过当最后的结果出来后, 一切辛苦都显的那么值得了, 学技术,归根到底就是一种学习和总结的能力,您觉得是不是呢(我说的不是发明技术,那个我做不来)?
广告: 如果您或者您所在公司需要 Java EE 或者 AJAX 方面的技术顾问或者培训服务,欢迎联系本人!
您可以查看在线演示(不带服务器端代码): http://beansoft.java-cn.org/ajax/extgrid/
源代码下载(带完整注释): http://beansoft.java-cn.org/ajax/extgrid/extdwrgrid.zip 778 KB
视频下载: http://beansoft.java-cn.org/ajax/extgrid/ext.exe 16.1 MB 43分44秒
运行效果: <title>表格编辑器示例</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- 图标样式 CSS 信息 -->
<link rel="stylesheet" type="text/css" href="edit-grid2.css" />
??? <!-- GC -->
???? <!-- LIBS -->
???? <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
???? <!-- ENDLIBS -->
??? <script type="text/javascript" src="ext/ext-all.js"></script>
??? <!-- 中文提示信息支持 -->
???? <script type="text/javascript" src="ext/source/locale/ext-lang-zh_CN.js"></script>
??? <!-- 本页的功能代码 -->
??? <script type="text/javascript" src="edit-gridnojava.js"></script>
??? <!--? DWR JavaScript 类库 -->
??? <script type='text/javascript' src='/dwrtest/dwr/interface/JUserManager.js'></script>
? <script type='text/javascript' src='/dwrtest/dwr/engine.js'></script>
</head>
<body>
<h1>Ext 2.0 & DWR 1表格实时编辑器示例(无Java服务器端)</h1>
<p>这个例子展示了如何创建可编辑的表格控件.</p>
<p>注意脚本没有压缩, 因此便于读者阅读. 点击浏览 <a href="edit-gridnojava.js">edit-gridnojava.js</a>.</p>
<p>表格的数据文件加载自 <a href="users.xml">users.xml</a>.</p>
<!-- 这个默认不显示的下拉选择框必须在这里定义, 因为'地区'列的编辑器需要用它在这里取值 -->
<select name="area" id="area" style="display: none;">
??? <option value="北京">北京</option>
??? <option value="河南南阳">河南南阳</option>
??? <option value="河北涿州">河北涿州</option>
</select>
<!-- 放置可编辑控件的 DIV -->
<div id="editor-grid"></div>
作者: 刘长炯<br>
邮件: beansoft@126.com<br>
博客: <a href="http://beansoft.blogjava.net/">http://beansoft.blogjava.net/</a><br>
2008-01-27<br>
本页面和JS的编码都是 UTF-8.
</body>
</html>
CSS(自己把图放进去就好了) editor-grid2.css:
/** 定义了一些工具栏按钮的 CSS 样式 */
.add {
??? background-image:url(./images/add.gif) !important;
}
.remove {
??? background-image:url(./images/delete.gif) !important;
}
.details {
??? background-image:url(./images/details.gif) !important;
}
.user-delete {
??? background-image:url(./images/user_delete.gif) !important;
}
以及数据文件 users.xml
<?xml version="1.0" encoding="GBK"?>
<users>
? <user>
????? <id>1</id>
??? <name>刘长炯</name>
??? <area>河南南阳</area>
??? <email>beansoft@126.com</email>
??? <age>28</age>
??? <sex>true</sex>
??? <birth>1980/01/01</birth>
? </user>
??? <user>
??? <id>2</id>
??? <name>BeanSoft</name>
??? <area>北京</area>
