extjs动态表格完整版.docx
- 文档编号:30037127
- 上传时间:2023-08-04
- 格式:DOCX
- 页数:78
- 大小:47.23KB
extjs动态表格完整版.docx
《extjs动态表格完整版.docx》由会员分享,可在线阅读,更多相关《extjs动态表格完整版.docx(78页珍藏版)》请在冰豆网上搜索。
extjs动态表格完整版
extjs动态表格完整版
前台页的源码
test2.js
Java代码
1.
--test2.html所需要的js___start -->
2.
3.Ext.onReady(function() {
4.
5. Ext.QuickTips.init();// 浮动信息提示
6.
7. Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地
8.
9. /*刚打开页面等待中,需要屏蔽*/
10. var myMask;
11. Ext.onReady(function(){
12. myMask= new Ext.LoadMask(Ext.getBody(), {msg:
"loading..."});
13. myMask.show();
14. });
15.
16. // 定义数据源为远程代理和JSON数据格式�
17. var ds = new Ext.data.Store({
18. proxy :
new Ext.data.HttpProxy({
19. // 这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件
20. url :
'../ext.do?
method=date',
21. failure :
function() {
22. Ext.Msg.alert("数据加载失败!
请检查");
23. },
24. success:
function(){
25. myMask.hide();
26. }
27.
28. }),
29.
30.
31.
32. reader :
new Ext.data.JsonReader({
33. // 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致!
!
34. totalProperty :
'totalProperty',
35. root :
'root'
36.
37. }, [{
38.
39. name :
'id'
40.
41. }, {
42.
43. name :
'name'
44.
45. }, {
46.
47. name :
'sex'
48.
49. }, {
50.
51. name :
"birthday",
52.
53. type :
"date",
54.
55. dateFormat :
"Y-n-j"
56.
57. }, {
58.
59. name :
'email'
60.
61. },
62. {
63.
64. name :
'edit'
65.
66. }]
67. )
68.
69. });
70.
71.
72. // 加载首页数据,每页显示10条记录�
73.
74. ds.load({
75.
76. params :
{
77.
78. start :
0,
79.
80. limit :
10
81.
82. }
83.
84. });
85.
86. // 定义复选框
87.
88. var sm = new Ext.grid.CheckboxSelectionModel();
89.
90. // 定义列模型
91.
92. var cm = new Ext.grid.ColumnModel([
93.
94. // new Ext.grid.RowNumberer(),// 添加自动行号�
95.
96. sm,// 添加复选框�
97.
98. {
99.
100. header :
'学号',
101.
102. width :
40,
103.
104. dataIndex :
'id'
105.
106. }, {
107.
108. header :
'姓名',
109.
110. width :
40,
111.
112. dataIndex :
'name',
113.
114. sortable:
true,
115.
116. editor:
new Ext.form.TextField()
117. }, {
118.
119. header :
'性别',
120.
121. width :
40,
122.
123. dataIndex :
'sex',
124.
125. renderer :
changeSex,
126.
127. sortable:
true,
128.
129. editor:
new Ext.form.ComboBox({transform:
"sexList",triggerAction:
"all",lazyRender:
true})
130.
131. // 红男绿女
132.
133. }, {
134.
135. header :
'出生日期',
136.
137. dataIndex :
'birthday',
138.
139. renderer :
Ext.util.Format.dateRenderer('Y年m月d日'),
140.
141. sortable:
true,
142.
143. editor:
new Ext.form.DateField({format:
'Y年m月d日'})
144.
145. // 格式化日期
146.
147. }, {
148.
149. header :
'电子邮件',
150.
151. width :
120,
152.
153. dataIndex :
'email',
154.
155. renderer :
sendEmail,
156.
157. sortable:
true,
158.
159. editor:
new Ext.form.TextField()
160.
161. // 单击启动邮件客户端发送邮件
162.
163. },
164.
165. {
166.
167. header :
'操作',
168.
169. width :
25,
170.
171. dataIndex :
'edit',
172.
173. renderer :
sendEdit
174. }
175.
176. ]);
177.
178. // 设置所有列字段默认排序
179.
180. cm.defaultSortable = true;
181.
182. // 按要求渲染性别的函数�
183.
184. function changeSex(value) {
185.
186. if (value == '男') {
187.
188. return " red;font-weight: bold;'>男
189.
190. } else {
191.
192. return " green;font-weight: bold;'>女
193.
194. }
195.
196. }
197.
198. //按要求渲染email的函数
199.
200. function sendEmail(value) {
201.
202. return " " + value + ">" + value + "
203.
204. }
205.
206. //按要求渲染edit的函数
207.
208. function sendEdit(value) {
209.
210. return "";
211.
212. }
213.
214. // 定义一个表格面板�
215.
216. var grid = new Ext.grid.EditorGridPanel({
217.
218. id :
'student-grid',// 设置标识ID,方便以后引用!
219. title :
'学员信息管理�',// 标题
220. // 显示数据的地方,注意这里的renderTo要和html文件中的div要一致!
!
221. renderTo :
'myGrid',// 显示表格的地方显示表格的地方
222.
223. sm :
sm,// 复选框
224.
225. cm :
cm,// 列模型
226.
227. ds :
ds,// 数据源�
228.
229. stripeRows :
true,// 加上行条纹
230.
231. loadMask :
true,// 加载数据时遮蔽表格
232.
233. border :
true,// 加上边框
234.
235. frame :
true,// 显示天蓝色圆角框
236.
237. autoHeight :
true,// 自动设置高度,这个配置很重要�
238.
239. width :
700,
240.
241. x :
1,// 设置初始位置横坐标�
242.
243. y :
1,// 设置初始位置纵坐标�
244.
245. // enableDragDrop :
true,//容许行的拖曳
246.
247. collapsible :
true, // 面板可以折叠
248.
249. // titleCollapse :
true,// 单击表头任何地方都可以折叠�
250.
251. floating :
true,// 设置浮动,能否拖动成功就靠它了,注意设置浮动后它就置顶了�
252.
253. // 实现拖曳效果,参考官方文档�
254. draggable :
{
255.
256. insertProxy :
false,
257.
258. onDrag :
function(e) {
259.
260. var pel = this.proxy.getEl();
261.
262. this.x = pel.getLeft(true);
263.
264. this.y = pel.getTop(true);
265.
266. var s = this.panel.getEl().shadow;// 拖曳中消除原位置的阴影�
267.
268. if (s) {
269.
270. s.realign(this.x, this.y, pel.getWidth(),
271.
272. pel.getHeight());
273.
274. }
275.
276. },
277.
278. endDrag :
function(e) {// 拖曳结束后保存位置效果�
279.
280. this.panel.setPosition(this.x, this.y);
281.
282. }
283.
284. },
285.
286. // UI视图配置
287.
288. viewConfig :
{
289.
290. forceFit :
true
291.
292. //强制适应分布宽度�
293.
294. },
295.
296. // 表格顶部动作或按钮工具栏
297.
298. tbar :
new Ext.Toolbar({
299.
300. items :
[{
301.
302. id :
'btnAdd',
303.
304. text :
"添加�",
305.
306. handler :
function() {
307.
308. Ext.MessageBox.alert("添加",
309.
310. "做添加的操作");
311.
312. }
313.
314. }, new Ext.Toolbar.SplitButton({}), {
315.
316. id :
'btnEdit',
317.
318. text :
"编辑",
319.
320. handler :
function() {
321.
322. Ext.MessageBox.alert("编辑",
323.
324. "做编辑的操作");
325.
326. }
327.
328. }, '-', {
329.
330. id :
'btnDel',
331.
332. text :
"删除",
333.
334. handler :
function() {
335.
336. Ext.MessageBox.alert("删除",
337.
338. "做删除的操作�");
339.
340. }
341.
342. }]
343.
344. }),
345.
346. // 表格底部分页工具栏
347.
348. bbar :
new Ext.PagingToolbar({
349.
350. pageSize :
6,
351.
352. store :
ds,
353.
354. displayInfo :
true,
355.
356. displayMsg :
'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
357.
358. emptyMsg :
"没有记录"
359.
360. })
361.
362. });
363.
364.
365. //表格编辑事件
366. grid.on("afteredit",afterEdit,this);
367.
368. function afterEdit(obj){
369. var r=obj.record;
370. var id=r.get("id");
371. var name=r.get("name");
372. var sex=r.get("sex");
373. var bornDate=r.get("birthday");
374. var email=r.get("email");
375. // var c=this.record2obj(r);
376. // Ext.MessageBox.alert('show',"【id:
"+id+"】【name:
"+name+"】【sex:
"+sex+"】【bornDate:
"+bornDate+"】【email:
"+email+"】");
377. //字符转日期格式
378. var date=Ext.util.Format.date(bornDate,"Y-m-d");
379. //alert(date);
380. //调用异步方法
381. rollRequest(id,name,sex,date,email);
382.
383.};
384.
385.//异步调用方法
386.function rollRequest(id,name,sex,bornDate,email){
387. //alert(id);
388. Ext.Ajax.request({
389. url:
'../ext.do?
method=update',
390. success:
function(response,config){
391. //alert(config.url+"-"+config.method);
392. //成功后的刷新事件
393. ds.load({
394. params :
{
395. start :
0,
396. limit :
10
397. }});
398. //Ext.MessageBox.alert("result",response.responseText); //返回值
399. //显示[修改成功]
400. document.getElementById("loading").style.display="block";
401. //透明度
402. Ext.get('loading').setOpacity
(1);
403. Ext.get('loading').setOpacity(0.0,{duration:
2,callback:
function(){
404. }});
405. },
406. failure:
function(){
407. Ext.MessageBox.alert("result","失败");
408. },
409. method:
"post",
410. //传入后台的参数
411. params:
{'id':
id,'name':
name,'sex':
sex,'bornDate':
bornDate,'email':
email}
412.
413. });
414.}
415.
416.
417.//给表格单元格加单击事件
418.grid.addListener('cellclick', cellclick);
419.function cellclick(grid, rowIndex, columnIndex, e) {
420. //如果是编辑列允许操作
421. if(columnIndex==6){
422. var record = grid.getStore().getAt(rowIndex); //Get the Record
423. var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
424. var data = record.get(fieldName);
425. // Ext.MessageBox.alert('show','当前选中的数据是:
'+data+"-"+record.id);
426.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- extjs 动态 表格 完整版
![提示](https://static.bdocx.com/images/bang_tan.gif)