解析Extjs与php数据交互(增删查改)
2023-06-13 09:15:02 时间
<html>
<head>
//搜索暂时没做，数据是出来了，但是却没法显示
<linkrel="stylesheet"type="text/css"href="./js/resources/css/ext-all.css"/>
<scripttype="text/javascript"src="./js/jquery.js"></script>
<scripttype="text/javascript"src="./js/ext-base.js"></script>
<scripttype="text/javascript"src="./js/ext-all.js"></script>
<scripttype="text/javascript"src="./js/ext-lang-zh_CN-min.js"></script>
<scripttype="text/javascript">
Ext.QuickTips.init();//初始化快速提示对象
functiontest(){
Ext.Msg.alert("title","test-yii-ext");
}
functionrenderSex(value){
if(value=="male"){
return"<spanstyle="color:red;font-weight:bold;">红男</span><imgsrc="./images/male.jpg"/>";
}else{
return"<spanstyle="color:green;font-weight:bold;">绿女</span><imgsrc="./images/female.png"/>";
}
}
functioninit()
{
//1、创建url访问类。
varurl="index.php";
var_proxy=newExt.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=newExt.data.JsonReader({totelPropetty:_jsonProperty,root:_jsonRoot},_record);
/**
*封装一个客户端的Record对象缓存，为GridPanel提供数据入口
*需要两个必须的参数
*1、提供数据的地址：Proxy 代理类
*2、数据的读取方式：Reader类，这里通过JsonReader读取
*/
var_store=newExt.data.Store({
proxy:_proxy,
reader:_reader
});
/**
ColumnModel
*数据在页面上显示标题信息，
*顺序和Record对应
*sortable是否排序
*dataIndex进行对应的列，对应Record中的NAME
*
*handler方法中第一个参数表示父类的对象，本例中为GridPanel对象。
*第二个参数表示第几行。
*第三个参数表示第几列。
*/
var_cm=newExt.grid.ColumnModel([
newExt.grid.RowNumberer(),
newExt.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}
]);
/////////////////////////搜索
varlogins=newExt.form.FormPanel({
id:"myform",//分配表单id
title:"按用户名搜索",
width:400,
defaultType:"textfield",
frame:true,
//method:"POST",
collapsible:true,//可折叠
bodyPadding:5,
layout:"column",//列布局
margin:"00100",
items:[{
fieldLabel:"姓名",
labelWidth:40,
id:"name"
}],
buttons:[{
//xtype:"button",
text:"搜索",
margin:"0005",
handler:search
},{
//xtype:"button",
text:"隐藏",
margin:"0005",
handler:hide
}],
renderTo:"search"
})
logins.hide();
functionhide()
{
logins.hide();
}
///////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////
//获取数据
vards=newExt.data.Store({
//proxy告诉我们从哪获得数据,Ext.data.MemoryProxy专门解析js变量
//proxy:newExt.data.MemoryProxy(data),
//通过http获取数据
proxy:newExt.data.HttpProxy({
url:url}),
//获取json数据
reader:newExt.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=newExt.PagingToolbar({
store:ds,
pageSize:_pageSize,
displayInfo:true,
displayMsg:"显示第{0}条到第{1}条记录，一共{2}条",
emptyMsg:"暂无数据"
});
//顶部工具栏按钮
vart_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=newExt.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();
/*用户信息录入框,验证 */
varfpanel;
functionf(){
fpanel=newExt.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"}
]
});
}
varwin;
/*增加用户 */
functionaddUser()
{
f();
win=newExt.Window
({
title:"新增用户",
id:"win",
//animEl:"fly",
//layout:"fit",
width:350,
height:250,
closeAction:"close",
plain:true,
modal:true,//模态窗口，当打开当前窗口时，后面的内容被遮挡
bodyStyle:"padding:3px003px",
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();
}
/*修改用户信息 */
functionupdateUser()
{
varwin_2;
vara=3;
f();
varselectedRecord=_grid.getSelectionModel().getSelected();
//获得多个数据
if(selectedRecord==undefined||selectedRecord==null)
{
Ext.MessageBox.alert("提示","请先选择一条记录！");
}else{
win_2=newExt.Window
({
title:"修改用户",
width:350,
height:250,
closeAction:"hide",
plain:true,
modal:true,//模态窗口，当打开当前窗口时，后面的内容被遮挡
bodyStyle:"padding:3px003px",
//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("提示","<fontcolor="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);
}
/*删除用户 */
functionremoveUser(btn)
{
varselectedRecord=_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)
{
varjsonRequest=Ext.util.JSON.decode(request.responseText);
if(jsonRequest==true)
{
Ext.Msg.alert("提示信息","删除成功");
_grid.getStore().remove(selectedRecord);
ds.reload();
}else{
Ext.Msg.alert("提示信息","<fontcolor="red">删除失败</font>");
}
},
failure:function()
{
Ext.MessageBox.show
({
title:"提示消息",
msg:"删除时发生错误"
});
}
});
}
})
}
}
functionchkSelects()
{
varselects=_grid.getSelectionModel().getSelections();
alert("选中的总数为："+selects.length);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
functionsearch(){
//fpanel.GridPanel().reset();init();
logins.getForm().submit({//提交表单事件
//clientValidation:true,
method:"POST",//提交方式(POSTT和GET)
url:"search.php",//表单提交URL地址
waitMsg:"请稍等,正在搜索...",//提交未完成提示框内容
waitTitle:"正在搜索",//提示框标题信息
});
varurl="search.php";
//store.proxy=newExt.data.HttpProxy({url:url});
ds.reload();
//_proxy=newExt.data.HttpProxy({url:url});
//ds.load({params:{start:0,limit:_pageSize}});
//_grid.render("test_id");
}
functionjump()
{
logins.show();
}
//////////////////////////////
}
Ext.onReady(init);
</script>
</head>
<body>
<pstyle="height:10px;"></p>
<divid="test_id"></div>
<divid="search"></div>
</body>
</html>
Index.php文件
<?php
header("Content:text/html;charset=utf-8");
$link=mysql_connect("localhost","root","123456")ordie("error".mysql_error());
mysql_select_db("stu",$link);
mysql_query("setnamesutf8");
$sql="selectcount(*)numfrommen";
$num=mysql_query($sql);
$count=mysql_fetch_array($num);
$start=$_POST["start"];
$limit=$_POST["limit"];
$sql2="SELECT*FROMmenlimit{$start},{$limit}";
/*
if(!$_POST)
{
$sql2="SELECT*FROMmember";
}else{
$sql2="select*frommemberlimit{$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")ordie("error".mysql_error());
mysql_select_db("stu",$link);
mysql_query("setnamesutf8");
$name=$_POST["username"];
$pwd=$_POST["password"];
$time=$_POST["regTime"];
$email=$_POST["email"];
/*
$name="aaaa";
$pwd="aaaa";
$time="2011-12-31";
$email="aaaa";*/
$sql="INSERTINTOmen(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")ordie("error".mysql_error());
mysql_select_db("stu",$link);
mysql_query("setnamesutf8");
$id=$_POST["id"];
$sql="DELETEFROMmenWHEREid={$id}";
if(mysql_query($sql))
{
echo1;
}else{
echo0;
}
?>
数据库文件men.sql
数据库名叫：stu
表名为：men
可以把下面的复制到一个文本文档里，然后新建stu数据库，导入就可以。
--phpMyAdminSQLDump
--version2.11.2.1
--http://www.phpmyadmin.net
--
--主机:localhost
--生成日期:2012年01月11日10:02
--服务器版本:5.0.45
--PHP版本:5.2.5
SETSQL_MODE="NO_AUTO_VALUE_ON_ZERO";
--
--数据库:`stu`
--
----------------------------------------------------------
--
--表的结构`men`
--
CREATETABLE`men`(
`id`int(11)unsignedNOTNULLauto_increment,
`name`varchar(50)collateutf8_unicode_ciNOTNULL,
`pass`varchar(32)collateutf8_unicode_ciNOTNULL,
`sex`varchar(10)collateutf8_unicode_ciNOTNULL,
`email`varchar(50)collateutf8_unicode_ciNOTNULL,
PRIMARYKEY (`id`)
)ENGINE=InnoDB DEFAULTCHARSET=utf8COLLATE=utf8_unicode_ciAUTO_INCREMENT=28;
--
--导出表中的数据`men`
--
INSERTINTO`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");
相关文章
- php案例 往某个目录下创建文件并写入数据
- php静态延迟方法,phpstatic延迟静态绑定_PHP教程
- PHP连接MySQL数据库的步骤与方法（php如何连接mysql）
- 服务？探索Linux如何启动PHP服务（linux是否启动php）
- PHP实现从MySQL数据库中读取信息（php读取mysql数据）
- Linux系统下如何快速安装PHP（linux命令安装php）
- PHP实现MSSQL数据库高效操作（php操作mssql）
- 数据快速检索MySQL中的数据：使用PHP（php检索mysql）
- 使用PHP操作Redis实例：简单高效的数据存储方案（php操作redis实例）
- 轻松实现高效数据调用：PHP如何与Redis集成（php调用redis）
- PHP使用Redis实现数据存储（php连接redis）
- 使用PHP连接MySQL数据库实现数据操作（php连接mysql类）
- Android实现PHP连接MySQL进行数据交互（android通过php连接mysql）
- 检测PHP对MSSQL数据库操作的能力（检测php_mssql）
- 技术使用PHP与MSSQL高效连接：实现无缝关联（php连接mssql的）
- PHP封装MSSQL，提升高效开发力度（php mssql 封装）
- PHP简易指南：连接MySQL数据库（php连接mysql数据库）
- 用PHP将数据导入到Foxmail
- 用php和MySql来与ODBC数据连接
- PHP读取MySQL数据代码
- PHP和Mysqlweb应用开发核心技术第1部分Php基础－1开始了解php
- PHP数据集构建JSON格式及新数组的方法
- php获取通过http协议post提交过来xml数据及解析xml
- php中的PHP_EOL换行符详细解析
- php全角字符转换为半角函数