解析Extjs与php数据交互(增删查改)_PHP

php中文网

发布时间：2016-06-01 12:05:49

1066人浏览过

来源于php中文网

原创

复制代码

代码如下:

悟智写作

易开即用的AI写作平台

下载

//搜索暂时没做，数据是出来了，但是却没法显示

<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 "红男<img src='./images/male.jpg' / alt="解析Extjs与php数据交互(增删查改)_PHP" >"; } else { return "绿女<img src='./images/female.png' / alt="解析Extjs与php数据交互(增删查改)_PHP" >"; } } function init() { //1、创建url访问类。 var url = 'index.<a style="max-width:90%" title= "php" href="https://www.php.cn/zt/15714.html" target="_blank">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 数据访问对象和标题栏显示信息 * 即 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("提示","数据修改失败"); _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("提示信息", "删除失败"); } }, 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>

Index.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文件如下：
复制代码代码如下:
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文件如下：
复制代码代码如下:
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');

如何用PHP快速搭建基础框架_新手入门从零构建PHP框架实战流程【教程】

cPanel面板如何更新PHP版本_常见主机管理面板操作指南【教程】

php源码读取大文件超时_调高maxexecutiontime与分块读取【技巧】

PHP如何制作RESTfulAPI接口_PHP设计API接口指南【教程】

c文件怎么改成php_C语言源文件修改为php格式方法【方法】