我的一個ext頁面

原創 wzj_119 2020-06-20 21:46

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<%
/**
floodseason=1:前汛期
floodseason=2:主汛期
floodseason=3:後汛期
*/
String cPath = request.getContextPath();
String floodseason = request.getParameter("floodseason");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>典型入庫洪水過程</title>
    <%@ include file="/includes/header.jsp"%>
    <script type="text/javascript" src="<%=cPath%>/extjs/RowEditor.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=cPath%>/styles/RowEditor.css" />
    <script>
    var num = null;
    var nmId = "";
    var strForGrid = "";
    //window.clipboardData.setData("Text",strForGrid);
    var form = null;
    var grid = null;
    var uploadform = null;
    var hiddenfield1 = null;
 Ext.onReady(function(){
  Ext.QuickTips.init();
  
  hiddenfield1 = new Ext.form.Hidden({
      name: 'uploadfilepath',
      allowBlank: false
     });
  
  var User = Ext.data.Record.create([
   {name: 'tm', type: 'string'},
   {name: 'flow', type: 'double'}
  ]);
  
  var editor = new Ext.ux.grid.RowEditor({
   saveText : "保存",
   cancelText: "關閉"
  });
  editor.on({
   scope: this,
   afteredit: function(roweditor, changes, record, rowIndex) {
    if(state == 'add'){
     Ext.Ajax.request({
            url : '${ctx}/baseinfo.do?method=saveFlood_Data&flow='+record.get('flow')+'&tm='+record.get('tm')+'&doAction=insert&floodseason=<%=floodseason%>&name_id='+nmId,
            success: function() {
              ds.baseParams = {
                   name_id : nmId
            };
               ds.load({params:{start:0,limit:30}});
               grid.getStore().reload(); 
               changeChart();
              parent.window.Ext.example.msg('消息提示','添加成功');
             }
        });
       }else{
        Ext.Ajax.request({
            url : '${ctx}/baseinfo.do?method=saveFlood_Data&rec_no='+record.get('rec_no')+'&flow='+record.get('flow')+'&tm='+record.get('tm')+'&doAction=update&floodseason=<%=floodseason%>&name_id='+nmId,
            success: function() {
              ds.baseParams = {
                   name_id : nmId
            };
               ds.load({params:{start:0,limit:30}});
               grid.getStore().reload(); 
               changeChart();
              parent.window.Ext.example.msg('消息提示','修改成功');
             }
        });
       }
   },
   canceledit: function(roweditor, changes, record, rowIndex) {
    if(state == 'add'){
     grid.store.remove(ds.getAt(0)) ;
     grid.getView().refresh();
    }
    editor.stopEditing();
   }
  });
  
  var store1 = new Ext.data.JsonStore({
   url: '${ctx}/baseinfo.do?method=getFlood_Typical_NumList&floodseason=<%=floodseason%>',
   root:'root',
   fields: ['name_id','name']
  });
  store1.on('load', function(){
   ds.baseParams = {
     name_id : nmId
    };
         ds.load({params:{start:0,limit:30}});
         grid.getStore().reload(); 
  });
  store1.load();
  
  var comboBox1 = new Ext.form.ComboBox({
     id:'selId',
     name:'selId',
           store:store1,
           fieldLabel:'典型洪水編號',
           emptyText:"請選擇..",
           mode:'local',
           typeAhead: true,
            triggerAction: 'all',
            valueField:'name_id',
            displayField:'name',
            selectOnFocus:true,
            border:true,
            frame:true,
            editable:true,
            allowBlank: false,
            hiddenName:'name_id',
            listeners:{
    select:function(combo,record,index){
     num = index;
     nmId = combo.getValue();
     changeChart();
     ds.baseParams = {
         name_id : nmId
        };
           ds.load({params:{start:0,limit:30}});
           grid.getStore().reload(); 
    }
   }
  });
  
  //上傳文件表單
  uploadform = new Ext.form.FormPanel({
   fileUpload : true,
   border:false,
   height:22,
   items:[{
    id : 'file',
           autoScroll : false,
           xtype : 'textfield',
     fieldLabel:'導入TXT文件',
           name : 'file',
           hideLabel : true,
           autoCreate : {
               tag : "input",
               type : "file",
               size : "20",
               autocomplete : "off",
               onChange : "chkFileExtname(this.value);"
           }
    },
    hiddenfield1
   ]
  });
  
  //表單
  form = new Ext.form.FormPanel({
   region:'north',
         frame:true,
   height:80,
   border:false,
   buttonAlign:'center',
   items:[
    comboBox1
   ],
   buttons: [{
             text: '添加典型',
             handler: function() {
                 if (!form.getForm().isValid()) {
                     return;
                 }
              form.getForm().submit({
                  url : '${ctx}/baseinfo.do?method=saveFlood_Typical_Num&floodseason=<%=floodseason%>',
                  success : function(form, action){
                   if (action.result.success) {
                          parent.window.Ext.Msg.alert('系統提示', action.result.showMsg, function() {
                              comboBox1.setValue('');
                              store1.reload();
                              nmId = '';
                              changeChart();
                              //nmId = form.getForm().findField("selId").getValue();
                            });
                         }
                  },
                  failure : function(form, action) {  
                      parent.window.Ext.Msg.alert('系統提示', "添加失敗");
                  }
              });
             }
         },{
             text: '刪除典型',
             handler: function() {
              if (!form.getForm().isValid()) {
                     return;
                 }
                 parent.window.Ext.Msg.confirm('系統提示','您確定要刪除嗎？',function(btn){
                  if(btn == 'yes'){
                   form.getForm().submit({
                    url : '${ctx}/baseinfo.do?method=delFlood_Typical_Num&floodseason=<%=floodseason%>',
                    success : function(form, action){
                     if (action.result.success) {
                            parent.window.Ext.Msg.alert('系統提示', action.result.showMsg, function() {
                       //store1.remove(store1.getAt(num));
                       comboBox1.setValue('');
                       store1.reload();
                       nmId = '';
                       changeChart();
                              });
                           }
                    },
                    failure : function(form, action) {  
                        parent.window.Ext.Msg.alert('系統提示', "刪除失敗");
                    }
                });
                  }
                 });
             }
         }]
  });
  
  var cm = new Ext.grid.ColumnModel([
     {
        name: 'rec_no',
        hidden : true
      },
   {
        header   : '時間',
        dataIndex: 'tm',
     editor   : new Ext.form.TextField({
          name: 'tm',
             editable:false,
             allowBlank: false
          //decimalPrecision:3
         })
      },
      {
        header   : '流量(m<sup>3</sup>/s)',
        dataIndex: 'flow',
        editor   : new Ext.form.NumberField({
          name: 'flow',
          editable:false,
             allowBlank: false
          //decimalPrecision:3
         })  
      }
     ]);
     ds = new Ext.data.Store({
         proxy: new Ext.data.HttpProxy({url:'${ctx}/baseinfo.do?method=getData_Flood_List&floodseason=<%=floodseason%>'}),       
         baseParams : {
     name_id : nmId
   },
         reader: new Ext.data.JsonReader({
             totalProperty: 'totalProperty',
             root: 'root',
             successProperty :'success'
         }, [
             {name: 'rec_no',mapping:'rec_no',type:'string',hidden:true},
             {name: 'tm',mapping:'tm',type:'string'},
             {name: 'flow',mapping:'flow',type:'double'}
         ])
     });
   
     //數據表
     grid = new Ext.grid.GridPanel({
      plugins: [editor],
      title:'數據列表',
   region:'center',
   border:false,
      loadMask: {msg:'正在載入數據,請稍候...'},
   //sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
         ds: ds,
         cm: cm,
         tbar: new Ext.Toolbar([
          '-',
          {
           text:'添加',
           icon: '${ctx}/images/add.gif',
           handler: function() {
               if(nmId != ''){
                editor.stopEditing();
             var newUser = new User({});
             grid.store.insert(0, newUser);
             grid.getView().refresh();
             grid.getSelectionModel().selectRow(0);
             editor.startEditing(0);
             state = 'add';
               }else{
                parent.window.Ext.Msg.alert('系統提示', "請您先選擇典型洪水編號！");
               }
        }
          },
          '-',
          {
           text:'粘貼',
           icon: '${ctx}/images/excel.png',
           tooltip:'從Excel中粘貼數據',
           handler:function(){
            if(nmId != ''){
            //粘貼板數據
      var opData = window.clipboardData.getData("text");
             if(opData != null && opData != ''){
                 pasteData(opData);
                 if(strForGrid != ''){
               Ext.Ajax.request({
             url: '${ctx}/baseinfo.do?method=pasteFlood_Data&floodseason=<%=floodseason%>&name_id='+nmId+'&strForGrid='+strForGrid,
             success: function(response, options) {
           var responseArray = Ext.util.JSON.decode(response.responseText);
           if(responseArray.success==true){
            ds.baseParams = {
                        name_id : nmId
                  };
                     ds.load({params:{start:0,limit:30}});
                     grid.getStore().reload();
            changeChart();
            parent.window.Ext.example.msg('消息提示',responseArray.showMsg);
           }else{
            parent.window.Ext.Msg.alert('錯誤提示',responseArray.showMsg);
           }
          },
          failure: function() {
                    parent.window.Ext.Msg.alert('系統提示', "系統錯誤，粘帖失敗！");
          }
            });
              }
             }else{
              parent.window.Ext.Msg.alert('系統提示','請您先複製數據！');
              return;
             }
            }else{
                parent.window.Ext.Msg.alert('系統提示', "請您先選擇典型洪水編號！");
               }
           }
          },
          '-',
          {
           text:'刪除',
           icon: '${ctx}/images/delete.gif',
           tooltip:'先選中被刪除記錄行，再刪除數據',
           //disabled: true,
           handler:function(){
            if(grid.getSelectionModel().getCount()>0){
             parent.window.Ext.Msg.confirm('系統提示','您確定要刪除嗎？',function(btn){
              if(btn == 'yes'){
               editor.stopEditing();
                     var cellcount = grid.getSelectionModel().getCount()
                     var s = grid.getSelectionModel().getSelections();
                     rec_no = "";
                     for(var i = 0, r; r = s[i]; i++){
                         ds.remove(r);
                         if(i==0){
                          rec_no += "'"+r.get('rec_no')+"'";
                         }else{
                          rec_no += ",'"+r.get('rec_no')+"'";
                         }
                     }
               
               if(rec_no != ''){
                Ext.Ajax.request({
              url: '${ctx}/baseinfo.do?method=delFlood_Data&floodseason=<%=floodseason%>&rec_no='+rec_no ,
              success: function(response, options) {
            var responseArray = Ext.util.JSON.decode(response.responseText);
            if(responseArray.success==true){
             ds.baseParams = {
                         name_id : nmId
                   };
                      ds.load({params:{start:0,limit:30}});
                      grid.getStore().reload();
             changeChart();
             parent.window.Ext.example.msg('消息提示','刪除成功');
            }else{
             parent.window.Ext.Msg.alert('錯誤提示',responseArray.showMsg);
            }
           },
           failure: function() {
                     parent.window.Ext.Msg.alert('系統提示', "系統錯誤，刪除失敗！");
           }
             });
               }
              }
             });
            }else{
             parent.window.Ext.Msg.alert('系統提示','請您先選中一條記錄再進行刪除操作！');
             return;
            }
           }
          },
          '-'
         ]),
         bbar: new Ext.PagingToolbar({
             pageSize: 30,
             store: ds,
             displayInfo: true,
             displayMsg: '{0}-{1} / 共{2}條',
             emptyMsg: "沒有記錄"
         }),
         viewConfig:{
    forceFit:true
   },

   listeners : {
    'render' : function() {
     var tbar = new Ext.Toolbar({
      items : ['-',uploadform,{
       text:'導入',
             icon: '${ctx}/images/edit.gif',
             tooltip:'導入TXT文本文件',
             handler:function(){
              if(nmId == ''){
               parent.window.Ext.Msg.alert('系統提示','請您先選擇典型洪水編號！');
               return;
              }
              
              //針對IE8的安全限制的特殊處理
                    Ext.getDom('file').select();
                    uploadform.getForm().findField("uploadfilepath").setValue(document.selection.createRange().text);
              
              var filePath = uploadform.getForm().findField("uploadfilepath").getValue();
              if (filePath=='') {
               parent.window.Ext.Msg.alert('系統提示','請您選擇要導入的TXT文件！');
                        return;
                    }
                   
                    var sExp = filePath.substring(filePath.lastIndexOf('.'),filePath.length);
        if(sExp.toUpperCase()!='.TXT'){
         parent.window.Ext.Msg.alert('系統提示','只可以導入TXT文件！');
         return;
        }
                   
                    uploadform.getForm().submit({
         url : "${ctx}/baseinfo.do?method=importData&name_id="+nmId+"&floodseason=<%=floodseason%>",
         method : "POST",
         success : function(form, action) {
          var responseArray = action.result;
          if(responseArray.success==true){
           ds.baseParams = {
                       name_id : nmId
                 };
                    ds.load({params:{start:0,limit:30}});
                    grid.getStore().reload();
           changeChart();
           parent.window.Ext.Msg.alert('提示',responseArray.showMsg);
          }else{
           parent.window.Ext.Msg.alert('錯誤提示',responseArray.showMsg);
          }
         },
         failure : function(form, action) {
          parent.window.Ext.Msg.alert('系統提示', "系統錯誤，導入失敗！");
         }
        });
             }
      }]
     });
     tbar.render(grid.tbar);
    }
   }
     });
    
     var myurl = My_encode("${ctx}/baseinfo.do?method=getData_Flood_List&floodseason=<%=floodseason%>&name_id="+nmId+"&rnd="+Math.random());
     var panel1 = new Ext.Panel({
      region:'center',
      border:false,
      html:'<iframe src="${ctx}/pages/baseinfo/flex/flexlinkchar.html?url='+myurl+'&rndnum='+Math.random()+'" name="iframe_leftxx" id="iframe_leftxx" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>',
      title:'過程線圖表'
     });
  
  var viewport = new Ext.Viewport({
   layout:"border",
   items:[
    panel1,{
    region:"west",
    width:400,
    split:true,
    layout:"fit",
    border:false,
    collapsed: false,
    collapseMode:"mini",
    items:[{
     layout:"border",
     border:false,
     items:[grid,form]
    }]
   }]
  });
 });
 
 function doQuery_pro(pselId){
     ds.baseParams = {
      name_id : pselId
     };
  ds.load({params:{start:0,limit:30}});
  grid.getStore().reload();
 }
 
 function pasteData(opData){
   var opLineBreak = new RegExp("//r//n", "g");
   var opTab = new RegExp("//t", "g");
   var opRows = opData.split(opLineBreak);
   for (var i = 0; i < opRows.length; i ++){
    var opCells = opRows[i].split(opTab);
    if(strForGrid == ''){
     strForGrid += opCells; 
    }else{
     strForGrid += "_" + opCells;
    }
   }
 }
 function chkFileExtname(pFilepath){
  hiddenfield1.setValue(pFilepath);
  pFilepath = pFilepath.toUpperCase();
  var sExp = pFilepath.substring(pFilepath.lastIndexOf('.'),pFilepath.length);
  if(sExp!='.TXT'){
   parent.window.Ext.Msg.alert('系統提示','只可以導入TXT文件！');
   hiddenfield1.setValue('');
  }
 }
 function changeChart(){
    var url = My_encode("${ctx}/baseinfo.do?method=getData_Flood_List&floodseason=<%=floodseason%>&name_id="+nmId+"&rnd="+Math.random());
    document.getElementById("iframe_leftxx").src = "${ctx}/pages/baseinfo/flex/flexlinkchar.html?url="+url+"&rndnum="+Math.random();
 }
 function My_encode(url){
     return encodeURIComponent(url);
 }
 

 

//粘帖數據
 function pasteData1(opData){
   var opLineBreak = new RegExp("//r//n", "g");
   var opTab = new RegExp("//t", "g");
   var opRows = opData.split(opLineBreak);
   for (var i = 0; i < opRows.length; i ++){
    var opCells = opRows[i].split(opTab);
    if(isNaN(opCells[0]) || isNaN(opCells[1]) || isNaN(opCells[2]) || isNaN(opCells[3]) || isNaN(opCells[4])){
     strForGrid = "";
     Ext.example.msg('消息提示','粘帖的數據非數值');
     break;
    }
    
    if(strForGrid == ''){
     strForGrid += opCells; 
    }else{
     strForGrid += "_" + opCells;
    }
   }
 }
     
 function usFormat(v){
        v = String(v);
  if(v=='0'){
    v = "";
  }
        return v;
    }
   
    function fsFormat(v){
        v = String(v);
        var ps = v.split('.');
        var whole = ps[0] ? ps[0] : '0';
        var sub = ps[1] ? '.'+ ps[1] : '';
        v = whole + sub;
        return v;
    }
 </script>
  </head>
  <body>
  </body>
</html>

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端面試題 - 說一下原型和原型鏈？

前端面試題 - 說一下原型和原型鏈？ JavaScript 中，萬物皆對象，對象分爲普通對象和函數對象。 所有的函數都是函數對象（typeof f === 'function'），其他都是普通對象（typeof o === 'object'

原創 2024-04-24 23:51:10

Oracle數據庫中的索引類型分類

唯一索引（Unique Index）：保證索引列的值是唯一的，即重複值不允許。 非唯一索引（Non-Unique Index）：允許重複值存在。 組合索引（Composite Index）：在表的多個列上創建索引。 反向鍵索引（Rever

原創 2024-04-23 21:54:53

從用戶中來，到用戶中去：IPD集成產品開發之FFAB模型，讓你的產品供不應求！

IPD（集成產品開發）模型的核心價值在於它改變了企業對於產品研發的固有觀點，將企業產研的重點由“技術爲導向”升級爲“用戶需求爲導向”，強調企業在產品的研發過程中堅持以用戶/客戶爲中心。 在IPD（集成產品開發）的模式中，需要企業或者團隊在限

原創 2024-04-13 00:50:45

數據結構筆記淺記（三）空間複雜度

用於衡量算法佔用內存空間隨着數據量變大時的增長趨勢。這個概念與時 間複雜度非常類似，只需將“運行時間”替換爲“佔用內存空間”。   算法在運行過程中使用的內存空間主要包括以下幾種。         ‧ 輸入空間：用於存儲算法的輸入數據。  

原創 2024-03-23 00:43:15

uniapp rich-text處理富文本里的圖片寬度自適應

/**  * 處理富文本里的圖片寬度自適應  * 1.去掉img標籤裏的style、width、height屬性  * 2.img標籤添加style屬性：max-width:100%;height:auto  * 3.修改所有style裏的

原創 2024-03-09 02:59:11

前端面試題 - redux與vuex的區別？

前端面試題 - redux與vuex的區別？ redux使用的是不可變數據，每次都是用新的state替換舊的state，通過diff算法比較差異的；而Vuex是可變的，通過getter/setter直接修改。 另外就是在api上有不同，v

原創 2024-04-26 11:51:26

ci 404 問題總結

protected function getNode(){ //$CONTROLLER_NAME = $this->_CI->router->fetch_class(); //$ACTION_NAME = $this->_

原創 2024-04-20 00:28:27

一文搞懂5種內存溢出案例，內含完整源碼

本文分享自華爲雲社區《10分鐘搞懂各種內存溢出案例！！（含完整源碼，建議收藏）》，作者：冰 河。 作爲程序員，多多少少都會遇到一些內存溢出的場景，如果你還沒遇到，說明你工作的年限可能比較短，或者你根本就是個假程序員！哈哈，開個玩笑。今天，我

原創 2024-06-05 10:56:55

AppBuilder低代碼體驗：構建雅思大作文組件

Ai technology 前言 AppBuilder上線了低代碼製作組件功能，可以通過工作流的方式構建自定義組件，完成簡單Agent無法完成的複雜功能，使得生成的文本更加定製化，

原創 2024-05-16 00:15:54

有點意思的 Java 遞歸調用

最近在刷一些問題的時候看到有下面一個問題     上面問的是當輸入的字符串爲什麼的時候返回 True 總結 在做題目的時候，第一次還做錯了。 這是因爲解答這個題目的時間只有 3 分鐘，沒有自己看題目 後來拿着程序跑了下。 p

原創 2024-05-13 02:41:48

基於Redis實現基本搶紅包算法

簡介: 搶紅包是我們生活常用的社交功能, 這個功能最主要的特點就是用戶的併發請求高, 在系統設計上, 可以使用非常多的辦法來扛住用戶的高併發請求, 在本文中簡要介紹使用Redis緩存中間件來實現搶紅包算法, Redis是一個在內存中基

原創 2024-04-17 11:18:19

Java中拼接字符串方式(+、StringBuilder/StringBuffer)分析

字符串是 Java 程序中最常用的數據結構之一。在 Java 中 String 類已經重載了"+"，字符串可以直接使用"+"進行連接，也可以用StringBuilder/StringBuffer（StringBuilder是J2SE5 及以

原創 2024-04-09 21:31:20

Java中String 、StringBuilder 、StringBuffer 的區別

Java 平臺提供了兩種類型的字符串操作方式：String 和 StringBuffer/StringBuilder，它們都可以儲存和操作字符串，區別如下： String 是隻讀字符串，也就意味着 String 引用的字符串內容是不能被改

原創 2024-04-08 09:31:31

JPA不識別MySQL的枚舉類型

1 枚舉好用嗎？ 數據字典型字段，枚舉比Integer好： 限定值，只能賦值枚舉的那幾個實例，不能像Integer隨便輸，保存和查詢的時候特別有用 含義明確，使用時不需要去查數據字典 顯示值跟存儲值直接映射，不需要手動轉換，比如1在頁面上

原創 2024-04-02 01:07:56

go-Channel

1 概述 通道是Golang提供的一種基本類型，它可以實現在協程之間的單向通信和雙向通信、發送和接收數據、以及協程同步。 channel的本質是一個隊列，遵循先進先出原則。channel是線程安全的，在任何給定時間，一個數據被設計爲只有一

原創 2024-03-24 00:10:06