伏龙阁资源网

解析Extjs与php数据交互(增删查改)
站长资源 2024/11/26 佚名
2 0
复制代码 代码如下:
<html>
<head>
//搜索暂时没做，数据是出来了，但是却没法显示
<link rel="stylesheet" type="text/css" href="./js/resources/css/ext-all.css"/>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/ext-base.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/ext-all.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/ext-lang-zh_CN-min.js"><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 数据访问对象和标题栏显示信息
  * 即 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');

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/26

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接