Ext增删改查

合集下载

增删改查思路及步骤

增删改查思路及步骤增删改查（CRUD）是计算机科学中常用的基本操作，用于对于数据存储系统（例如数据库）中的数据进行增加、删除、修改和查询操作。

以下是增删改查的思路以及一般步骤。

这四个操作是软件开发中最常见和重要的操作之一，对于数据的操作非常关键。

一、增加（Create）：数据增加是指向数据库中添加数据。

常见的步骤如下：1.设计数据表结构：创建一个表格或者类来存储新数据，并确定字段类型、长度和关系。

2. 编写添加数据的代码：使用编程语言（如SQL、Python等）编写代码，来向数据库中添加数据。

3.执行代码：运行代码，将数据添加到数据库中。

二、删除（Delete）：数据删除是指从数据库中删除数据。

常见的步骤如下：1.根据需求确定删除的条件：确定要删除的数据的特定条件，如ID、日期等。

2.编写删除数据的代码：使用编程语言编写代码，将符合条件的数据从数据库中删除。

3.执行代码：运行代码，删除数据库中的数据。

三、修改（Update）：数据修改是指更新数据库中的数据，使其与最新的需求相适应。

常见的步骤如下：1.确定需要修改的数据：根据需求确定要修改的数据，并确定具体的修改内容。

2.编写修改数据的代码：使用编程语言编写代码，根据需求修改数据库中的数据。

3.执行代码：运行代码，将修改后的数据更新到数据库中。

四、查询（Retrieve）：数据查询是指从数据库中获取数据。

1.确定查询的条件：根据需求确定查询的条件，如ID、日期、关键词等。

2.编写查询代码：使用编程语言编写代码，根据查询条件从数据库中获取数据。

3.执行查询：运行代码，执行查询并获得结果。

以上是增删改查的基本思路与步骤。

在现实的软件开发中，通常还会包含一些额外的处理，如输入验证、错误处理、事务处理等。

不同的编程语言和数据库系统可能有所不同的实现方式，但其基本概念和步骤大致相同。

在实际使用时，我们可以根据具体需求灵活应用以上步骤。

例如，对于数据库的设计，可以根据需要创建多个表格，并在表与表之间建立适当的关系。

ExtJS模块案例（增删改查）

ExtJS模块案例（增删改查）Ext.QuickTips.init();Ext.onReady(function () {//终端类型下拉列表数据源var comboStore = new Ext.data.JsonStore({url: '/AccessMaintenanceHandler/GetResListByResParent.ashx',root: 'Table',totalProperty: 'result',fields: ['Res_Name', 'Res_Id'],autoLoad: true});comboStore.on('beforeload', function () {var params = comboStore.baseParams;Ext.apply(params, {ParentCode: '8b4010451db44edfa7f7e1f9e6f20e12' //终端类型的Code});});comboStore.on('load', function (mystore, rds, op) {var newRecord = new mystore.recordType({ Res_Name: '全部', Res_Id: "" });comboStore.insert(0, newRecord);Ext.getCmp('TerminalType').setValue(""); //默认加载全部});//终端类型var DevicecomboStore = new Ext.data.JsonStore({url: '/AccessMaintenanceHandler/GetResListByResParent.ashx',root: 'Table',totalProperty: 'result',fields: ['Res_Name', 'Res_Id'],autoLoad: true});DevicecomboStore.on('beforeload', function () {var params = DevicecomboStore.baseParams;Ext.apply(params, {ParentCode: '8b4010451db44edfa7f7e1f9e6f20e12' //终端类型的Code});});var formPanel = new Ext.FormPanel({frame: true,title: '端⼝台账信息维护',layout: 'form',height: 300,autoWidth: true,id: 'formPanel',autoScroll: true,items: [{layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'combo',fieldLabel: '终端类型',store: comboStore,typeAhead: false,editable: false,mode: 'local',triggerAction: 'all',id: 'TerminalType',displayField: 'Res_Name',valueField: 'Res_Id'}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备序列号',emptyText: '设备序列号',id: 'SearchEquipmentCode', //设备编码width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备名称',emptyText: '设备名称',id: 'SearchEquipmentName', //设备名称width: 200}]}]}]});//多选框var ckModel = new Ext.grid.CheckboxSelectionModel({singleSelect: false});//数据源var PortLedgerStore = new Ext.data.JsonStore({url: '/PortLedgerInfoHandler/SelectAll.ashx',root: 'Table',totalProperty: 'result',fields: [{ name: 'ID' },{ name: 'SAPCode' },{ name: 'IsEnable' },{ name: 'RowNumber' },{ name: 'Brand' },{ name: 'PortOffice' },{ name: 'EquipmentCode' },{ name: 'Address' },{ name: 'CabinetNumber' },{ name: 'SwitchIP' },{ name: 'SwitchNumber' },{ name: 'EquipmentName' },{ name: 'PortNumber' },{ name: 'SAPCode' },{ name: 'TPNumber' },{ name: 'TMacAddress' },{ name: 'VLAN' },{ name: 'TerminalType' },{ name: 'Res_Name' },{ name: 'TerminalAddress' },{ name: 'Remark' },{ name: 'Model' }],autoLoad: true});//加载后的条件PortLedgerStore.on('beforeload', function () {var params = PortLedgerStore.baseParams;Ext.apply(params, {TerminalType: Ext.getCmp('TerminalType').getValue(), //获取下拉框的类型ID EquipmentCode: Ext.getCmp('SearchEquipmentCode').getValue(), //设备序列号 EquipmentName: Ext.getCmp('SearchEquipmentName').getValue(), //设备名称limit: 20})});//端⼝台账的Gridvar PortLedgerGrid = new Ext.grid.GridPanel({id: 'PortLedgerGrid',region: "center",plit: true,border: true,store: PortLedgerStore,margins: '5 5 5 5',animCollapse: false,enableColumnMove: false,enableHdMenu: false,trackMouseOver: false,loadMask: { msg: '正在加载，请稍等...' },cm: new Ext.grid.ColumnModel([ckModel,{ header: 'ID', dataIndex: 'ID', width: 40, hidden: true },{ header: '序号', dataIndex: 'RowNumber', width: 40},{ header: '品牌', dataIndex: 'Brand', width: 60 },{ header: '型号', dataIndex: 'Model', width: 80 },{ header: '设备序列号', dataIndex: 'EquipmentCode', width: 80 },{ header: '设备位置', dataIndex: 'Address', width: 80 },{ header: '交换机IP地址', dataIndex: 'SwitchIP', width: 80 },{ header: '机柜号', dataIndex: 'CabinetNumber', width: 80 },{ header: '交换机序号', dataIndex: 'SwitchNumber', width: 80 },{ header: '设备名称', dataIndex: 'EquipmentName', width: 80 },{header: '端⼝号', dataIndex: 'PortNumber', width: 80 },{ header: '端⼝办公室', dataIndex: 'PortOffice', width: 80 },{ header: '终端端⼝号', dataIndex: 'TPNumber', width: 80 },{ header: '终端MAC地址', dataIndex: 'TMacAddress', width: 80 },{ header: 'VlAN', dataIndex: 'VLAN', width: 80 },{ header: '终端类型', dataIndex: 'Res_Name', width: 80 },{ header: '终端位置', dataIndex: 'TerminalAddress', width: 80 },{ header: '备注', dataIndex: 'Remark', width: 100 }]),bbar: new Ext.PagingToolbar({bodyStyle: "background-color:#DEECFD;padding:10 0 10 10",pageSize: 20, //设置每页记录条数store: PortLedgerStore,displayInfo: true,prevText: '上⼀页',nextText: '下⼀页',refreshText: '刷新',displayMsg: '显⽰第 {0} 条到 {1} 条记录，⼀共 {2} 条',emptyMsg: "没有记录",lastText: '最后⼀页',firstText: '第⼀页',beforePageText: '当前页',afterPageText: '共{0}页'}),tbar: ["->", '<a href="/PluginsFor2/ProcessWeb/Page/DownLoadFileTemplate/DownLoadFileTemplate.aspx?id=PortLedgerInfo" target=\"_blank\">下载模板</a>',{xtype: 'button',text: 'Excel导⼊',id: 'ReadExcel',name: 'ReadExcel',iconCls: 'imporicont',width: 60,handler: function () {//导⼊Excelvar ImportExcel = null;if (!!ImportExcel) {ImportExcel.destroy();}ImportExcel.open();ImportExcel.on('importsuccess', function (form, action) {var result = action.result.success;var tip = action.result.result;if (result == 'true') {PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20} }); Ext.Msg.alert('提⽰', tip);}else {Ext.Msg.alert('提⽰', tip);}});}}, "-", {xtype: 'button',text: 'Excel导出',id: 'ExportExcel', //name: 'ExportExcel',iconCls: 'zengjia',width: 60,handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections(); ExportExcel(); //调⽤导出⽅法}}, "-", {xtype: 'button',text: '查询',name: 'Search',id: 'Search',iconCls: 'searchicon',width: 60,handler: function () {PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20} });}}, "-", {xtype: 'button',text: '重置',id: 'Reset',name: 'Reset',iconCls: 'deleteicon',width: 60,handler: function () {Ext.getCmp('TerminalType').setValue('');Ext.getCmp('SearchEquipmentCode').setValue('');Ext.getCmp('SearchEquipmentName').setValue('');PortLedgerGrid.getStore().load({ params: { start: 0, limit: 20} });}}, "-", {xtype: 'button',text: '添加',id: 'add',name: 'add',iconCls: 'addicon',width: 60,handler: function () {var title = "新增";GridUpdate("Add", title);}}, "-", {xtype: 'button',text: '编辑',id: 'edit',name: 'edit',iconCls: 'editicon',width: 60,handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections();Ext.Msg.alert('提⽰', ' 请选择⼀条信息！');} else if (record.length == "1") {var title = "修改";GridUpdate("Update", title);} else {Ext.Msg.alert('提⽰', '只允许选中⼀条数据！');}}}, "-", {xtype: 'button',text: '删除',id: 'delete',name: 'delete',iconCls: 'deleteicon',width: 60,handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections(); //grid选中⾏ var PortNumber = record[0].data.PortNumber;var SAPCode = record[0].data.SAPCode;if (record.length == 0) {Ext.Msg.alert('提⽰', '请选择⼀条信息！');} else if (PortNumber != null && SAPCode != "") {Ext.Msg.alert('提⽰', '端⼝已被占⽤,⽆法操作！');} else {Remark();}}}],sm: ckModel});//删除show出的备注窗体function Remark() {var GridRemarkPanel = new Ext.form.FormPanel({border: false,frame: true,layout: 'form',autoWidth: true,border: false,width: 300,border: false,labelWidth: 70,items: [{xtype: 'textarea',fieldLabel: '备注',emptyText: '备注',id: 'GRemark',name: 'GRemark',width: 260,height: 100}]});var GridRemarkWindow = new Ext.Window({title: '删除',width: 400,modal: true,resizable: false,items: [GridRemarkPanel],buttonAlign: 'center',buttons: [{width: 100,text: '确认',handler: function () {var record = PortLedgerGrid.getSelectionModel().getSelections(); //grid选中⾏ var GRemark = Ext.getCmp("GRemark").getValue();if (GRemark == "") {Ext.MessageBox.alert('提⽰', '备注必填!');return false;Ext.Msg.confirm(' 提⽰', '确定要删除吗？', function (btn) {if (btn == "yes") {var ID = "";for (var i = 0; i < record.length; i++) {ID += record[i].data.ID + ','; //多⾏删除}var detail = Ext.getCmp("GRemark").getValue();var PortNumber = record[0].data.PortNumber;Ext.Ajax.request({url: '/PortLedgerInfoHandler/DeleteAllByPID.ashx',method: 'POST',params: {ID: ID},success: function (response) {Ext.Msg.alert('提⽰', '删除成功!');Ext.getCmp("PortLedgerGrid").getStore().reload();GridRemarkWindow.close();},failure: function (response) {Ext.Msg.alert("提⽰", '删除失败!');GridRemarkWindow.close();}});}});}}, {width: 100,text: '取消',handler: function () {GridRemarkWindow.close();}}]});GridRemarkWindow.show();}//Excel导出function ExportExcel() {var LoginEmp_Id = "";var myCheckboxItems = [];var model = Ext.getCmp("PortLedgerGrid").colModel;for (var i = 1; i < Ext.getCmp("PortLedgerGrid").colModel.config.length; i++) { if (model.config[i].dataIndex != "ID")myCheckboxItems.push({boxLabel: model.config[i].header,name: "ExportInfo",id: model.config[i].dataIndex,checked: true,inputValue: i});}var GridExportPanel = new Ext.form.FormPanel({height: 280,border: false,id: 'ExportPanel',frame: true,layout: 'column',autoWidth: true,items: [{xtype: 'checkboxgroup',id: 'ExportColumnModel',columns: 5,vertical: true,items: myCheckboxItems}]});title: '导出列选择',width: 550,height: 260,modal: true,resizable: false,items: [GridExportPanel],buttonAlign: 'center',buttons: [{width: 100,text: '确认',handler: function () {var itcIds = [];var cbgItem = Ext.getCmp('ExportPanel').findById('ExportColumnModel').items;var exportFields = '<root>'for (var i = 0; i < cbgItem.length; i++) {if (cbgItem.itemAt(i).checked) {if (cbgItem.itemAt(i).checked == "ID") {continue;}exportFields += "<row><headerText>" + cbgItem.itemAt(i)["boxLabel"] + "</headerText><columnName>" + cbgItem.itemAt(i)["id"] + "</columnName></row>";}}exportFields += '</root>';var baseParams = "";var params = "";var records = Ext.getCmp('PortLedgerGrid').getSelectionModel().getSelections();if (records.length > 0) {for (var i = 0; i < records.length; i++) {var ID = ""; //绑定的列名if (records[i].data.ID != null) {ID = records[i].data.ID;}var RowNumber = "";if (records[i].data.RowNumber != null) {RowNumber = records[i].data.RowNumber;}var Brand = "";if (records[i].data.Brand != null) {Brand = records[i].data.Brand;}var Model = "";if (records[i].data.Model != null) {Model = records[i].data.Model;}var EquipmentCode = "";if (records[i].data.EquipmentCode != null) {EquipmentCode = records[i].data.EquipmentCode;}var Address = "";if (records[i].data.Address != null) {Address = records[i].data.Address;}var CabinetNumber = "";if (records[i].data.CabinetNumber != null) {CabinetNumber = records[i].data.CabinetNumber;}var SwitchIP = "";if (records[i].data.SwitchIP != null) {SwitchIP = records[i].data.SwitchIP;}var PortOffice = "";if (records[i].data.PortOffice != null) {PortOffice = records[i].data.PortOffice;}var SwitchNumber = "";if (records[i].data.SwitchNumber != null) {var EquipmentName = "";if (records[i].data.EquipmentName != null) {EquipmentName = records[i].data.EquipmentName;}var PortNumber = "";if (records[i].data.PortNumber != null) {PortNumber = records[i].data.PortNumber;}var TPNumber = "";if (records[i].data.TPNumber != null) {TPNumber = records[i].data.TPNumber;}var TMacAddress = "";if (records[i].data.TMacAddress != null) {TMacAddress = records[i].data.TMacAddress;}var VLAN = "";if (records[i].data.VLAN != null) {VLAN = records[i].data.VLAN;}var Res_Name = "";if (records[i].data.Res_Name != null) {Res_Name = records[i].data.Res_Name;}var TerminalAddress = "";if (records[i].data.TerminalAddress != null) {TerminalAddress = records[i].data.TerminalAddress;}var Remark = "";if (records[i].data.Remark != null) {Remark = records[i].data.Remark;}baseParams += "<row>" +"<RowNumber>" + RowNumber + "</RowNumber>" +"<Model>" + Model + "</Model>" +"<Brand>" + Brand + "</Brand>" +"<EquipmentCode>" + EquipmentCode + "</EquipmentCode>" +"<Address>" + Address + "</Address>" +"<CabinetNumber>" + CabinetNumber + "</CabinetNumber>" +"<SwitchIP>" + SwitchIP + "</SwitchIP>" +"<PortOffice>" + PortOffice + "</PortOffice>" +"<SwitchNumber>" + SwitchNumber + "</SwitchNumber>" +"<EquipmentName>" + EquipmentName + "</EquipmentName>" +"<PortNumber>" + PortNumber + "</PortNumber>" +"<TPNumber>" + TPNumber + "</TPNumber>" +"<TMacAddress>" + TMacAddress + "</TMacAddress>" +"<VLAN>" + VLAN + "</VLAN>" +"<Res_Name>" + Res_Name + "</Res_Name>" +"<TerminalAddress>" + TerminalAddress + "</TerminalAddress>" +"<Remark>" + Remark + "</Remark>" +"</row>";}params = { xmlParams: baseParams };monExportExcel("/PluginsFor2/ProcessWeb/Page/ExportExcel/ExportExcel.aspx", params, "monPluginsHandler.dll", "monHandler", "ExportInfoByGridInfo", exportFields);ExportWindow.close();} else {baseParams = "<TerminalType>" + Ext.getCmp('TerminalType').getValue() + "</TerminalType>" + //设备类型 "<EquipmentCode>" + Ext.getCmp('SearchEquipmentCode').getValue() + "</EquipmentCode>" + //设备序列号 "<EquipmentName>" + Ext.getCmp('SearchEquipmentName').getValue() + "</EquipmentName>"; //设备名称; params = { xmlParams: baseParams };monExportExcel("/PluginsFor2/ProcessWeb/Page/ExportExcel/ExportExcel.aspx", params, "HC.ModelPluginsHandler.dll", "HY.HttpHandlers.PortLedgerInfoHandler", "ExportInfoByGridInfo", exportFields);ExportWindow.close();}}text: '取消',handler: function () {ExportWindow.close();}}]})ExportWindow.show();}//⿏标悬浮窗PortLedgerGrid.on('render', function (grid) {var view = Ext.getCmp('PortLedgerGrid').getView();Ext.getCmp('PortLedgerGrid').tooltip = new Ext.ToolTip({target: view.mainBody,delegate: '.x-grid3-cell',trackMouse: true,dismissDelay: 20000,renderTo: document.body,listeners: {beforeshow: function updateTipBody(tip) {var rowIndex = view.findRowIndex(tip.triggerElement);var columnIndex = view.findCellIndex(tip.triggerElement);var fieldName = Ext.getCmp('PortLedgerGrid').getColumnModel().getDataIndex(columnIndex); //获得列名(字段名) var text = "";text = Ext.getCmp('PortLedgerGrid').store.getAt(rowIndex).get(fieldName);if (text != null && text != "" && text != "-")tip.body.dom.innerHTML = text;elsereturn false;}}})});//新增、修改function GridUpdate(type, title) {var selectedRows = Ext.getCmp('PortLedgerGrid').getSelectionModel().getSelections();if(selectedRows!=''){var TerminalTypes= selectedRows[0].data.TerminalType;}else{var TerminalTypes = '';}var GridUpdatePanel = new Ext.form.FormPanel({border: false,frame: true,layout: 'form',autoWidth: true,border: false,width: 900,border: false,labelWidth: 70,items: [{layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '端⼝号',emptyText: '端⼝号',id: 'PortNumber',name: 'PortNumber',width: 200}]}, {layout: 'form',labelWidth: 80,xtype: 'textfield',fieldLabel: '端⼝办公室',emptyText: '端⼝办公室',id: 'PortOffice',name: 'PortOffice',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '终端端⼝号',emptyText: '终端端⼝号',id: 'TPNumber',name: 'TPNumber',width: 200}]}, { layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '终端MAC地址', emptyText: '终端MAC地址', id: 'TMacAddress',name: 'TMacAddress',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: 'VLAN',emptyText: 'VLAN', //型号id: 'VLAN',name: 'VLAN',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'combo',fieldLabel: '终端类型',store: DevicecomboStore, typeAhead: false,editable: false,mode: 'local',width: 200,triggerAction: 'all',id: 'Equipment_TypeId',displayField: 'Res_Name', valueField: 'Res_Id',value:TerminalTypes}]}, { layout: 'column',items: [{labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '终端位置',emptyText: '终端位置',id: 'TerminalAddress',name: 'TerminalAddress',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '机柜号',emptyText: '机柜号',id: 'CabinetNumber',name: 'CabinetNumber',width: 200}]}, {layout: 'form',labelWidth: 80,width: 260,items: [{xtype: 'textfield',fieldLabel: '设备SAP编号',emptyText: '设备SAP编号',id: 'SAPCode',name: 'SAPCode',width: 175}]}, {layout: 'form',width: 40,items: [{xtype: 'button',text: '...',id: 'show',name: 'show',width: 25,//disabled: true,handler: function () { //弹出设备⼦页var EquipmentSAPCodeWin = null;if (!!EquipmentSAPCodeWin) {EquipmentSAPCodeWin.destroy();}EquipmentSAPCodeWin = new HC.EquipmentSAPCode({checkModel: true,UserId: "", //使⽤⼈IDStatus: 'ffe4914c2c0942beab9250ece3950909' //使⽤状态：3申领及借⽤，4查询全部，其他类别，传递对应资源类型code});EquipmentSAPCodeWin.open();EquipmentSAPCodeWin.on('selectcomplete', function (record) {if (record == '' || record == null) {Ext.Msg.alert('提⽰', '请选择⼀条信息!');return false;}var EquipmentTypeName = record[0].data.EquipmentTypeName; //设备类型var EquipmentCode = record[0].data.EquipmentCode; //设备序列号Ext.getCmp("Model").setValue(record[0].data.Model); //设备型号Ext.getCmp("Brand").setValue(record[0].data.Brand); //设备品牌Ext.getCmp("Address").setValue(record[0].data.Address); //设备位置xExt.getCmp("SAPCode").setValue(record[0].data.SAPCode); //设备SAPExt.getCmp("EquipmentNamere").setValue(record[0].data.EquipmentName); //设备名称 Ext.getCmp("SwitchNumber").setValue(record[0].data.SwitchNumber);//交换机序号Ext.getCmp("SwitchIP").setValue(record[0].data.SwitchIP); //交换机Ip地址EquipmentSAPCodeWin.closeWin();});}}]}, {layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '交换机IP地址',emptyText: '交换机IP地址',id: 'SwitchIP',name: 'SwitchIP',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '交换机序号',emptyText: '交换机序号',id: 'SwitchNumber',name: 'SwitchNumber',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '品牌',emptyText: '品牌',id: 'Brand',name: 'Brand',width: 200}]}, {layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '型号',emptyText: '型号',id: 'Model',name: 'Model',width: 200}]}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备位置',emptyText: '设备位置',id: 'Address',name: 'Address',width: 200}]}, {layout: 'form',labelWidth: 80,width: 300,items: [{xtype: 'textfield',fieldLabel: '设备名称',emptyText: '设备名称',name: 'EquipmentName',id: 'EquipmentNamere',width: 200}]}, {layout: 'column',items: [{layout: 'form',labelWidth: 80,width: 900,items: [{xtype: 'textarea',fieldLabel: '备注',emptyText: '备注',id: 'Remark',name: 'Remark',width: 800,height: 170}]}]}]}]});var GridUpdateWindow = new Ext.Window({title: title,width: 1000,modal: true,resizable: false,items: [GridUpdatePanel],buttonAlign: 'center',buttons: [{width: 100,text: '确认',handler: function () {if (type == "Add") {var PID = "";//同步var PortNumber = Ext.getCmp("PortNumber").getValue();var conn = Ext.lib.Ajax.getConnectionObject().conn;conn.open("POST", '/PortLedgerInfoHandler/SelectRepeat.ashx?PortNumber=' + PortNumber, false); conn.send(null);obj = conn.responseText == '' ? {} : Ext.decode(conn.responseText);if (obj.success == "false") {Ext.Msg.alert('提⽰', '端⼝号唯⼀！');return;}} else if (type == "Update") {var record = Ext.getCmp('PortLedgerGrid').getSelectionModel().getSelections();if (record.length == "0") {Ext.Msg.alert('提⽰', ' 请选择⼀条信息！');} else {PID = record[0].data.ID;}}var EquipmentCode = EquipmentCode;var PortNumber = Ext.getCmp("PortNumber").getValue();var TPNumber = Ext.getCmp("TPNumber").getValue();var TMacAddress = Ext.getCmp("TMacAddress").getValue();var PortOffice = Ext.getCmp("PortOffice").getValue();var VLAN = Ext.getCmp("VLAN").getValue();var TerminalAddress = Ext.getCmp("TerminalAddress").getValue(); var CabinetNumber = Ext.getCmp("CabinetNumber").getValue();var SwitchNumber = Ext.getCmp("SwitchNumber").getValue();var SwitchIP = Ext.getCmp("SwitchIP").getValue();var TerminalType = Ext.getCmp("Equipment_TypeId").getValue(); var SAPCode = Ext.getCmp("SAPCode").getValue();var Brand = Ext.getCmp("Brand").getValue();var Model = Ext.getCmp("Model").getValue();var Address = Ext.getCmp("Address").getValue();var EquipmentName = Ext.getCmp("EquipmentNamere").getValue(); var Remark = Ext.getCmp("Remark").getValue();if (PortNumber == "") {Ext.MessageBox.alert('提⽰', '端⼝号不能为空!');return false;}if (TPNumber == "") {Ext.MessageBox.alert('提⽰', '终端端⼝号不能为空!');return false;}if (TMacAddress == "") {Ext.MessageBox.alert('提⽰', 'MAC地址不能为空!');return false;}if (VLAN == "") {Ext.MessageBox.alert('提⽰', 'VLAN不能为空!');return false;}if (TerminalAddress == "") {Ext.MessageBox.alert('提⽰', '终端位置不能为空!');return false;}if (CabinetNumber == "") {Ext.MessageBox.alert('提⽰', '机柜号不能为空!');return false;}if (SwitchNumber == "") {Ext.MessageBox.alert('提⽰', '交换机序号不能为空!');return false;}if (TerminalType == "") {Ext.MessageBox.alert('提⽰', '类型不能为空!');return false;}if (SwitchIP == "") {Ext.MessageBox.alert('提⽰', '交换机IP地址不能为空!');return false;}if (Remark == "") {Ext.MessageBox.alert('提⽰', '备注必填!');return false;}Ext.Msg.confirm('提⽰', '确认保存？', function (btn) {if (btn == 'yes') {Ext.Ajax.request({url: '/PortLedgerInfoHandler/InsertUpdate.ashx',method: 'POST',params: {PID: PID,VLAN: VLAN,Brand: Brand,Model: Model,。

ext与php增删查改

<html><head>//搜索暂时没做，数据是出来了，但是确没法显示<link rel="stylesheet"type="text/css"href="./js/resources/css/ext-all.css"/><script type="text/javascript"src="./js/jquery.js"></script><script type="text/javascript"src="./js/ext-base.js"></script><script type="text/javascript"src="./js/ext-all.js"></script><script type="text/javascript"src="./js/ext-lang-zh_CN-min.js"></script><script type="text/javascript">Ext.QuickTips.init(); //初始化快速提示对象function test() {Ext.Msg.alert('title','test-yii-ext');}function renderSex(value) {if (value == 'male') {return "<span style='color:red;font-weight:bold;'>红男</span><img src='./images/male.jpg' />";} else {return "<span style='color:green;font-weight:bold;'>绿女</span><img src='./images/female.png' />";}}function init(){//1、创建url访问类。

Extjs 4.2 Grid增删改及后台交互

Posted 周二, 07/02/2013 - 12:20 by admin上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。

苦于抽不出时间，一直拖到现在。

不得不说，Extjs确实很强大，新版的Neptune 风格也很入我眼，但毕竟没怎么用过，第一次用，也不敢上来就搞什么自定义组件，也就纯粹的model+store+panel声明式创建表格了。

抛开分页，抛开排序，今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。

发现这种方式挺不错的，故而分享下。

代码Example如下：定义Modelview sourceprint?01.Ext.define('Person', {02.extend: 'Ext.data.Model',03.fields: [{name: 'id',04.type: 'int',eNull: true06.}, 'email', 'first', 'last'],07.validations: [{ type: 'length',08.field: 'email',09.min: 110.}, {type: 'length',11.field: 'first',12.min: 113.}, {type: 'length',14.field: 'last',15.min: 116.}]17.});构造store、创建panelview sourceprint?001.var store = Ext.create('Ext.data.Store', {002.autoLoad: true,003.autoSync: true,004.model: 'Person',005.proxy: {006.type: 'ajax',007.api: {008.read: 'url/read',//查询009.create: 'url/create',//创建010.update: 'url/update',//更新011.destroy: 'url/destroy'//删除012.},013.reader: {014.type: 'json',015.root: 'data'016.},017.writer: {018.type: 'json'019.}020.},021.listeners: {022.write: function(store, operation){023.var record = operation.getRecords()[0], = Ext.String.capitalize(operation.action), 025.verb;026.027.028.if(name == 'Destroy') {029.record = operation.records[0];030.verb = 'Destroyed';031.} else{032.verb = name + 'd';033.}034.Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));035.036.}037.}038.});039.040.var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {041.listeners: {042.cancelEdit: function(rowEditing, context) {043.// Canceling editing of a locally added, unsaved record: remove it044.if(context.record.phantom) {045.store.remove(context.record);046.}047.}048.}049.});050.051.var grid = Ext.create('Ext.grid.Panel', {052.renderTo: document.body,053.plugins: [rowEditing],054.width: 400,055.height: 300,056.frame: true,057.title: 'Users',058.store: store,059.iconCls: 'icon-user',060.columns: [{061.text: 'ID',062.width: 40,063.sortable: true,064.dataIndex: 'id'065.}, {066.text: 'Email',067.flex: 1,068.sortable: true,069.dataIndex: 'email',070.field: {071.xtype: 'textfield'072.}073.}, {074.header: 'First',075.width: 80,076.sortable: true,077.dataIndex: 'first',078.field: {079.xtype: 'textfield'080.}081.}, {082.text: 'Last',083.width: 80,084.sortable: true,085.dataIndex: 'last',086.field: {087.xtype: 'textfield'088.}089.}],090.dockedItems: [{091.xtype: 'toolbar',092.items: [{093.text: 'Add',094.iconCls: 'icon-add',095.handler: function(){096.// empty record097.store.insert(0, new Person());098.rowEditing.startEdit(0, 0);099.}100.}, '-', {101.itemId: 'delete',102.text: 'Delete',103.iconCls: 'icon-delete',104.disabled: true,105.handler: function(){106.var selection =grid.getView().getSelectionModel().getSelection()[0]; 107.if(selection) {108.store.remove(selection);109.}110.}111.}]112.}]113.});114.grid.getSelectionModel().on('selectionchange', function(selModel, selections){115.grid.down('#delete').setDisabled(selections.length === 0);很简单，使用api的方式，包括有增删查改，在前台的操作都会被extjs记录下来，再执行sync 的时候就可以自动根据状态请求相应的url了。

ext增删改查

第一个版本Ext+struts2 +struts2 json-plugin 增删查改完成（还没有分页，不能批量删，修改之后又重新查一次）Action:public String findAll(){//pager=mdao.findAll("from Member",currentPage,pagerMethod);// mlist=pager.getList();mlist=mdao.findAll();try {String json=JSONUtil.serialize( mlist);System.out.println(json);} catch (JSONException e) {// TODO Auto-generated catch blocke.printStackTrace();}super.success=true;return SUCCESS;}public String findOne(){mem=mdao.findById(mem.getId());success=true;List ll=new ArrayList();ll.add(mem);setMlist(ll);return SUCCESS;}public String delete(){mdao.delete(mdao.findById(mem.getId()));success=true;return SUCCESS;}public String save(){mdao.save(mem);success=true;return SUCCESS;}public String modify(){mdao.attachDirty(mem);success=true;return SUCCESS;}public String saveOrUpdate(){if(mem.getId()==null)return save();else return modify();}Struts2 Xml:<action name="member_*"class="spring.memberAction"method="{1}"> <result type="json"><param name="mlist">mlist</param><param name="ignoreHierarchy">false</param></result></action>Js:Ext.BLANK_IMAGE_URL = 'js/ext-2.3/resources/images/default/s.gif'; Ext.onReady(function(){Ext.QuickTips.init();var form1;_jsonReader读取后台数据var _jsonReader = new Ext.data.JsonReader( {root : 'mlist'}, [ {name : 'id',mapping : 'id',type : 'int'}, {name : 'uname',mapping : 'uname'}, {name : 'password',mapping : 'password'},{name : 'address',mapping : 'address'}]);制列名var cm_member = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), { header : '用户ID',width : 90,sortable : true,dataIndex : 'id',editor : new Ext.form.TextField({allowBlank : false,maxLength : 50}) }, {header : '联系人',width : 85,sortable : true,dataIndex :'uname',resizable : false,editor : new Ext.form.TextField({allowBlank : false,maxLength : 20}) }, {header : 'password',width : 85,sortable : true,dataIndex :'password',resizable : false,editor : new Ext.form.TextField({allowBlank : false,maxLength : 20}) }, {header : '地址',id : 'address',sortable : true,dataIndex : 'address', editor : new Ext.form.TextField({allowBlank : false,maxLength : 200}) }]);cm_member.defaultSortable = true;加载数据Ext.data.Storevar ds_member = new Ext.data.Store({proxy: newExt.data.HttpProxy({url:'member_findAll.do'}),//调用的动作reader:_jsonReader});GridPanel 存放数据var grid_member = new Ext.grid.GridPanel({collapsible : true,// 是否可以展开title : '用户管理',id:"grid_member",el:"example-grid",ds : ds_member,store: ds_member,columns: [{header: "id", width: 120, dataIndex: 'id', sortable: true},{header: "uname", width: 120, dataIndex: 'uname', sortable: true},{header: '密码', width: 120,dataIndex: 'password',sortable:true},{header: '地址', width: 120,dataIndex: 'address', sortable:true}],width:550,height:500,// 添加分页工具栏bbar : new Ext.PagingToolbar( {pageSize : 10,store : ds_member,displayInfo : true,//是否显示下面的信息displayMsg : '显示 {0}-{1}条 / 共 {2} 条',emptyMsg : "无数据。

ExtJS增删改查,分页功能(精)

ExtJs:代码挺多的，部分功能同事帮实现<%@ page language='java' contentType='text/html; charset=utf-8'pageEncoding='utf-8'%>Action:增删除改查分页全在里面。

package com.wys.web;import java.util.List; import java.util.Random;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.apache.struts2.interceptor.ServletRequestAware; import org.apache.struts2.interceptor.ServletResponseAware; import com.opensymphony.xwork2.ActionSupport;public class UserCRUDAction extends ActionSupport implements ServletRequestAware, ServletResponseAware {private HttpServletResponse response; private HttpServletRequest request;private Integer empno; private String ename; private String job; private Integer sal; private String start; private String limit;public String getStart( { return start;}public void setStart(String start { this.start = start; }public String getLimit( { return limit; }public void setLimit(String limit { this.limit = limit;}public Integer getEmpno( { return empno; }public void setEmpno(Integer empno { this.empno = empno; }public String getEname( { return ename; }public void setEname(String ename { this.ename = ename; }public String getJob( { return job; }public void setJob(String job { this.job = job; }public Integer getSal( { return sal;}public void setSal(Integer sal { this.sal = sal; }public void setServletResponse(HttpServletResponse response { this.response=response;}public void setServletRequest(HttpServletRequest request { this.request=request;}public String userList(throws Exception{if(start==null||("".equals(start{this.start = "0"; }if(limit==null||("".equals(limit{this.limit = "10"; }UserDAO dao=new UserDAOImpl(;List users=dao.query(ename,start,limit; int count = dao.getCount(ename; System.out.println(count;JSONArray js=JSONArray.fromObject(users;StringBuffer sb = new StringBuffer("{total:".append(count.append(",results:".append(js.toString(.append("}";response.setHeader("Cache-Control", "no-cache"; response.setContentType("text/json;charset=UTF-8";response.getWriter(.write(sb.toString(;return null;}public String addUser(throws Exception{ User u=new User(; u.setEmpno(new Random(.nextInt(1000; u.setEname(ename;u.setJob(job;u.setSal(sal;u.setDeptno(20;UserDAO dao=new UserDAOImpl(; dao.addUser(u;response.reset(;response.getWriter(.write("{success:true}";return null; }public String updateUser(throws Exception{ User u=new User(; u.setEmpno(empno;u.setEname(ename;u.setJob(job;u.setSal(sal;UserDAO dao=new UserDAOImpl(; dao.updateUser(u;response.reset(;response.getWriter(.write("{success:true}";return null; }public String delUser(throws Exception{ UserDAO dao=new UserDAOImpl(; dao.delUser(empno;response.reset(;response.getWriter(.write("{success:true}";return null; }}DAO:package com.wys.web;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.util.ArrayList;import java.util.List;public class UserDAOImpl implements UserDAO { public List query(String ename,String start,String limit {Connection con=null;PreparedStatement stmt=null;ResultSet rs=null;List users=new ArrayList (;//stmt=con.prepareStatement("select empno,ename,job from (select empno,ename,job,rownum r from emp where rownum =?";int min=Integer.parseInt(start+1;int max=min+Integer.parseInt(limit;StringBuffer sql = new StringBuffer("select empno,ename,job,sal,deptno from (select empno,ename,job,sal,deptno,rownum r from emp where 1=1 ";if(ename!=null&&!("".equals(ename.trim({sql.append(" and ename like '%"+ename.trim(+"%'";}sql.append(" and rownum<"+max+" where r>="+min;System.out.println(sql;try{con=DbUtil.getConnection(;stmt=con.prepareStatement(sql.toString(;rs=stmt.executeQuery(;while(rs.next({User u=new User(;u.setEmpno(rs.getInt("empno";u.setEname(rs.getString("ename";u.setJob(rs.getString("job";u.setSal(rs.getInt("sal";u.setDeptno(rs.getInt("deptno";users.add(u;}return users;}catch(Exception e{e.printStackTrace(;}finally{}return null; }public void addUser(User u { Connection con=null; PreparedStatement stmt=null;try{con=DbUtil.getConnection(;stmt=con.prepareStatement("insert into emp(empno,ename,job,sal,deptno values(?,?,?,?,?";stmt.setInt(1, u.getEmpno(;stmt.setString(2, u.getEname(;stmt.setString(3, u.getJob(;stmt.setInt(4, u.getSal(;stmt.setInt(5, u.getDeptno(;stmt.executeUpdate(;}catch(Exception e{e.printStackTrace(;}finally{}}public void updateUser(User u { Connection con=null; PreparedStatement stmt=null; try{con=DbUtil.getConnection(;stmt=con.prepareStatement("update emp set ename=?,job=?,sal=? where empno=?";stmt.setString(1, u.getEname(;stmt.setString(2, u.getJob(;stmt.setInt(3,u.getSal(;stmt.setInt(4, u.getEmpno(;stmt.executeUpdate(;}catch(Exception e{e.printStackTrace(;}finally{}}public void delUser(Integer empno { Connection con=null;PreparedStatement stmt=null;try{con=DbUtil.getConnection(;stmt=con.prepareStatement("delete from emp where empno=?";stmt.setInt(1, empno;stmt.executeUpdate(;}catch(Exception e{e.printStackTrace(;}finally{}}@Overridepublic int getCount(String ename {Connection con=null;PreparedStatement stmt=null;ResultSet rs=null;int count = 0;StringBuffer sql = new StringBuffer(" select count(1 cnt from emp where 1=1";if(ename!=null&&!("".equals(ename.trim({sql.append(" and ename like '%"+ename.trim(+"%'";}System.out.println(sql;try{con=DbUtil.getConnection(;stmt= con.prepareStatement(sql.toString(;rs=stmt.executeQuery(;while(rs.next({ count = rs.getInt("cnt";}return count;}catch(Exception e{e.printStackTrace(;}finally{} return 0; }}s2:。

增删改查简单-解释说明

增删改查简单-概述说明以及解释1.引言1.1 概述在现代信息时代，数据的管理和处理变得越来越重要。

无论是个人用户还是企业组织，都需要对数据进行增加、删除、修改以及查询等操作。

这些操作合称为增删改查（CRUD）操作，是数据管理中最基本、最常见的操作。

增删改查操作是数据管理的核心，它们在各个领域都得到广泛应用。

在个人数据管理方面，人们通过增加数据来记录生活中的重要事件、保存联系人信息等；删除数据可以清理不再需要的内容、释放存储空间；修改数据使其与当前状态保持一致；查询数据能够快速找到所需的信息。

而在企业层面，增删改查操作更是不可或缺的。

企业需要通过增加数据来记录各项业务活动，包括客户信息、订单记录、销售数据等，为后续的决策和分析提供基础；删除数据可以清理过时的、无效的或违规的内容；修改数据可以纠正错误或更新信息；查询数据则是企业分析和决策的重要依据。

在进行增删改查操作时，不仅需要掌握相应的方法和技术，还需要注意一些注意事项。

例如，在增加数据时，应确保数据的完整性和准确性，避免重复或错误的录入；在删除数据时，要谨慎操作，避免误删重要数据；在修改数据时，需要考虑影响范围和相关性，并确保相应的审批和权限控制；在查询数据时，要充分利用相关的搜索、过滤和排序功能，以提高查询效率。

评估增删改查操作的效果也是很重要的。

通过对增删改查操作的效果进行评估，可以不断改进和优化数据管理的流程和方法，提高工作效率和数据质量。

综上所述，增删改查操作是数据管理中不可或缺的基本操作，无论是个人用户还是企业组织，都需要掌握和运用这些操作技巧。

正确地进行增删改查操作，能够更好地管理和利用数据，提高工作效率和决策能力。

1.2 文章结构文章结构部分的内容如下：2. 正文2.1 增2.1.1 增加数据的重要性2.1.2 增加数据的方法2.1.3 增加数据的注意事项2.1.4 增加数据的效果评估2.2 删2.2.1 删除数据的重要性2.2.2 删除数据的方法2.2.3 删除数据的注意事项2.2.4 删除数据的效果评估2.3 改2.3.1 修改数据的重要性2.3.2 修改数据的方法2.3.3 修改数据的注意事项2.3.4 修改数据的效果评估2.4 查2.4.1 查询数据的重要性2.4.2 查询数据的方法2.4.3 查询数据的注意事项2.4.4 查询数据的效果评估以上是本文的文章结构。

extjs增删改查

/lovehuahui/article/details/5091047xtJs中常用到的增，删，改，查操作分类：extJs 2009-12-28 14:36 1252人阅读评论(3) 收藏举报刚刚参加完公司的项目，第一次使用extjs编写用户界面还是有点头痛，现在小花整理好了，希望为初学者做个参考。

[java]view plaincopy1.<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>2.3.<html>4. <head>5. <title>extJs中常用到的增删改查操作的示例代码</title>6. 7. <%@ include file="../extJs/CommonJs.jsp"%>8. <mce:script type="text/javascript"><!--9. /**10. * 作者：花慧11. * 时间： 2009年12月22日12. * 内容： extJs中常用到的增，删，改，查操作13. */14.15. //设置每页显示的行数默认为1016.17. var QUERY_PAGE_SIZE = 10;18.19. /**20. * SearchQueryForm():绘制查询表单21. */22. function searchQueryForm()23. {24. //form 使用的时候建议设为局部变量，可以通过Ext.getCmp(“”)去获取form25.26. var queryForm = null;27. queryForm = new Ext.FormPanel({28. id:'queryForm', //指定queryForm的Id29. renderTo:'searchPanel', //指向form所在的div层30. labelWidth:70, //label标签的width占页面的百分比31. region:'north',32. border:false, //以显示面板的body元素的边界，虚假隐藏起来（默认为true）33. badyBorder:false, //显示面板的body元素，假以隐藏它（默认为true的内部边界）34. labelAlign:'right', //label标签的对齐方式35. frame:true, //自定义面板的圆形边界，边界宽度1px。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Ext增删改查作者：huaxia524151 | 更新日期：2011-05-24 | 源网站连接Ext增删改查的简介与内容<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用户列表</title></head><script type="text/javascript">Ext.onReady(function(){//定义数据集对象var typeStore = new Ext.data.Store({//配置分组数据集//autoLoad :true,reader: new Ext.data.XmlReader({totalRecords: "results",record: "Users",id: "id"},Ext.data.Record.create([{name: "id"},{name: "username"},{name: "password"}])),proxy : new Ext.data.HttpProxy({url : "usersext.do?method=getUsersList"})})//创建工具栏组件var toolbar = new Ext.Toolbar([{text : "新增用户",iconCls:"add",handler : showAddUsersType},"-",{text : "修改用户",iconCls:"option",handler : showModifyUsersType},"-",{text : "删除用户",iconCls:"remove",handler : showDeleteUsersType}]);//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var usersGrid = new Ext.grid.GridPanel({applyTo : "grid-div",tbar : toolbar,frame:true,store: typeStore,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : "行号",width : 40}),//表格行号组件cb,{header: "编号", width: 80, dataIndex: "id", sortable: true,hidden:true},{header: "姓名", width: 180, dataIndex: "username", sortable: true},{header: "密码", width: 280, dataIndex: "password", sortable: true}],bbar: new Ext.PagingToolbar({pageSize: 15,store: typeStore,displayInfo: true,displayMsg: "显示第 {0} 条到 {1} 条记录，一共{2} 条",emptyMsg: "没有记录"})});typeStore.load({params:{start:0, limit:15}});//创建新增或修改用户类型信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = "side";//统一指定错误信息提示方式var usersForm = new Ext.FormPanel({labelSeparator : "：",frame:true,border:false,items : [{xtype:"textfield",width : 200,allowBlank : false,blankText : "类型名称不能为空",name : "username",fieldLabel:"姓名"},{xtype:"textfield",width : 200,name : "password",fieldLabel:"密码"},{xtype:"hidden",name : "id"}],buttons:[{text : "关闭",handler : function(){win.hide();}},{text : "提交",handler : submitForm }]});//创建弹出窗口var win = new Ext.Window({layout:"fit",width:380,closeAction:"hide",height:200,resizable : false,shadow : true,modal :true,closable:true,bodyStyle:"padding:5 5 5 5",animCollapse:true,items:[usersForm]});//显示新建用户类型窗口function showAddUsersType(){usersForm.form.reset();usersForm.isAdd = true;win.setTitle("新增用户信息");win.show();}//显示修改用户类型窗口function showModifyUsersType(){var usersList = getUsersIdList();var num = usersList.length;if(num > 1){Ext.MessageBox.alert("提示","每次只能修改一条用户信息。

")}else if(num == 1){usersForm.isAdd = false;win.setTitle("修改用户信息");win.show();var usersId = usersList[0];loadForm(usersId);}}//显示删除用户对话框function showDeleteUsersType(){var usersList = getUsersIdList();var num = usersList.length;if(num > 1){Ext.MessageBox.alert("提示","每次只能删除一条用户信息。

")}else if(num == 1){Ext.MessageBox.confirm("提示","您确定要删除所选用户吗？",function(btnId){if(btnId == "yes"){var usersId =usersList[0];deleteUsers(usersId);}})}}//删除用户类型function deleteUsers(usersId){var msgTip = Ext.MessageBox.show({title:"提示",width : 250,msg:"正在删除用户信息请稍后......"});Ext.Ajax.request({url : "usersext.do?method=deleteUsers",params : {usersId : usersId},method : "POST",success : function(response,options){msgTip.hide();var result =Ext.util.JSON.decode(response.responseText);if(result.success){//服务器端数据成功删除后，同步删除客户端列表中的数据var index = typeStore.find("id",usersId);if(index != -1){var rec = typeStore.getAt(index)typeStore.remove(rec);}Ext.Msg.alert("提示","删除用户信息成功。

");}else{Ext.Msg.alert("提示","该用户已包含"+result.num+"本用户信息不能删除！");}},failure : function(response,options){msgTip.hide();Ext.Msg.alert("提示","删除用户类型请求失败！");}});}//加载表单数据function loadForm(usersId){usersForm.form.load({waitMsg : "正在加载数据请稍后",//提示信息waitTitle : "提示",//标题url :"usersext.do?method=getUsersById",//请求的url地址params : {usersId:usersId},method:"GET",//请求方式success:function(form,action){//加载成功的处理函数//Ext.Msg.alert("提示","数据加载成功");},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert("提示","数据加载失败");}});}//提交表单数据function submitForm(){//判断当前执行的提交操作，isAdd为true表示执行用户类型新增操作，false表示执行用户类型修改操作if(usersForm.isAdd){//新增用户信息usersForm.form.submit({clientValidation:true,//进行客户端验证waitMsg : "正在提交数据请稍后",//提示信息waitTitle : "提示",//标题url :"usersext.do?method=addUsers",//请求的url地址method:"POST",//请求方式success:function(form,action){//加载成功的处理函数win.hide();updateUsersList(ersId);Ext.Msg.alert("提示","新增用户成功");},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert("提示","新增用户失败");}});}else{//修改用户信息usersForm.form.submit({clientValidation:true,//进行客户端验证waitMsg : "正在提交数据请稍后",//提示信息waitTitle : "提示",//标题url :"usersext.do?method=modifyUsers",//请求的url地址method:"POST",//请求方式success:function(form,action){//加载成功的处理函数win.hide();updateUsersList(ersId);Ext.Msg.alert("提示","修改用户成功");},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert("提示","修改用户失败");}});}}//明细数据修改后，同步更新用户列表信息function updateUsersList(usersId){var fields = getFormFieldsObj(usersId);var index = typeStore.find("id",fields.id);if(index != -1){var item = typeStore.getAt(index);for(var fieldName in fields){item.set(fieldName,fields[fieldName]);}mitChanges();}else{var rec = new Ext.data.Record(fields);typeStore.add(rec);}}//取得表单数据function getFormFieldsObj(usersId){var fields = usersForm.items;var obj = {};for(var i = 0 ; i < fields.length ; i++){var item = fields.itemAt(i);var value = item.getValue();obj[] = value;}if(Ext.isEmpty(obj["id"])){obj["id"] = usersId;}return obj;}//取得所选用户function getUsersIdList(){var recs =usersGrid.getSelectionModel().getSelections();var list = [];if(recs.length == 0){Ext.MessageBox.alert("提示","请选择要进行操作的用户！");}else{for(var i = 0 ; i < recs.length ; i++){var rec = recs[i];list.push(rec.get("id"))}}return list;}});</script><body><div id="grid-div" style="width:100%; height:100%;"/></body></html><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServ erPort()+path+"/";%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"src="<%=basePath%>/pagesExt/js/excel.js"></script><title>收入列表</title></head><script type="text/javascript">Ext.onReady(function(){//定义数据集对象var bookStore = new Ext.data.Store({//autoLoad :true,reader: new Ext.data.XmlReader({totalRecords: "results",record: "Book",id: "id"},Ext.data.Record.create([{name: "id"},{name: "bookName"},{name: "author"},{name: "typeName"},{name: "price"},{name: "brief"}])),proxy : new Ext.data.HttpProxy({url : "bookext.do?method=getBookList"})})//创建工具栏组件var toolbar = new Ext.Toolbar([{text : "新增收入",iconCls:"add",handler:showAddBook},"-",{text : "修改收入",iconCls:"option",handler:showModifyBook},"-",{text : "删除收入",iconCls:"remove",handler:showDeleteBooks},"-",{text : "总收入",iconCls:"tot",handler : showTotalPay},"-",new Ext.Toolbar.TextItem("按时间查询："),{xtype:"datefield",width : 150,allowBlank : false,blankText : "不能为空",id : "times",name : "times",emptyText:"请选择时间",format:"Y-m-d"},{iconCls:"find",handler:onItemCheck },"-",{text : "导出数据",iconCls:"down",handler:downExcel}]);//创建Grid表格组件var cb = new Ext.grid.CheckboxSelectionModel()var bookGrid = new Ext.grid.GridPanel({applyTo : "grid-div",frame:true,tbar : toolbar,store: bookStore,stripeRows : true,autoScroll : true,viewConfig : {autoFill : true},sm : cb,columns: [//配置表格列new Ext.grid.RowNumberer({header : "行号",width : 40}),//表格行号组件cb,{header: "收入编号", width: 1, dataIndex: "id", sortable: true,hidden:true},{header: "收入名称", width: 80, dataIndex: "bookName", sortable: true},{header: "作者", width: 80, dataIndex: "author", sortable: true},{header: "类型", width: 80, dataIndex: "typeName", sortable: true},{header: "金额", width: 80, dataIndex: "price", sortable: true},{header: "简介", width: 80, dataIndex: "brief", sortable: true}],bbar: new Ext.PagingToolbar({pageSize: 15,store: bookStore,displayInfo: true,displayMsg: "显示第 {0} 条到 {1} 条记录，一共{2} 条",emptyMsg: "没有记录"})});bookStore.load({params:{start:0, limit:15}});//按时间查询方法function onItemCheck(){var dd=Ext.get("times").getValue();if(dd=="请选择时间"){dd = "";}bookStore.reload({params:{start:0,limit:15,dd:dd}}); };//创建新增或修改收入信息的form表单Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = "side";//统一指定错误信息提示方式var bookForm = new Ext.FormPanel({labelSeparator : "：",frame:true,border:false,items : [{xtype:"textfield",width : 200,allowBlank : false,blankText : "收入名称不能为空",name : "bookName",fieldLabel:"收入名称"},{xtype:"textfield",width : 200,allowBlank : false,blankText : "收入作者不能为空",name : "author",fieldLabel:"作者"},{xtype:"combo",width : 200,allowBlank : false,blankText : "必须选择收入类型",hiddenName : "bookTypeId",name : "typeName",store : new Ext.data.Store({autoLoad :true,reader: newExt.data.XmlReader({totalRecords: "results",record: "BookType",id: "id"},Ext.data.Record.create([{name: "id"},{name: "title"},{name: "detail"}])),proxy : newExt.data.HttpProxy({url : "bookext.do?method=getBookTypeList"})}),//设置数据源allQuery:"allbook",//查询全部信息的查询字符串triggerAction: "all",//单击触发按钮显示全部数据editable : false,//禁止编辑loadingText : "正在加载收入类型信息",//加载数据时显示的提示信息displayField:"title",//定义要显示的字段valueField : "id",emptyText :"请选择收入类型",mode: "remote",//远程模式fieldLabel:"类型"},{xtype:"textfield",width : 200,name : "price",fieldLabel:"金额"},{xtype:"textarea",width : 200,name : "brief",fieldLabel:"简介"},{xtype:"hidden",name : "id"}],buttons:[{text : "关闭",handler : function(){win.hide();}},{text : "提交",handler : submitForm}]});//创建弹出窗口var win = new Ext.Window({layout:"fit",width:380,closeAction:"hide",height:280,resizable : false,shadow : true,modal :true,closable:true,bodyStyle:"padding:5 5 5 5",animCollapse:true,items:[bookForm]});//显示新建收入窗口function showAddBook(){bookForm.form.reset();bookForm.isAdd = true;win.setTitle("新增收入信息");win.show();}//显示修改收入窗口function showModifyBook(){var bookList = getBookIdList();var num = bookList.length;if(num > 1){Ext.MessageBox.alert("提示","每次只能修改一条收入信息。