解析Extjs與php資料互動(增刪查改)

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:<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訪問類。
var url = 'index.php';
var _proxy = new Ext.data.HttpProxy({url:url});
//2、資料問題參數
var _jsonProperty = "totalProperty";
//資料根目錄參數
var _jsonRoot = "root";
//Record顯示列表對應關係
var _record = [{name:'id'},
             {name:'name'},
             {name:'pass'},
             {name:'sex'},
             {name:'email'}];
//建立JSONReader對象，需要設定記錄總數，根目錄名稱，記錄映射
var _reader = new Ext.data.JsonReader({totelPropetty:_jsonProperty,root:_jsonRoot},_record);
/**
* 封裝一個用戶端的Record對象緩衝，為GridPanel提供資料入口
* 需要兩個必須的參數
* 1、提供資料的地址：Proxy 代理類
* 2、資料的讀取方式：Reader 類，這裡通過JsonReader讀取
*/
var _store = new Ext.data.Store({
  proxy:_proxy,
  reader:_reader
});
/**
ColumnModel
* 資料在頁面上顯示標題資訊，
* 順序和Record對應
* sortable 是否排序
* dataIndex 進行對應的列，對應Record中的NAME
*
* handler方法中第一個參數表示父類的對象，本例中為GridPanel對象。
* 第二個參數表示第幾行。
* 第三個參數表示第幾列。
*/
var _cm = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),
  new Ext.grid.CheckboxSelectionModel(),
  {header:"ID",dataIndex:"id",width:50,sortable:true,menuDisabled:true},
  {header:"使用者名稱",dataIndex:"name",width:80,sortable:true},
  {header:"密碼",dataIndex:"pass",width:175,sortable:true},
  {header:"性別",dataIndex:"sex",width:145,sortable:true,renderer:renderSex},
  {header:"電子郵箱",dataIndex:"email",width:150,sortable:true}
]);
/////////////////////////搜尋
var logins = new Ext.form.FormPanel({
   id:'myform',//分配表單id
    title: '按使用者名稱搜尋',
    width: 400,
    defaultType: 'textfield',
    frame: true,
   // method: 'POST',
    collapsible: true,//可摺疊
    bodyPadding: 5,

layout: 'column',//列布局

    margin: '0 0 10 0',
    items: [{
        fieldLabel: '姓名',
        labelWidth: 40,
        id: 'name'
    }],
    buttons: [{
       // xtype: 'button',
        text: '搜尋',
        margin: '0 0 0 5',
        handler: search
    },{
        // xtype: 'button',
        text: '隱藏',
        margin: '0 0 0 5',
        handler: hide
    }],

    renderTo: "search"
})
logins.hide();
function hide()
{
  logins.hide();
  }
///////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////
//擷取資料
var ds = new Ext.data.Store({

  //proxy告訴我們從哪獲得資料,Ext.data.MemoryProxy專門解析js變數
  //proxy:new Ext.data.MemoryProxy(data),
  //通過http擷取資料
  proxy:new Ext.data.HttpProxy({
   url:url}),

  //擷取json資料
  reader:new Ext.data.JsonReader({
   totalProperty:'totalProperty',
   root:'root'
  },Ext.data.Record.create([
     {name:'id'},
     {name:'name'},
     {name:'pass'},
     {name:'sex'},
     {name:'email'}
  ]))
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//自動分頁
var _pageSize = 16;
var _toolbar = new Ext.PagingToolbar({
  store:ds,
  pageSize:_pageSize,
  displayInfo:true,
  displayMsg:'顯示第{0}條到第{1}條記錄，一共{2}條',
  emptyMsg:'暫無資料'
});

//頂部工具列按鈕
var t_toolbar = [
  {id:"addData",text:"使用者添加",handler:addUser},"-",
      {id:"updateData",text:"使用者修改",listeners:{"click":updateUser}},"-",
      {id:"deleteData",text:"刪除選中使用者",handler:removeUser},"-",
      {id:"test",text:"測試選中",handler:chkSelects},"-",
      {id:"search",text:"搜尋",handler:jump}
    ];
/**
* GridPanel對象
* 資料列表頁面
* 必須設定 Store Data Access Objects和標題列顯示資訊
* 即 Store和ColumnModel對象
*/
var _grid = new Ext.grid.GridPanel({
  headerAsText: false, // 如果有標題列, 隱藏標題列
  collapsible: true,//可摺疊
  height:500,
  width:1100,
  frame:true,//圓角邊框
  store:ds,
  title:'測試yii整合Ext',
  cm:_cm,
  bbar : _toolbar,
  tbar : t_toolbar
});
ds.load({params:{start:0,limit:_pageSize}});
_grid.render('test_id');

//_grid.render();
/* 使用者資訊錄入框,驗證 */
var fpanel;
function f(){
fpanel = new Ext.form.FormPanel
({
  frame : true,//邊框圓角並且有背景色
  labelAlign : 'right',
  waitMsgTarget : true,
  autoScroll : true,
  buttonAlign : 'center',
  items : [
           {xtype:"hidden",name:"id"},
     {xtype:"textfield",fieldLabel:"使用者名稱",name:"name",anchor : "-20",allowBlank:false,//是否允許為空白
               blankText:"使用者名稱不允許為空白！",labelWidth : 20},
           {xtype:"radiogroup",fieldLabel:"性別",columns:2,allowBlank:false,blankText:"性別不允許為空白！",items:[{boxLabel:'男',name:'sex',inputValue:'male'},{boxLabel:'女',name:'sex',inputValue:'female'}]},
     {xtype:"textfield",fieldLabel:"密碼",name:"pass",allowBlank:false,//是否允許為空白
                       blankText:"密碼不允許為空白！",anchor : "-20"},
     {xtype:"textarea",fieldLabel:"電子郵箱",name:"email",allowBlank:false,//是否允許為空白
                           blankText:"郵箱不允許為空白！",anchor : "-20"}
    ]
});
}

var win;
/* 增加使用者 */
function addUser()
{
f();

  win = new Ext.Window
  ({
   title:"新增使用者",
   id:"win",
   //animEl:"fly",
   //layout:"fit",
   width:350,
   height:250,
   closeAction : "close",
   plain : true,
   modal : true,// 模態視窗，當開啟當前視窗時，後面的內容被遮擋
   bodyStyle:"padding:3px 0 0 3px",
   layout:"form",
   labelWidth:55,
   items:[fpanel],
   buttons:[
              {text:"儲存", handler :function()
               {
       //在儲存的時候，因為Id值為空白，所以不能轉換到後台，後台報類型轉換異常，可以將Id設值為0，
       //在幕後處理的時候，對於值為0的Id不擷取
               fpanel.findByType("hidden")[0].setValue(0);
               fpanel.getForm().submit({
                      url : "add.php",
                      method : "POST",
                      waitMsg : "儲存資料...",

                      success : function(form, action) {
                          // 業務成功
                       Ext.MessageBox.alert('提示','添加成功!');
                          win.close();
                          ds.load({params:{ start:0,limit:_pageSize} });
                      },
                      failure : function(form, action) {
                          // 業務失敗

                    obj = Ext.util.JSON.decode(action.response.responseText);
                    Ext.MessageBox.alert('提示', obj.errors.reason);
                    win.close();

                    ds.load({params:{ start:0,limit:_pageSize} });
                    }
                 });
               }
              },
              {
                text:"重設",handler:function()
                {
                 fpanel.getForm().reset();
       }
              }
            ]
    })
  win.show();
  // 因為重複使用window，有可能在修改後fpanel中還存在資料，所以要先重設

fpanel.getForm().reset();
}

/* 修改使用者資訊 */
function updateUser()
{
  var win_2;
  var a = 3;
  f();
  var selectedRecord = _grid.getSelectionModel().getSelected();
  // 獲得多個資料

  if (selectedRecord == undefined || selectedRecord == null)
  {
   Ext.MessageBox.alert("提示", "請先選擇一條記錄！");
  } else {
   win_2 = new Ext.Window
   ({
    title : "修改使用者",
    width : 350,
    height : 250,
    closeAction : "hide",
    plain : true,
    modal : true,// 模態視窗，當開啟當前視窗時，後面的內容被遮擋
    bodyStyle : "padding:3px 0 0 3px",
    //layout : "form",
    layout:"fit",
    labelWidth : 55,
    items : [fpanel],
    buttons : [
               {text:"修改", handler:function()
        {fpanel.getForm().submit
                  ({
          url:"edit.php",
          method:"POST",
          waitMsg:"資料修改中...",
          success:function(form,action)
          {
           win_2.hide();
           Ext.MessageBox.alert("提示","資料修改成功");
           _ds.reload();
          },
          failure : function(form, action) {
           win_2.hide();
           Ext.MessageBox.alert("提示","<font color='red'>資料修改失敗</font>");
                      _ds.load();
                      }
                  });
        }
               },
               {
                text : "重設",handler:function()
                {
                 fpanel.getForm().reset();
                }
               },
               {
                text: '關閉',handler: function()
                {
                        win_2.close();
                 }
               }
              ]
      });
  }
  win_2.show();
   // 將選中的資料load到window中顯示
  //alert(win_2);
  win_2.getComponent(0).getForm().loadRecord(selectedRecord);

}

/* 刪除使用者 */
function removeUser(btn)
{
  var selectedRecord = _grid.getSelectionModel().getSelected();
  if (selectedRecord == undefined || selectedRecord == null)
  {
   Ext.MessageBox.alert("提示", "請先選擇一條記錄！");
  } else {
   Ext.MessageBox.confirm("提示資訊", "確定要刪除嗎？", function(btn)
   {
    if (btn == "yes")
    {
     Ext.Ajax.request(
     {
      url:"del.php",
      method:"POST",
      params:{id : selectedRecord.data.id},
      success:function(request, options)
      {
       var jsonRequest = Ext.util.JSON.decode(request.responseText);

       if (jsonRequest == true)
       {
        Ext.Msg.alert("提示資訊", "刪除成功");
        _grid.getStore().remove(selectedRecord);
        ds.reload();
       } else {
        Ext.Msg.alert("提示資訊", "<font color='red'>刪除失敗</font>");
       }
      },
      failure : function()
      {
       Ext.MessageBox.show
       ({
        title : "提示訊息",
        msg : "刪除時發生錯誤"
       });
      }
     });
    }
   })
  }
}

function chkSelects()
{
var selects = _grid.getSelectionModel().getSelections();
alert("選中的總數為："+selects.length);

}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search(){
//fpanel.GridPanel().reset();init();

logins.getForm().submit({ //提交表單事件

    //clientValidation: true,
    method:"POST", //提交方式(POSTT和GET)
    url:"search.php", //表單提交URL地址
    waitMsg:"請稍等,正在搜尋...", //提交未完成提示框內容
    waitTitle:"正在搜尋", //提示框標題資訊
   });
  var url = 'search.php';
  // store.proxy=new Ext.data.HttpProxy({url:url});
  ds.reload();
   //_proxy = new Ext.data.HttpProxy({url:url});
   //ds.load({params:{start:0,limit:_pageSize}});
  //_grid.render('test_id');

}
function jump()
{
logins.show();
}
//////////////////////////////

}
Ext.onReady(init);
</script>
</head>
<body>
<p style="height:10px;"></p>
<div id="test_id"></div>
<div id="search"></div>
</body>
</html>

Index.php檔案複製代碼代碼如下:<?php
header("Content:text/html;charset=utf-8");
$link = mysql_connect("localhost","root","123456")or die('error'.mysql_error());
mysql_select_db("stu",$link);
mysql_query('set names utf8');
$sql = "select count(*) num from men";
$num = mysql_query($sql);
$count = mysql_fetch_array($num);
$start = $_POST['start'];
$limit = $_POST['limit'];
$sql2 = "SELECT * FROM men limit {$start},{$limit}";
/*
if (!$_POST)
{
$sql2 = "SELECT * FROM member";
} else {
$sql2 = "select * from member limit {$start},{$limit}";
}
*/
$data = array();
$result = mysql_query($sql2);
while(!!$info = mysql_fetch_array($result,MYSQL_ASSOC))
{
$data[] = $info;
}
//$j = json_encode($data);
$j = "{totalProperty:100,root:".json_encode($data)."}";
echo $j;
?>

Add.php檔案如下：複製代碼代碼如下:<?php
header("Content:text/html;charset=utf-8");
$link = mysql_connect("localhost","root","123456")or die('error'.mysql_error());
mysql_select_db("stu",$link);
mysql_query('set names utf8');
$name = $_POST['username'];
$pwd = $_POST['password'];
$time = $_POST['regTime'];
$email = $_POST['email'];
/*
$name = 'aaaa';
$pwd = 'aaaa';
$time = '2011-12-31';
$email = 'aaaa';*/
$sql = "INSERT INTO men (username,password,regTime,email) VALUES ('{$name}','{$pwd}','{$time}','{$email}')";
//mysql_query($sql)
if (mysql_query($sql))
{
echo 'ok';
}
?>

Del.php檔案如下：複製代碼代碼如下:<?php
header("Content:text/html;charset=utf-8");
$link = mysql_connect("localhost","root","123456")or die('error'.mysql_error());
mysql_select_db("stu",$link);
mysql_query('set names utf8');
$id = $_POST['id'];
$sql = "DELETE FROM men WHERE id={$id}";
if (mysql_query($sql))
{
echo 1;
} else {
echo 0;
}
?>

資料庫檔案men.sql
資料庫名叫：stu
表名為：men
可以把下面的複製到一個文字文件裡，然後建立stu資料庫，匯入就可以。複製代碼代碼如下:-- phpMyAdmin SQL Dump
-- version 2.11.2.1
-- http://www.phpmyadmin.net
--
-- 主機: localhost
-- 產生日期: 2012 年 01 月 11 日 10:02
-- 伺服器版本: 5.0.45
-- PHP 版本: 5.2.5
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
-- 資料庫: `stu`
--
-- --------------------------------------------------------
--
-- 表的結構 `men`
--
CREATE TABLE `men` (
`id` int(11) unsigned NOT NULL auto_increment,
`name` varchar(50) collate utf8_unicode_ci NOT NULL,
`pass` varchar(32) collate utf8_unicode_ci NOT NULL,
`sex` varchar(10) collate utf8_unicode_ci NOT NULL,
`email` varchar(50) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=28 ;
--
-- 匯出表中的資料 `men`
--
INSERT INTO `men` (`id`, `name`, `pass`, `sex`, `email`) VALUES
(1, '趙四', '123456', 'female', '646588973@qq.com'),
(2, '測試修改', '123456', 'male', 'test@qq.com'),
(8, '趙勇2', '123456', 'male', 'sfsf@qq.com'),
(9, '趙勇3', '123456', 'male', 'sfsf@qq.com'),
(10, '趙勇5', '123456', 'male', 'sfsf@qq.com'),
(11, 'asdfsf', 'asfsfsf', 'male', 'safsf'),
(18, '12', '123', 'male', '123'),
(19, '123', '123', 'female', '123'),
(20, '123123', '123', 'female', '123'),
(21, 'safdsdf', 'sdf', 'female', 'sdf'),
(22, 'sdfsdf', 'sdfsdf', 'male', 'sdf'),
(23, 'test', 'test', 'male', 'test@qq.com'),
(24, 'saf', 'asdfs', 'male', 'asdf'),
(25, 'dfgdfg', 'dfgdfg', 'male', 'dfgdfg'),
(26, 'ertert', 'erter', 'male', 'tertert'),
(27, '1asdf', 'sdf', 'male', 'sdf');

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

解析Extjs與php資料互動(增刪查改)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support