ExtJs4(3)——带搜索和操作按钮的表

最新推荐文章于 2022-07-09 11:01:47 发布

test_touch

最新推荐文章于 2022-07-09 11:01:47 发布

阅读量314

点赞数

文章标签： json ux

带搜索和操作按钮的表（这里的问题是，下面由两条框框，不知怎么去掉，浪费不少空间也影响了美观。）

点击：

修改按钮：将弹出此窗口

详细按钮：与修改按钮相同，但保存按钮为不可能状态（即不能保存，只能查看）

新增按钮：与修改按钮相同，但里面没有数据

带搜索功能的表格已经在前文写过，在此便不再赘述。本文的要点是如何为表格添加对应的弹出窗口。

弹出窗口一般由两部分组成，一部分是外面的Window，另外一部分则是嵌入在Window里的与Grid的Columns想对应的内容

一般来说可以这样写：

ModifyWin = Ext.extend(Ext.util.Observable,{ alertWin : null, /* 弹出窗口 */ alertPanel : null, /* 弹出Panel */ field : null, /* 放置弹出窗口内使用的变量 */ constructor:function() { this.alertPanel = new MyFormPanel; //MyFormPanel是与表格Columns对应的Panel this.alertWin = Ext.create('Ext.window.Window', { //别的一些属性 items: this.alertPanel } } });

这样，便可以用一个变量modifyWin= New ModifyWin来产生一个实例作为缓存，而不需要每次弹出窗口时重新初始化一个窗口。

全部代码：

pageVar.js

alertPanelGrid.js:

//用来修改和添加的菜单 Ext.define('MyFormPanel', { extend : 'Ext.form.Panel', layout: 'absolute', //该panel的布局 defaultType: 'textfield', //该panel中Item项的默认类型 border: false, //是否显示边框 frame: true, //是否显示帧 autoScroll: true, //允许当内容超出高度时，自动产生滚动条 initComponent: function() { //日志类别 pageVar.SYSLOG_KINDStore = eval("[{'value':'0', 'text':'类别1'},{'value':'1', 'text':'类别2'},{'value':'2', 'text':'类别3'}]"); var SYSLOG_KINDStore = Ext.create('Ext.data.Store', { fields: ['value', 'text'], data:pageVar.SYSLOG_KINDStore }); var count = -1; //用来记录panel中的行数，便于排版 this.items = [ //为该panel添加内容 { xtype: 'textfield', fieldLabel: '日志ID', allowBlank: false, id: 'SYSLOG_ID', disabled: true, fieldWidth: pageVar.vFieldW, width: pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '日志类型', allowBlank: false, id: 'SYSLOG_TYPE', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width: pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X + pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '日志描述', allowBlank: false, id: 'SYSLOG_DESC', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH, width: pageVar.vOneLineWidth, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { store: SYSLOG_KINDStore, queryMode: 'local', displayField: 'text', valueField: 'value', xtype: 'combobox', fieldLabel: '日志类别', allowBlank: false, id: 'SYSLOG_KIND', fieldWidth: pageVar.vFieldW, width: pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '日志来源', allowBlank: false, id: 'SYSLOG_SOURCE', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width: pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X + pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '创建时间', allowBlank: false, id: 'SYSLOG_CREATETIME', fieldWidth: pageVar.vFieldW, width: pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '日志级别', allowBlank: false, id: 'SYSLOG_LEV', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width: pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X + pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: 'IP地址', allowBlank: false, id: 'SYSLOG_IP', fieldWidth: pageVar.vFieldW, width: pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' }, { xtype: 'textfield', fieldLabel: '菜单编码', allowBlank: false, id: 'SYSMENU_CODE', fieldWidth: pageVar.vFieldW, labelWidth: pageVar.LABEL_WIDTH + 10, width: pageVar.vWidth, labelAlign: 'right', x:pageVar.SRC_LOC_X + pageVar.vWidth, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( count ) , //此行放置了两个item，所以count无需增加 anchor: '-5' }, { xtype: 'textfield', fieldLabel: '用户表信息ID', allowBlank: false, id: 'SYSUSER_ID', disabled: true, fieldWidth: pageVar.vFieldW, width: pageVar.vWidth, labelWidth: pageVar.LABEL_WIDTH, x: pageVar.SRC_LOC_X, y: pageVar.SRC_LOC_Y + pageVar.EACH_DIST_Y * ( ++count ), anchor: '-5' } ]; this.callParent(arguments); } }); //--------------------------------------------弹出修改/增加窗口-------------------------------------------- var modifyWin = null; //弹出窗口 //创建弹出表单 ModifyWin = Ext.extend(Ext.util.Observable,{ alertWin : null, alertPanel : null, field : null, //放置弹出窗口需要的变量 constructor:function() { this.alertPanel = new MyFormPanel; this.alertWin = Ext.create('Ext.window.Window', { modal:true, title:pageVar.alertPanelTitle, layout: 'fit', width: pageVar.vPanelW, height: 300, items: this.alertPanel , constrain:true, shrinkWrap:3, autoScroll: true, closeAction:'hide', buttons: [ //在窗口中增加按钮 { text: '保存', minWidth:70, id: 'savaButton', scope:this, handler: this.save }, { text: '重置', minWidth: 70, scope:this, handler: this.reset }, { text: '取消', minWidth: 70, scope:this, handler: this.cancel }] }); }, cancel:function(){ this.alertWin.hide(); }, show: function() { this.alertWin.show(); }, reset: function() { this.alertPanel.getForm().reset(); }, save:function() { if ( this.field == null ) { this.initialField(); } Ext.Ajax.request( { url:pageVar.ajaxRequestUrl, success:function(response,option){ var rs = Ext.decode(response.responseText); if(rs.success) { Ext.MessageBox.alert('提示',rs.msg); pageVar.store.load();//重新加载数据 this.alertWin.hide(); } else { Ext.MessageBox.alert('提示',rs.msg); } }, failure:function(response){ Ext.MessageBox.alert('提示','网络错误或连不到服务!'); }, scope:this, params : { oper : pageVar.Oper, //1: 查询， 2:添加， 3:修改， 4:删除 SYSLOG_ID:this.field.var_SYSLOG_ID.getValue(), //日志ID SYSLOG_TYPE:this.field.var_SYSLOG_TYPE.getValue(), //日志类型 SYSLOG_DESC:this.field.var_SYSLOG_DESC.getValue(), //日志描述 SYSLOG_KIND:this.field.var_SYSLOG_KIND.getValue(), //日志类别 SYSLOG_SOURCE:this.field.var_SYSLOG_SOURCE.getValue(), //日志来源 SYSLOG_CREATETIME:this.field.var_SYSLOG_CREATETIME.getValue(), //创建时间 SYSLOG_LEV:this.field.var_SYSLOG_LEV.getValue(), //日志级别 SYSLOG_IP:this.field.var_SYSLOG_IP.getValue(), //IP地址 SYSMENU_CODE:this.field.var_SYSMENU_CODE.getValue(), //菜单编码 SYSUSER_ID:this.field.var_SYSUSER_ID.getValue() //用户表信息ID } }); }, initialField: function() { this.field = {}; this.field.var_SYSLOG_ID = Ext.getCmp('SYSLOG_ID'), //日志ID this.field.var_SYSLOG_TYPE = Ext.getCmp('SYSLOG_TYPE'), //日志类型 this.field.var_SYSLOG_DESC = Ext.getCmp('SYSLOG_DESC'), //日志描述 this.field.var_SYSLOG_KIND = Ext.getCmp('SYSLOG_KIND'), //日志类别 this.field.var_SYSLOG_SOURCE = Ext.getCmp('SYSLOG_SOURCE'), //日志来源 this.field.var_SYSLOG_CREATETIME = Ext.getCmp('SYSLOG_CREATETIME'), //创建时间 this.field.var_SYSLOG_LEV = Ext.getCmp('SYSLOG_LEV'), //日志级别 this.field.var_SYSLOG_IP = Ext.getCmp('SYSLOG_IP'), //IP地址 this.field.var_SYSMENU_CODE = Ext.getCmp('SYSMENU_CODE'), //菜单编码 this.field.var_SYSUSER_ID = Ext.getCmp('SYSUSER_ID') //用户表信息ID }, load: function( item ) { if ( this.field == null ) { this.initialField(); } this.field.var_SYSLOG_ID.setValue( item.get( 'SYSLOG_ID' ) ); //日志ID this.field.var_SYSLOG_TYPE.setValue( item.get( 'SYSLOG_TYPE' ) ); //日志类型 this.field.var_SYSLOG_DESC.setValue( item.get( 'SYSLOG_DESC' ) ); //日志描述 this.field.var_SYSLOG_KIND.setValue( item.get( 'SYSLOG_KIND' ) ); //日志类别 this.field.var_SYSLOG_SOURCE.setValue( item.get( 'SYSLOG_SOURCE' ) ); //日志来源 this.field.var_SYSLOG_CREATETIME.setValue( item.get( 'SYSLOG_CREATETIME' ) ); //创建时间 this.field.var_SYSLOG_LEV.setValue( item.get( 'SYSLOG_LEV' ) ); //日志级别 this.field.var_SYSLOG_IP.setValue( item.get( 'SYSLOG_IP' ) ); //IP地址 this.field.var_SYSMENU_CODE.setValue( item.get( 'SYSMENU_CODE' ) ); //菜单编码 this.field.var_SYSUSER_ID.setValue( item.get( 'SYSUSER_ID' ) ); //用户表信息ID } }); //删除所选中表格中的数据 function deleteData(){ var myGrid = Ext.getCmp( 'myGrid' ); var record= myGrid.getSelectionModel().getSelection(); //取得选中的项 var idAll = ""; for(var i = 0; i < record.length; i++){ idAll += "'"+record[i].get( pageVar.treeNodeIdColumn )+"'"; if(i<record.length-1){ idAll = idAll + ","; } } Ext.Ajax.request( { url:pageVar.ajaxRequestUrl, success:function(response,option){ var rs = Ext.decode(response.responseText); if(rs.success) { Ext.MessageBox.alert('提示',rs.msg); pageVar.store.load();//重新加载数据 } else { Ext.MessageBox.alert('提示',rs.msg); } }, failure:function(response){ Ext.MessageBox.alert('提示','网络错误或连不到服务!'); }, scope:this, params : { oper : 4, //1: 查询， 2:添加， 3:修改， 4:删除 SYSCST_ID:idAll } }); }

gridPubFun.js：

Ext.require([ 'Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*' ]); //弹出窗口，并确定弹出式新增、详细还是修改窗口 var showWindow = function( btn ) { if(Ext.isEmpty(modifyWin)) { modifyWin = new ModifyWin(); } Ext.getCmp('savaButton').setDisabled( 0 ); //设置保存按钮为可用 if ( btn == 'add' ) { //如果点击的不是添加按钮（详细或者修改按钮） pageVar.Oper = 2; modifyWin.reset(); } else { pageVar.Oper = 3; if ( btn == 'detail' ) { Ext.getCmp('savaButton').setDisabled( 1 ); //设置保存按钮为不可用 } //为表格读取数据 var myGrid = Ext.getCmp( 'myGrid' ); var selected = myGrid.getSelectionModel().getSelection(); //取得选中的项 modifyWin.load( selected[0] ); } modifyWin.show(); }; ShowGrid = Ext.extend(Ext.util.Observable,{ viewPort : null, constructor:function() { this.loadStore(); //设置整张表的Model为选择框模型 var selModel = Ext.create('Ext.selection.CheckboxModel', { listeners: { selectionchange: function(sm, selections) { //设置此按钮在表格中的项被选上时有效 pageVar.mainPanel.down('#removeButton').setDisabled( ! pageVar.bButtons[3] || selections.length == 0 ); //设置只有在表格中的项只有一个被选上时才有效 pageVar.mainPanel.down('#detailButton').setDisabled( ! pageVar.bButtons[1] || selections.length != 1 ); pageVar.mainPanel.down('#modifyButton').setDisabled( ! pageVar.bButtons[2] || selections.length != 1 ); } } }); pageVar.mainPanel = Ext.create('MyGridPanel',{ //自定义的带搜索功能的表 store: pageVar.store, id: 'myGrid', selModel: selModel, //表格模型 columns: pageVar.columns, title: pageVar.gridTitle, loadMask: true, region:'center' }); pageVar.mainPanel.down('#addButton').setDisabled( ! pageVar.bButtons[0] ); //双击表格中的项就出现弹出修改窗口 var dblclick = function() { showWindow(); }; pageVar.mainPanel.addListener( 'itemdblclick', dblclick ); this.viewPort = new Ext.Viewport({ layout : 'border', items : [pageVar.mainPanel] }); }, //为store载入内容 loadStore : function() { pageVar.store = Ext.create('Ext.data.Store', { //分页大小 pageSize: 50, model: pageVar.modelName, proxy: { //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 type: 'ajax', url: pageVar.gridStoreUrl, reader: { root: pageVar.rootName, totalProperty : 'total' } } }); pageVar.store.loadPage(1); }, //关闭窗口 cancel:function(){ this.viewPort.hide(); }, //展示窗口 show: function() { this.viewPort.show(); } });

LiveSearchGridPanel.js:

Ext.define('MyGridPanel', { extend: 'Ext.grid.Panel', requires: [ 'Ext.toolbar.TextItem', 'Ext.form.field.Checkbox', 'Ext.form.field.Text' ], /** * @private * search value initialization */ searchValue: null, /** * @private * The row indexes where matching strings are found. (used by previous and next buttons) */ indexes: [], /** * @private * The row index of the first search, it could change if next or previous buttons are used. */ currentIndex: null, /** * @private * The generated regular expression used for searching. */ searchRegExp: null, /** * @private * Case sensitive mode. */ caseSensitive: false, /** * @private * Regular expression mode. */ regExpMode: false, /** * @cfg {String} matchCls * The matched string css classe. */ matchCls: 'x-livesearch-match', defaultStatusText: '', // Component initialization override: adds the top and bottom toolbars and setup headers renderer. initComponent: function() { var me = this; me.tbar = [{ xtype: 'textfield', name: 'searchField', hideLabel: true, width: 200 }, { xtype: 'button', text: '搜索', tooltip: '', handler: me.onSearch, scope: me }, ' ', { itemId: 'addButton', text: '添加', tooltip:'新增一个协议', //显示提示 iconCls:'add', handler: function() { showWindow( 'add' ); } }, '-', { itemId: 'detailButton', text: '详细', tooltip:'详细显示该协议', iconCls:'option', disabled: true, handler: function() { showWindow( 'detail' ); } }, '-', { itemId: 'modifyButton', text: '修改', tooltip:'修改所选中的协议', iconCls:'modify', disabled: true, handler: function() { showWindow( 'modify' ); } }, '-', { itemId: 'removeButton', text: '删除', tooltip:'删除所选中的协议', iconCls:'remove', disabled: true, handler: function() { Ext.MessageBox.confirm('确认', '确定要删除吗?',function(btn){ if (btn == 'yes') { deleteData(); } }); } }]; me.bbar = Ext.create('Ext.ux.StatusBar', { defaultText: me.defaultStatusText, name: 'searchStatusBar' }); me.callParent(arguments); }, // afterRender override: it adds textfield and statusbar reference and start monitoring keydown events in textfield input afterRender: function() { var me = this; me.callParent(arguments); me.textField = me.down('textfield[name=searchField]'); me.statusBar = me.down('statusbar[name=searchStatusBar]'); }, // detects html tag tagsRe: /<[^>]*>/gm, // DEL ASCII code tagsProtect: '\x0f', // detects regexp reserved word regExpProtect: /\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm, /** * In normal mode it returns the value with protected regexp characters. * In regular expression mode it returns the raw value except if the regexp is invalid. * @return {String} The value to process or null if the textfield value is blank or invalid. * @private */ getSearchValue: function() { var me = this, value = me.textField.getValue(); if (value === '') { return null; } if (!me.regExpMode) { value = value.replace(me.regExpProtect, function(m) { return '\\' + m; }); } else { try { new RegExp(value); } catch (error) { me.statusBar.setStatus({ text: error.message, iconCls: 'x-status-error' }); return null; } // this is stupid if (value === '^' || value === '$') { return null; } } return value; }, /** * Finds all strings that matches the searched value in each grid cells. * @private */ onSearch: function() { var me = this, count = 0; me.store.rejectChanges(); me.view.refresh(); // reset the statusbar me.statusBar.setStatus({ text: me.defaultStatusText, iconCls: '' }); me.searchValue = me.getSearchValue(); me.currentIndex = null; if (me.searchValue !== null) { me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i')); var totalCount = me.store.getTotalCount(); for ( idx = 0; idx < totalCount; idx ++ ) { var record = me.store.getAt( idx ); var td = Ext.fly(me.view.getNode( idx )).down('td'), cell, matches, cellHTML; var find = false; while(td) { cell = td.down('.x-grid-cell-inner'); matches = cell.dom.innerHTML.match(me.tagsRe); cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect); // populate indexes array, set currentIndex, and replace wrap matched string in a span cellHTML = cellHTML.replace(me.searchRegExp, function(m) { find = true; if (Ext.Array.indexOf(me.indexes, idx) === -1) { me.indexes.push(idx); } if (me.currentIndex === null) { me.currentIndex = idx; } return '<span class="' + me.matchCls + '">' + m + '</span>'; }); // restore protected tags Ext.each(matches, function(match) { cellHTML = cellHTML.replace(me.tagsProtect, match); }); // update cell html cell.dom.innerHTML = cellHTML; td = td.next(); } if ( ! find ) { //如果该行没有找到需要的结果 me.store.remove( record ); totalCount --; idx --; } else { count ++; } }; // results found if (me.currentIndex !== null) { me.getSelectionModel().select(me.currentIndex); me.statusBar.setStatus({ text: '共找到' + count + '条.', iconCls: 'x-status-valid' }); } } // no results found if (me.currentIndex === null) { me.getSelectionModel().deselectAll(); } // force textfield focus me.textField.focus(); } });

sysLog.json

{ "sysLog": [ { "SYSLOG_ID":"SYSLOG_ID1", "SYSLOG_TYPE":"SYSLOG_TYPE1", "SYSLOG_DESC":"SYSLOG_DESC1", "SYSLOG_KIND":"SYSLOG_KIND1", "SYSLOG_SOURCE":"SYSLOG_SOURCE1", "SYSLOG_CREATETIME":"SYSLOG_CREATETIME1", "SYSLOG_LEV":"SYSLOG_LEV1", "SYSLOG_IP":"SYSLOG_IP1", "SYSMENU_CODE":"SYSMENU_CODE1", "SYSUSER_ID":"SYSUSER_ID1" }, { "SYSLOG_ID":"SYSLOG_ID2", "SYSLOG_TYPE":"SYSLOG_TYPE2", "SYSLOG_DESC":"SYSLOG_DESC2", "SYSLOG_KIND":"SYSLOG_KIND2", "SYSLOG_SOURCE":"SYSLOG_SOURCE2", "SYSLOG_CREATETIME":"SYSLOG_CREATETIME2", "SYSLOG_LEV":"SYSLOG_LEV2", "SYSLOG_IP":"SYSLOG_IP2", "SYSMENU_CODE":"SYSMENU_CODE2", "SYSUSER_ID":"SYSUSER_ID2" }, { "SYSLOG_ID":"SYSLOG_ID3", "SYSLOG_TYPE":"SYSLOG_TYPE3", "SYSLOG_DESC":"SYSLOG_DESC3", "SYSLOG_KIND":"SYSLOG_KIND3", "SYSLOG_SOURCE":"SYSLOG_SOURCE3", "SYSLOG_CREATETIME":"SYSLOG_CREATETIME3", "SYSLOG_LEV":"SYSLOG_LEV3", "SYSLOG_IP":"SYSLOG_IP3", "SYSMENU_CODE":"SYSMENU_CODE3", "SYSUSER_ID":"SYSUSER_ID3" }, { "SYSLOG_ID":"SYSLOG_ID4", "SYSLOG_TYPE":"SYSLOG_TYPE4", "SYSLOG_DESC":"SYSLOG_DESC4", "SYSLOG_KIND":"SYSLOG_KIND4", "SYSLOG_SOURCE":"SYSLOG_SOURCE4", "SYSLOG_CREATETIME":"SYSLOG_CREATETIME4", "SYSLOG_LEV":"SYSLOG_LEV4", "SYSLOG_IP":"SYSLOG_IP4", "SYSMENU_CODE":"SYSMENU_CODE4", "SYSUSER_ID":"SYSUSER_ID4" }, { "SYSLOG_ID":"SYSLOG_ID5", "SYSLOG_TYPE":"SYSLOG_TYPE5", "SYSLOG_DESC":"SYSLOG_DESC5", "SYSLOG_KIND":"SYSLOG_KIND5", "SYSLOG_SOURCE":"SYSLOG_SOURCE5", "SYSLOG_CREATETIME":"SYSLOG_CREATETIME5", "SYSLOG_LEV":"SYSLOG_LEV5", "SYSLOG_IP":"SYSLOG_IP5", "SYSMENU_CODE":"SYSMENU_CODE5", "SYSUSER_ID":"SYSUSER_ID5" }, { "SYSLOG_ID":"SYSLOG_ID6", "SYSLOG_TYPE":"SYSLOG_TYPE6", "SYSLOG_DESC":"SYSLOG_DESC6", "SYSLOG_KIND":"SYSLOG_KIND6", "SYSLOG_SOURCE":"SYSLOG_SOURCE6", "SYSLOG_CREATETIME":"SYSLOG_CREATETIME6", "SYSLOG_LEV":"SYSLOG_LEV6", "SYSLOG_IP":"SYSLOG_IP6", "SYSMENU_CODE":"SYSMENU_CODE6", "SYSUSER_ID":"SYSUSER_ID6" }] }

test_touch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs4(3)——带搜索和操作按钮的表

带搜索和操作按钮的表（这里的问题是，下面由两条框框，不知怎么去掉，浪费不少空间也影响了美观。）点击：修改按钮：将弹出此窗口详细按钮：与修改按钮相同，但保存按钮为不可能状态（即不能保存，只能查看）新增按钮：与修改按钮相同，但里面没有数据带搜索功能的表格已经在前文写过，在此便不再赘述。本文的要点是如何为表格添加对应的弹出窗口。弹出窗口一般由两部分组成，一部分...
复制链接

扫一扫