jQuery MiniUI 简单易用、快速开发

中国最大的ExtJs讨论社区

注册

 

发新话题 回复该主题

[Grid]自己封装的ExtGrid 实现增、删、改、查等功能 [复制链接]

1#

参照网上http://www.dojochina.com/index.php?q=node/936这个文章进行了数据库操作的封装

第一次尝试封装可能会有bug,发现的希望大家联系我。

后台是java写的如果需要后台文件,请上博客上留言www.chendw.cn

先贴调用例子 只要new一个新对象后新增修改等表单将根据定义的信息 自动生成提高开发效率

调用例子: Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var gridStructure = [// grid的数据结构    {     header : '事件编号',     name : 'SJID',     hidden : "true",     type:'label'    }, {     header : '研究项目号',     name : 'YJXMBH',     width : 200,     type:'combo',     //绑定数据库     fobj:'YL_YJXM',     text:'XMMC',     value:'YJXMBH'     //绑定数组     //fobj:[[1,'是'],[2,'否']]    }, {     header : '时间点',     name : 'SJD',     align : 'center',     width : 100,     type:'number'     //rendererunction(v){return v=='4.0'?'是':'否'}    }, {     header : '时间点描述',     name : 'SJDMS',     align : 'center',     width : 100    }, {     header : '事件',     name : 'SJ',     align : 'center',     width : 100    }, {     header : '检查项目编号',     name : 'JCXMBH',     align : 'center',     width : 100    }]; var myUxGrid = new Ext.ux.grid.MyGrid({// 创建封装的MyGrid对象   id : 'dept-center-stat-grid',   url : 'http://localhost080/YLXT/servlet/DealDataJsonServlet.do',   selectType : 'check',   // dataObject : myGridData, // defaultSortField : 'stat_sn',   // keyField : 'basicUnitNo',   structure : gridStructure,   autoScroll : true,   autoWidth : true,   frame : true,   bodyStyle : 'width:100%',   layout : 'fit',   height : 600,   findField:'YJXMBH', //指定搜索字段   keyField:'SJID', //指定主键字段   loadMask : {    msg : label.wait   },   title : '研究步骤维护',   renderTo : Ext.getBody(),   tablename : 'YL_YJBZ' }); });

以下封装的源代码 附件里也是:

  1. /*
  2. * 封装的综合的Grid控件,继承新增、修改、删除、检索、分页功能。
  3. * blog:[url]www.chendw.cn[/url]
  4. * code by cdw
  5. */

  6. Ext.namespace("Ext.ux.grid");
  7. Ext.ux.grid.MyGrid = Ext.extend(Ext.grid.GridPanel, {
  8. // 储存表格结构
  9. structure : '',

  10. // 表格绑定的表
  11. tablename : '',

  12. // 指定加载的列 默认为读取表上所有列数据
  13. fields : '',

  14. // 每页显示条数
  15. pageSize : '15',

  16. // 表单里控件的默认宽
  17. fieldwidth : 200,

  18. // reader类型如果当为json的时候那么url不能空,当为array的时候dataObject不能为空
  19. readType : 'json',

  20. // 获取数据的URL
  21. url : '',

  22. // 数据对象
  23. dataObject : null,

  24. // 表格主键
  25. keyField : '',

  26. // 绑定查询的列
  27. findField : null,

  28. // 是否需要分组,默认为false,如果设置为true须再设置两个参数一个为myGroupField和myGroupTextTpl
  29. needGroup : false,

  30. // 分组的字段名称
  31. myGroupField : '',
  32. // 分组显示的模板,eg:{text} ({[values.rs.length]} {[values.rs.length > 1 ?
  33. // "Items" : "Item"]})
  34. myGroupTextTpl : '',

  35. // 列模式的选择模式,默认为rowselectModel,如果相设置成check模式,就设置为check
  36. selectType : '',

  37. // 默认排序字段
  38. defaultSortField : 'ID',

  39. // 是否需要分页工具栏,默认为true
  40. needPage : true,
  41. frame : false,

  42. // 是否带展开按钮,默认为false
  43. collapsible : false,

  44. animCollapse : true,

  45. loadMask : true,

  46. viewConfig : {
  47. forceFit : true
  48. },

  49. // 存储表头信息

  50. col : null,
  51. // private
  52. initComponent : function() {
  53. if (this.structure != '') {
  54. this.initStructure();
  55. }
  56. Ext.ux.grid.MyGrid.superclass.initComponent.call(this);

  57. },

  58. // private

  59. initEvents : function() {
  60. Ext.ux.grid.MyGrid.superclass.initEvents.call(this);

  61. /*
  62. * this.getStore().load( { params : { start : 0, limit : 30 } });
  63. *
  64. */
  65. if (this.loadMask) {
  66. // Ext.MessageBox.wait('sssssss')
  67. this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply({
  68. store : this.store
  69. }, this.loadMask));
  70. }

  71. },

  72. // private

  73. initStructure : function() {
  74. var oDs = null;
  75. var oCM = new Array(); // 列模式数组
  76. var oRecord = new Array(); // 容器对数组
  77. // 构成grid的两个必须组件: column和record,根据structure将这两个组件创建出来

  78. // 判断表格的选择模式
  79. if (this.selectType == 'check') {
  80. var sm = new Ext.grid.CheckboxSelectionModel();
  81. oCM[oCM.length] = sm;// 在列模式数组中添加checkbox模式按钮
  82. this.selModel = sm;// 并将selModel设置为check模式
  83. }
  84. var len = this.structure.length;// 得到结构的长度
  85. for (var i = 0; i < len; i++) {
  86. var c = this.structure[i];

  87. // alert( c.hidden ? c.width: this.fieldwidth)
  88. // 如果字段为hidden,则不生成filters和columnMode

  89. // 默认格式化日期列
  90. if (c.type == 'date' && !c.renderer) {
  91. c.renderer = this.formatDate;
  92. }
  93. oCM[oCM.length] = {
  94. header : c.header,
  95. dataIndex : c.name,
  96. hidden : c.hidden || false,
  97. width : !c.hidden ? c.width : this.fieldwidth,
  98. // 类型为数字则右对齐
  99. align : c.type == 'numeric' ? 'right' : 'left',

  100. // 结构的渲染函数
  101. renderer : c.renderer
  102. };

  103. oRecord[oRecord.length] = {
  104. name : c.name,
  105. // 如果类型不是date型则全部为string型
  106. type : c.type == 'date' ? 'date' : 'string',
  107. dateFormat : 'Y-m-d'
  108. };
  109. }

  110. this.col = oCM;
  111. // 生成columnModel
  112. this.cm = new Ext.grid.ColumnModel(oCM);
  113. // this.colModel = this.cm;
  114. // 默认可排序
  115. this.cm.defaultSortable = true;

  116. // 生成表格数据容器
  117. var record = Ext.data.Record.create(oRecord);

  118. // 判断读取类别,目前只实现了,jsonreader和arrayReader
  119. var reader;
  120. var tablename = this.tablename;
  121. var pageSize = this.pageSize;
  122. var fields = this.fields;

  123. switch (this.readType) {
  124. case 'json' :
  125. reader = new Ext.data.JsonReader({
  126. totalProperty : "Count",
  127. root : "List",
  128. id : this.keyField
  129. // 关键字段
  130. }, record);

  131. this.ds = new Ext.data.GroupingStore({
  132. proxy : new Ext.data.HttpProxy({
  133. url : this.url
  134. }),
  135. reader : reader,
  136. sortInfo : {
  137. field : this.defaultSortField,
  138. direction : 'ASC'
  139. },
  140. remoteSort : true,
  141. groupField : this.myGroupField,
  142. listeners : {
  143. 'reload' : function() {
  144. alert('reload')
  145. }
  146. }
  147. });

  148. break;

  149. case 'array' :
  150. reader = new Ext.data.ArrayReader({}, record);

  151. this.ds = new Ext.data.GroupingStore({
  152. reader : reader,
  153. data : this.dataObject,
  154. sortInfo : {
  155. field : this.defaultSortField,
  156. direction : 'ASC'
  157. },
  158. groupField : this.myGroupField
  159. });

  160. break;

  161. default :
  162. break;

  163. }

  164. // 判断是否需要分组
  165. if (this.needGroup) {
  166. this.view = new Ext.grid.GroupingView({
  167. forceFit : true,
  168. groupTextTpl : this.myGroupTextTpl
  169. })
  170. }

  171. this.store = this.ds;
  172. // 生成分页工具栏

  173. if (this.needPage) {
  174. var pagingToolbar = new Ext.PagingToolbar({
  175. displayInfo : true,
  176. displayMsg : '当前记录数:{0} - {1} 总记录数: {2}',
  177. emptyMsg : '没有符合条件的记录',
  178. store : this.store
  179. });
  180. pagingToolbar.pageSize = this.pageSize;
  181. this.bbar = pagingToolbar;
  182. this.bottomToolbar = this.bbar;

  183. var oSearch = new Ext.form.TextField({
  184. id : 'search',
  185. xtype : 'textfield',
  186. align : 'right'

  187. })

  188. var ogrid = this;
  189. var keyField = this.keyField;
  190. // 生成顶部工具条
  191. var topToolbar = new Ext.Toolbar({
  192. items : [{
  193. iconCls : 'add',
  194. text : "新增",
  195. handler : function() {
  196. ogrid.doEdit();
  197. }
  198. }, {
  199. iconCls : 'edit',
  200. text : "修改",
  201. handler : function() {
  202. var record = ogrid.getSelectionModel()
  203. .getSelected();
  204. if (record == null) {
  205. Ext.Msg.alert('提示', '请先选择你要编辑的数据');
  206. return;
  207. }
  208. var id = record.get(keyField);
  209. ogrid.doEdit(id);
  210. }
  211. }, {
  212. iconCls : 'remove',
  213. text : "删除",
  214. handler : function() {
  215. ogrid.doDelete();
  216. }
  217. }, {
  218. iconCls : 'x-btn-text x-tbar-loading',
  219. text : "刷新",
  220. handler : function() {
  221. ogrid.getStore().reload();
  222. },
  223. scope : this
  224. }, '->', '项目名称:', oSearch, {
  225. iconCls : 'search',
  226. text : "搜索",
  227. handler : function() {
  228. ogrid.getStore().reload();
  229. }
  230. }

  231. ]
  232. })
  233. }

  234. this.tbar = topToolbar;
  235. this.topToolbar = this.tbar;

  236. // 将filter加入grid
  237. // this.plugins = filters;
  238. var findField = this.findField;

  239. this.store.on('beforeload', function() {
  240. var scondition = "";
  241. if (oSearch.getValue()) {
  242. scondition = findField + " like '%" + oSearch.getValue() + "%'";
  243. }
  244. var para = {
  245. action : 'show',
  246. pageSize : pageSize,
  247. name : tablename,
  248. // fields : fields,
  249. condition : scondition,
  250. tmpId : '',
  251. tmpName : ''
  252. };
  253. Ext.apply(this.baseParams, para);
  254. });

  255. this.store.load({
  256. params : {
  257. start : 0,
  258. limit : 10
  259. }
  260. });
  261. }

  262. ,

  263. /*
  264. * @功能:编辑用户选中的数据 @参数:id 为空则为新增数据 不为空则为修改数据
  265. *
  266. */
  267. doEdit : function(id) {
  268. var tablename = this.tablename;
  269. var keyField = this.keyField;
  270. var url = this.url;
  271. var ogrid = this;
  272. var oField = new Array();
  273. var len = this.structure.length;
  274. var action = "";

  275. // 判断id是否为空 是:新增 否:修改
  276. action = id ? 'edit' : 'new';
  277. // ========== 初始化字段信息 开始==============
  278. for (var i = 0; i < len; i++) {
  279. var c = this.structure[i];
  280. var type;
  281. var ds;
  282. c.type = c.type || 'string'; // 默认类型为string
  283. switch (c.type) {
  284. case 'string' :
  285. oField[oField.length] = {
  286. xtype : 'textfield',
  287. id : tablename + '_' + c.name,
  288. fieldLabel : c.header,
  289. anchor : '90%',
  290. allowBlank : c.required ? false : true
  291. }
  292. break;
  293. case 'number' :
  294. oField[oField.length] = {
  295. xtype : 'numberfield',
  296. id : tablename + '_' + c.name,
  297. fieldLabel : c.header,
  298. anchor : '90%',
  299. allowBlank : c.required ? false : true
  300. }
  301. break;
  302. case 'date' :
  303. oField[oField.length] = {
  304. xtype : 'datefield',
  305. id : tablename + '_' + c.name,
  306. fieldLabel : c.header,
  307. format : 'Y-m-d',
  308. anchor : '90%',
  309. allowBlank : c.required ? false : true
  310. }
  311. break;
  312. case 'combo' :

  313. // 初始化下拉列表数据
  314. c.value = c.value || 'value';
  315. c.text = c.text || 'text';
  316. ds = this.initCombo(c);
  317. oField[oField.length] = {
  318. xtype : 'combo',
  319. hiddenName : tablename + '_' + c.name,
  320. fieldLabel : c.header,
  321. anchor : '90%',
  322. store : ds,
  323. displayField : c.text,
  324. valueField : c.value,
  325. typeAhead : true,
  326. triggerAction : 'all',
  327. selectOnFocus : true,
  328. mode : 'local',
  329. allowBlank : c.required ? false : true,
  330. listeners : {
  331. 'blur' : function() {
  332. (this.setValue(this.getValue()))
  333. }
  334. }
  335. }
  336. break;
  337. case 'label' :
  338. oField[oField.length] = {
  339. xtype : 'textfield',
  340. disabled : true,
  341. id : tablename + '_' + c.name,
  342. fieldLabel : c.header,
  343. anchor : '90%',
  344. value : '系统将自动生成'
  345. }
  346. }
  347. }
  348. // ------------- 初始化字段信息 结束------------

  349. // 初始化表单结构
  350. var editForm = new Ext.form.FormPanel({
  351. labelWidth : 80,
  352. frame : true,
  353. border : false,
  354. hideBorders : true,
  355. autoHeight : true,
  356. items : oField,
  357. buttons : [{
  358. text : '保存',
  359. handler : function() {
  360. doSubmitFrom()
  361. }
  362. }, {
  363. text : '关闭',
  364. handler : function() {
  365. addWin.hide();
  366. addWin.destroy();
  367. }
  368. }]
  369. })

  370. var addWin = new Ext.Window({
  371. title : '研究项目维护',
  372. labelWidth : 100,
  373. frame : true,
  374. autoHeight : true,
  375. height : 400,
  376. width : 650,
  377. items : editForm
  378. })
  379. addWin.show()

  380. // 从服务器初始化表单数据
  381. if (id != null && id != '') {

  382. Ext.MessageBox.wait('正在数据加载,请稍后......', '请稍后')
  383. editForm.form.load({
  384. url : url,
  385. params : {
  386. action : 'load',
  387. name : tablename,
  388. fieldkey : keyField,
  389. condition : keyField + "='" + id + "'",
  390. id : id
  391. },
  392. method : 'post',
  393. success : function(action, form) {
  394. Ext.MessageBox.hide();
  395. },
  396. failure : ogrid.doFailure

  397. });
  398. }

  399. // 保存表单数据
  400. function doSubmitFrom() {
  401. if (editForm.form.isValid()) {
  402. editForm.form.url = url + '?action=' + action + '&name='
  403. + tablename + '&fieldkey=' + keyField + '&id=' + id;
  404. editForm.form.submit({
  405. waitTitle : "请稍候",
  406. waitMsg : "正在提交表单数据,请稍候。。。。。。",
  407. success : function() {
  408. ogrid.getStore().reload();
  409. Ext.Msg.alert('提示', '操作成功');
  410. },
  411. failure : ogrid.doFailure
  412. });
  413. }

  414. }
  415. },

  416. /*
  417. * @功能:删除所有选中记录支持批量删除
  418. *
  419. */

  420. doDelete : function() {
  421. var sSelId = "";
  422. var ogrid = this;
  423. var tablename = this.tablename;
  424. var keyField = this.keyField;
  425. var url = this.url;
  426. var aId = new Array();
  427. // 从GRID对象中获得Value
  428. var record = this.getSelectionModel().getSelected();
  429. if (!record) {
  430. Ext.Msg.alert("提示", "请先选择要删除的数据!");
  431. return;
  432. } else {

  433. for (var i = 0, j = this.store.getCount(); i < j; i++) {
  434. if (this.getSelectionModel().isSelected(i)) {
  435. sSelId += "'" + this.store.getAt(i).get(keyField) + "',";
  436. aId[aId.length] = this.store.getAt(i)
  437. }
  438. }
  439. if (sSelId.length > 0) {
  440. sSelId = sSelId.substr(0, sSelId.length - 1);
  441. }
  442. }
  443. Ext.MessageBox.confirm('确认删除', '你真的要删除所选数据吗?', function(btn) {
  444. if (btn == 'yes') {// 选中了是按钮
  445. Ext.MessageBox.wait("正在删除数据,请稍候。。。。。。", "请稍后");
  446. Ext.Ajax.request({
  447. url : url,
  448. success : function() {
  449. Ext.Msg.alert('提示', '操作成功');
  450. for (var i = 0; i < aId.length; i++) {
  451. ogrid.store.remove(aId[i]);
  452. }
  453. },
  454. failure : ogrid.doFailure,
  455. params : {
  456. action : 'delete',
  457. name : tablename,
  458. fieldkey : keyField,
  459. id : sSelId
  460. }
  461. });
  462. }
  463. });
  464. },

  465. /*
  466. * @功能:初始化combo控件数据
  467. *
  468. */
  469. initCombo : function(o) {
  470. var url = this.url;
  471. var fields = o.value + ',' + o.text;
  472. var ds = null;

  473. if (typeof o.fobj != 'object') {
  474. var reader = new Ext.data.JsonReader({
  475. totalProperty : 'Count',
  476. root : 'List'
  477. }, [ {
  478. name : o.value
  479. }, {
  480. name : o.text
  481. }]);

  482. ds = new Ext.data.Store({
  483. proxy : new Ext.data.HttpProxy({
  484. url : url
  485. }),
  486. reader : reader
  487. });

  488. ds.on('beforeload', function() {
  489. // Ext.MessageBox.wait('正在加载数据请稍后。。。。。。','请稍后')
  490. var para = {
  491. action : 'show',
  492. pagesize : '999',
  493. name : o.fobj,
  494. fields : fields
  495. };
  496. Ext.apply(ds.baseParams, para);
  497. });
  498. } else {
  499. ds = new Ext.data.Store({
  500. proxy : new Ext.data.MemoryProxy(o.fobj),
  501. reader : new Ext.data.ArrayReader({}, [{
  502. name : 'value'
  503. }, {
  504. name : 'text'
  505. }]),
  506. autoLoad : true
  507. });
  508. }

  509. ds.load({
  510. params : {
  511. start : 0,
  512. limit : 10
  513. }
  514. });

  515. return ds;

  516. },
  517. /*
  518. * @功能:请求成功显示信息
  519. */
  520. doSuccess : function(action, form) {

  521. var ogrid = this;

  522. Ext.Msg.alert('提示', '操作成功');
  523. ogrid.getStore().reload();
  524. },

  525. /*
  526. * @功能:请求失败显示信息
  527. */
  528. doFailure : function(action, form) {
  529. Ext.Msg.alert('请求错误', '服务器未响应,请稍后再试');
  530. },

  531. /*
  532. * @功能:默认的格式化日期函数 @返回格式:2008-09-21
  533. */
  534. formatDate : function(v) {
  535. return v ? v.dateFormat('Y-m-d') : ''
  536. }

  537. });
复制代码

附件:您需要登录才可以下载或查看附件。没有帐号? 注册

    已有1评分我要评分查看所有评分

    最后编辑chendw 最后编辑于 2008-09-21 18:53:21
    本主题由 管理员 extsharp 于 2009-6-27 21:57:26 执行 移动主题 操作
    分享 转发
    TOP
    2#

    回复:[Grid]自己封装的ExtGrid 实现增、删、该、查等功能

    附件下载了,汉字都是乱码!
    宝剑锋从磨砺出,梅花香自苦寒来!
    http://www.cnblogs.com/zhw511006/
    TOP
    3#

    回复:[Grid]自己封装的ExtGrid 实现增、删、该、查等功能

    啊 不会吧 我这是好的啊 你另存为UTF-8编码 看下
    TOP
    4#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    换成UTF-8编码就好了,谢谢分享!
    宝剑锋从磨砺出,梅花香自苦寒来!
    http://www.cnblogs.com/zhw511006/
    TOP
    5#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    直接用Dreamweaver打开吧。谢谢分享!
    TOP
    6#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    看看
    TOP
    7#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    侃侃而谈
    TOP
    8#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    非常感谢
    TOP
    9#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    谢谢LZ
    TOP
    10#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    顶,谢谢分享,找了好久
    TOP
    11#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    grid>.....
    TOP
    12#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    谢谢楼主
    TOP
    13#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    看一下
    TOP
    14#

    回复:[Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    非常强大,感谢楼主
    TOP
    15#

    回复: [Grid]自己封装的ExtGrid 实现增、删、改、查等功能

    学习中!!!!!!!!!!!!!!!!!!
    TOP
    发新话题 回复该主题
    站内链接: 编程问答 Javascript Ajax HtmlCss Asp.Net PHP J2SE EJB CSharp LINQ VC J2ME JavaWeb开发 J2EE Eclipse Java其他 .NetFramework .Net Webservice VB .NET VC .NET Silverlight ASP PHP开源 XMLSOAP IIS Apache MSSQL VB Delphi BCB CPP ASM OLScript Office开发 STArithmetic PowerBuilder DB2 Oracle DataWarehouse VFP Access MySQL HPDatabase Windows7