<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檔案<?phpheader("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檔案如下：<?phpheader("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檔案如下：<?phpheader("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.5SET 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', '8739936@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');
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
