熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> PHP編程 >> 正文

解析Extjs與php數據交互(增刪查改)

2022-06-13   來源: PHP編程 

　　代碼如下:


<html>
<head>
//搜索暫時沒做數據是出來了但是卻沒法顯示
<link rel="stylesheet" type="text/css" href="/js/resources/css/extallcss"/>
<script type="text/javascript" src="/js/jqueryjs"></script>
<script type="text/javascript" src="/js/extbasejs"></script>
<script type="text/javascript" src="/js/extalljs"></script>
<script type="text/javascript" src="/js/extlangzh_CNminjs"></script>
<script type="text/javascript">
ExtQuickTipsinit(); //初始化快速提示對象
function test() {
ExtMsgalert(titletestyiiext);
}
function renderSex(value) {
if (value == male) {
return "<span style=color:red;fontweight:bold;>紅男</span><img src=/images/malejpg />";
} else {
return "<span style=color:green;fontweight:bold;>綠女</span><img src=/images/femalepng />";
}
}
function init()
{

//創建url訪問類
var url = indexphp;
var _proxy = new ExtdataHttpProxy({url:url});
//數據問題參數
var _jsonProperty = "totalProperty";
//數據根目錄參數
var _jsonRoot = "root";
//Record顯示列表對應關系
var _record = [{name:id}
{name:name}
{name:pass}
{name:sex}
{name:email}];
//創建JSONReader對象需要設置記錄總數根目錄名稱記錄映射
var _reader = new ExtdataJsonReader({totelPropetty:_jsonPropertyroot:_jsonRoot}_record);
/**
* 封裝一個客戶端的Record對象緩存為GridPanel提供數據入口
* 需要兩個必須的參數
* 提供數據的地址Proxy 代理類
* 數據的讀取方式Reader 類這裡通過JsonReader讀取
*/
var _store = new ExtdataStore({
proxy:_proxy
reader:_reader
});
/**
ColumnModel
* 數據在頁面上顯示標題信息
* 順序和Record對應
* sortable 是否排序
* dataIndex 進行對應的列對應Record中的NAME
*
* handler方法中 第一個參數表示父類的對象本例中為GridPanel對象
* 第二個參數表示第幾行
* 第三個參數表示第幾列
*/
var _cm = new ExtgridColumnModel([
new ExtgridRowNumberer()
new ExtgridCheckboxSelectionModel()
{header:"ID"dataIndex:"id"width:sortable:truemenuDisabled:true}
{header:"用戶名"dataIndex:"name"width:sortable:true}
{header:"密碼"dataIndex:"pass"width:sortable:true}
{header:"性別"dataIndex:"sex"width:sortable:truerenderer:renderSex}
{header:"電子郵箱"dataIndex:"email"width:sortable:true}
]);
/////////////////////////搜索
var logins = new ExtformFormPanel({
id:myform//分配表單id
title: 按用戶名搜索
width:
defaultType: textfield
frame: true
// method: POST
collapsible: true//可折疊
bodyPadding:

layout: column//列布局

margin:
items: [{
fieldLabel: 姓名
labelWidth:
id: name
}]
buttons: [{
// xtype: button
text: 搜索
margin:
handler: search
}{
// xtype: button
text: 隱藏
margin:
handler: hide
}]

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

///////////////////////////////////////////////////////////////////////////////////////////
//獲取數據
var ds = new ExtdataStore({

//proxy告訴我們從哪獲得數據ExtdataMemoryProxy專門解析js變量
//proxy:new ExtdataMemoryProxy(data)
//通過http獲取數據
proxy:new ExtdataHttpProxy({
url:url})

//獲取json數據
reader:new ExtdataJsonReader({
totalProperty:totalProperty
root:root
}ExtdataRecordcreate([
{name:id}
{name:name}
{name:pass}
{name:sex}
{name:email}
]))
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//自動分頁
var _pageSize = ;
var _toolbar = new ExtPagingToolbar({
store:ds
pageSize:_pageSize
displayInfo:true
displayMsg:顯示第{}條到第{}條記錄一共{}條
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 數據訪問對象和標題欄顯示信息
* 即 Store和ColumnModel對象
*/
var _grid = new ExtgridGridPanel({
headerAsText: false // 如果有標題欄 隱藏標題欄
collapsible: true//可折疊
height:
width:
frame:true//圓角邊框
store:ds
title:測試yii整合Ext
cm:_cm
bbar : _toolbar
tbar : t_toolbar
});
dsload({params:{start:limit:_pageSize}});
_gridrender(test_id);

//_gridrender();
/* 用戶信息錄入框驗證 */
var fpanel;
function f(){
fpanel = new ExtformFormPanel
({
frame : true//邊框圓角並且有背景色
labelAlign : right
waitMsgTarget : true
autoScroll : true
buttonAlign : center
items : [
{xtype:"hidden"name:"id"}
{xtype:"textfield"fieldLabel:"用戶名"name:"name"anchor : ""allowBlank:false//是否允許為空
blankText:"用戶名不允許為空！"labelWidth : }
{xtype:"radiogroup"fieldLabel:"性 別"columns:allowBlank:falseblankText:"性別不允許為空！"items:[{boxLabel:男 name:sexinputValue:male}{boxLabel:女 name:sexinputValue:female}]}
{xtype:"textfield"fieldLabel:"密碼"name:"pass"allowBlank:false//是否允許為空
blankText:"密碼不允許為空！"anchor : ""}
{xtype:"textarea"fieldLabel:"電子郵箱"name:"email"allowBlank:false//是否允許為空
blankText:"郵箱不允許為空！"anchor : ""}
]
});
}

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

win = new ExtWindow
({
title:"新增用戶"
id:"win"
//animEl:"fly"
//layout:"fit"
width:
height:
closeAction : "close"
plain : true
modal : true// 模態窗口當打開當前窗口時後面的內容被遮擋
bodyStyle:"padding:px px"
layout:"form"
labelWidth:
items:[fpanel]
buttons:[
{text:"保存" handler :function()
{
//在保存的時候因為Id值為空所以不能轉換到後台後台報類型轉換異常可以將Id設值為
//在後台處理的時候對於值為的Id不獲取
fpanelfindByType("hidden")[]setValue();
fpanelgetForm()submit({
url : "addphp"
method : "POST"
waitMsg : "保存數據"

success : function(form action) {
// 業務成功
ExtMessageBoxalert(提示添加成功!);
winclose();
dsload({params:{ start:limit:_pageSize} });
}
failure : function(form action) {
// 業務失敗


obj = ExtutilJSONdecode(actionresponseresponseText);
ExtMessageBoxalert(提示 objerrorsreason);
winclose();

dsload({params:{ start:limit:_pageSize} });
}
});
}
}
{
text:"重置"handler:function()
{
fpanelgetForm()reset();
}
}
]
})
winshow();
// 因為重復使用window有可能在修改後fpanel中還存在數據所以要先重置

fpanelgetForm()reset();
}


/* 修改用戶信息 */
function updateUser()
{
var win_;
var a = ;
f();
var selectedRecord = _gridgetSelectionModel()getSelected();
// 獲得多個數據

if (selectedRecord == undefined || selectedRecord == null)
{
ExtMessageBoxalert("提示" "請先選擇一條記錄！");
} else {
win_ = new ExtWindow
({
title : "修改用戶"
width :
height :
closeAction : "hide"
plain : true
modal : true// 模態窗口當打開當前窗口時後面的內容被遮擋
bodyStyle : "padding:px px"
//layout : "form"
layout:"fit"
labelWidth :
items : [fpanel]
buttons : [
{text:"修改" handler:function()
{fpanelgetForm()submit
({
url:"editphp"
method:"POST"
waitMsg:"數據修改中"
success:function(formaction)
{
win_hide();
ExtMessageBoxalert("提示""數據修改成功");
_dsreload();
}
failure : function(form action) {
win_hide();
ExtMessageBoxalert("提示""<font color=red>數據修改失敗</font>");
_dsload();
}
});
}
}
{
text : "重置"handler:function()
{
fpanelgetForm()reset();
}
}
{
text: 關閉handler: function()
{
win_close();
}
}
]
});
}
win_show();
// 將選中的數據load到window中顯示
//alert(win_);
win_getComponent()getForm()loadRecord(selectedRecord);

}

/* 刪除用戶 */
function removeUser(btn)
{
var selectedRecord = _gridgetSelectionModel()getSelected();
if (selectedRecord == undefined || selectedRecord == null)
{
ExtMessageBoxalert("提示" "請先選擇一條記錄！");
} else {
ExtMessageBoxconfirm("提示信息" "確定要刪除嗎？" function(btn)
{
if (btn == "yes")
{
ExtAjaxrequest(
{
url:"delphp"
method:"POST"
params:{id : selectedRecorddataid}
success:function(request options)
{
var jsonRequest = ExtutilJSONdecode(requestresponseText);

if (jsonRequest == true)
{
ExtMsgalert("提示信息" "刪除成功");
_gridgetStore()remove(selectedRecord);
dsreload();
} else {
ExtMsgalert("提示信息" "<font color=red>刪除失敗</font>");
}
}
failure : function()
{
ExtMessageBoxshow
({
title : "提示消息"
msg : "刪除時發生錯誤"
});
}
});
}
})
}
}



function chkSelects()
{
var selects = _gridgetSelectionModel()getSelections();
alert("選中的總數為"+selectslength);

}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search(){
//fpanelGridPanel()reset();init();

loginsgetForm()submit({ //提交表單事件

//clientValidation: true
method:"POST" //提交方式(POSTT和GET)
url:"searchphp" //表單提交URL地址
waitMsg:"請稍等正在搜索" //提交未完成提示框內容
waitTitle:"正在搜索" //提示框標題信息
});
var url = searchphp;
// storeproxy=new ExtdataHttpProxy({url:url});
dsreload();
//_proxy = new ExtdataHttpProxy({url:url});
//dsload({params:{start:limit:_pageSize}});
//_gridrender(test_id);

}
function jump()
{
loginsshow();
}
//////////////////////////////

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

　　
Indexphp文件

復制代碼 代碼如下:
<?php
header("Content:text/html;charset=utf");
$link = mysql_connect("localhost""root""")or die(errormysql_error());
mysql_select_db("stu"$link);
mysql_query(set names utf);
$sql = "select count(*) num from men";
$num = mysql_query($sql);
$count = mysql_fetch_array($num);
$start = $_POST[start];
$limit = $_POST[limit];
$sql = "SELECT * FROM men limit {$start}{$limit}";
/*
if (!$_POST)
{
$sql = "SELECT * FROM member";
} else {
$sql = "select * from member limit {$start}{$limit}";
}
*/
$data = array();
$result = mysql_query($sql);
while(!!$info = mysql_fetch_array($resultMYSQL_ASSOC))
{
$data[] = $info;
}
//$j = json_encode($data);
$j = "{totalProperty:root:"json_encode($data)"}";
echo $j;
?>

　　
Addphp文件如下

復制代碼 代碼如下:
<?php
header("Content:text/html;charset=utf");
$link = mysql_connect("localhost""root""")or die(errormysql_error());
mysql_select_db("stu"$link);
mysql_query(set names utf);
$name = $_POST[username];
$pwd = $_POST[password];
$time = $_POST[regTime];
$email = $_POST[email];
/*
$name = aaaa;
$pwd = aaaa;
$time = ;
$email = aaaa;*/
$sql = "INSERT INTO men (usernamepasswordregTimeemail) VALUES ({$name}{$pwd}{$time}{$email})";
//mysql_query($sql)
if (mysql_query($sql))
{
echo ok;
}
?>

　　
Delphp文件如下

復制代碼 代碼如下:
<?php
header("Content:text/html;charset=utf");
$link = mysql_connect("localhost""root""")or die(errormysql_error());
mysql_select_db("stu"$link);
mysql_query(set names utf);
$id = $_POST[id];
$sql = "DELETE FROM men WHERE id={$id}";
if (mysql_query($sql))
{
echo ;
} else {
echo ;
}
?>

　　
數據庫文件mensql
數據庫名叫stu
表名為men
可以把下面的復制到一個文本文檔裡然後新建stu數據庫導入就可以

復制代碼 代碼如下:
phpMyAdmin SQL Dump
version


主機: localhost
生成日期: 年 月 日 :
服務器版本:
PHP 版本:
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

數據庫: `stu`



表的結構 `men`

CREATE TABLE `men` (
`id` int() unsigned NOT NULL auto_increment
`name` varchar() collate utf_unicode_ci NOT NULL
`pass` varchar() collate utf_unicode_ci NOT NULL
`sex` varchar() collate utf_unicode_ci NOT NULL
`email` varchar() collate utf_unicode_ci NOT NULL
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf COLLATE=utf_unicode_ci AUTO_INCREMENT= ;

導出表中的數據 `men`

INSERT INTO `men` (`id` `name` `pass` `sex` `email`) VALUES
( 趙四 female @qqcom)
( 測試修改 male test@qqcom)
( 趙勇 male sfsf@qqcom)
( 趙勇 male sfsf@qqcom)
( 趙勇 male sfsf@qqcom)
( asdfsf asfsfsf male safsf)
( male )
( female )
( female )
( safdsdf sdf female sdf)
( sdfsdf sdfsdf male sdf)
( test test male test@qqcom)
( saf asdfs male asdf)
( dfgdfg dfgdfg male dfgdfg)
( ertert erter male tertert)
( asdf sdf male sdf);
From:http://tw.wingwit.com/Article/program/PHP/201311/21009.html
    《解析Extjs與php數據交互(增刪查改)》本文是由PHP編程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.