`

extjs 动态表格完整版

阅读更多

前台页的源码
test2.js

<!--test2.html所需要的js___start -->

Ext.onReady(function() {

 Ext.QuickTips.init();//  浮动信息提示

 Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地
 
 /*刚打开页面等待中,需要屏蔽*/  
 var  myMask;   
  Ext.onReady(function(){   
 myMask= new Ext.LoadMask(Ext.getBody(), {msg:"loading..."});   
 myMask.show();   
 }); 
  
 // 定义数据源为远程代理和JSON数据格式�
 var ds = new Ext.data.Store({
  proxy : new Ext.data.HttpProxy({
   // 这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件
   url : '../ext.do?method=date',
   failure : function() { 
   Ext.Msg.alert("数据加载失败!请检查"); 
   },  
 success:function(){
 myMask.hide();  
  }
    
  }),
  
  
  
  reader : new Ext.data.JsonReader({
   // 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致!!
   totalProperty : 'totalProperty',
   root : 'root'

  }, [{

   name : 'id'

  }, {

   name : 'name'

  }, {

   name : 'sex'

  }, {

   name : "birthday",

   type : "date",

   dateFormat : "Y-n-j"

  }, {

   name : 'email'

  },
  {

   name : 'edit'

  }]
  )
 
 });
 
   
 // 加载首页数据,每页显示10条记录�

 ds.load({

  params : {

   start : 0,

   limit : 10

  }

 });

 // 定义复选框

 var sm = new Ext.grid.CheckboxSelectionModel();

 // 定义列模型

 var cm = new Ext.grid.ColumnModel([

   // new Ext.grid.RowNumberer(),// 添加自动行号�

   sm,// 添加复选框�

   {

    header : '学号',

    width : 40,

    dataIndex : 'id'
    
   }, {

    header : '姓名',
    
    width : 40,
    
    dataIndex : 'name',
    
    sortable:true,

    editor:new Ext.form.TextField()
   }, {

    header : '性别',

    width : 40,

    dataIndex : 'sex',

    renderer : changeSex,
    
    sortable:true,
    
    editor:new Ext.form.ComboBox({transform:"sexList",triggerAction:"all",lazyRender:true})

   // 红男绿女

   }, {

    header : '出生日期',

    dataIndex : 'birthday',

    renderer : Ext.util.Format.dateRenderer('Y年m月d日'),
    
    sortable:true,
    
    editor:new Ext.form.DateField({format:'Y年m月d日'})

   // 格式化日期

   }, {

    header : '电子邮件',

    width : 120,

    dataIndex : 'email',

    renderer : sendEmail,
    
    sortable:true,

    editor:new Ext.form.TextField()

   // 单击启动邮件客户端发送邮件

   },
   
   {

    header : '操作',

    width :25,

    dataIndex : 'edit',

    renderer : sendEdit
   }
   
   ]);

 // 设置所有列字段默认排序

 cm.defaultSortable = true;

 // 按要求渲染性别的函数�

 function changeSex(value) {

  if (value == '男') {

   return "<span style='color:red;font-weight:bold;'>男</span>";

  } else {

   return "<span style='color:green;font-weight:bold;'>女</span>";

  }

 }

 //按要求渲染email的函数

 function sendEmail(value) {

  return "<a href=mailto:" + value + ">" + value + "</a>";

 }
 
 //按要求渲染edit的函数

 function sendEdit(value) {

  return "<button>" + value + "</button>";

 }
 
 //  定义一个表格面板�

 var grid = new Ext.grid.EditorGridPanel({

  id : 'student-grid',// 设置标识ID,方便以后引用!
  title : '学员信息管理�',// 标题
  // 显示数据的地方,注意这里的renderTo要和html文件中的div要一致!!
  renderTo : 'myGrid',// 显示表格的地方显示表格的地方

  sm : sm,// 复选框

  cm : cm,// 列模型

  ds : ds,// 数据源�

  stripeRows : true,// 加上行条纹

  loadMask : true,// 加载数据时遮蔽表格

  border : true,// 加上边框

  frame : true,// 显示天蓝色圆角框

  autoHeight : true,// 自动设置高度,这个配置很重要�

  width : 700,

  x : 1,//  设置初始位置横坐标�

  y : 1,//  设置初始位置纵坐标�

  // enableDragDrop : true,//容许行的拖曳

  collapsible : true, // 面板可以折叠

  // titleCollapse : true,// 单击表头任何地方都可以折叠�

  floating : true,// 设置浮动,能否拖动成功就靠它了,注意设置浮动后它就置顶了�

  // 实现拖曳效果,参考官方文档�
  draggable : {

   insertProxy : false,

   onDrag : function(e) {

    var pel = this.proxy.getEl();

    this.x = pel.getLeft(true);

    this.y = pel.getTop(true);
   
    var s = this.panel.getEl().shadow;// 拖曳中消除原位置的阴影�
    
    if (s) {

     s.realign(this.x, this.y, pel.getWidth(),

     pel.getHeight());

    }

   },

   endDrag : function(e) {// 拖曳结束后保存位置效果�

    this.panel.setPosition(this.x, this.y);

   }

  },

  // UI视图配置

  viewConfig : {

   forceFit : true

  //强制适应分布宽度�

  },

  // 表格顶部动作或按钮工具栏

  tbar : new Ext.Toolbar({

   items : [{

    id : 'btnAdd',

    text : "添加�",

    handler : function() {

     Ext.MessageBox.alert("添加",

     "做添加的操作");

    }

   }, new Ext.Toolbar.SplitButton({}), {

    id : 'btnEdit',

    text : "编辑",

    handler : function() {

     Ext.MessageBox.alert("编辑",

     "做编辑的操作");

    }

   }, '-', {

    id : 'btnDel',

    text : "删除",

    handler : function() {

     Ext.MessageBox.alert("删除",

     "做删除的操作�");

    }

   }]

  }),

  // 表格底部分页工具栏

  bbar : new Ext.PagingToolbar({

   pageSize : 6,

   store : ds,

   displayInfo : true,

   displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',

   emptyMsg : "没有记录"

  })

 });
 
 
 //表格编辑事件
 grid.on("afteredit",afterEdit,this);

      function afterEdit(obj){
          var r=obj.record;
       var id=r.get("id");
       var name=r.get("name");
       var sex=r.get("sex");
       var bornDate=r.get("birthday");
       var email=r.get("email");
      // var c=this.record2obj(r);
      // Ext.MessageBox.alert('show',"【id:"+id+"】【name:"+name+"】【sex:"+sex+"】【bornDate:"+bornDate+"】【email:"+email+"】");
       //字符转日期格式
       var date=Ext.util.Format.date(bornDate,"Y-m-d");
       //alert(date);
       //调用异步方法
       rollRequest(id,name,sex,date,email);
       
};

//异步调用方法
function rollRequest(id,name,sex,bornDate,email){
  //alert(id);
  Ext.Ajax.request({
	url:'../ext.do?method=update',
	success:function(response,config){
	//alert(config.url+"-"+config.method);
  //成功后的刷新事件	
	ds.load({
    params : {
   start : 0,
   limit : 10
   }});
	//Ext.MessageBox.alert("result",response.responseText); //返回值
	//显示[修改成功]
	 document.getElementById("loading").style.display="block";
	 //透明度
	 Ext.get('loading').setOpacity(1);
	 Ext.get('loading').setOpacity(0.0,{duration:2,callback:function(){
     }}); 
  },
  failure:function(){
  Ext.MessageBox.alert("result","失败");
  },
  method:"post",
  //传入后台的参数
  params:{'id':id,'name':name,'sex':sex,'bornDate':bornDate,'email':email}
  
  });
}


//给表格单元格加单击事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    //如果是编辑列允许操作
     if(columnIndex==6){
	    var record = grid.getStore().getAt(rowIndex);   //Get the Record
	    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
	    var data = record.get(fieldName);
	   // Ext.MessageBox.alert('show','当前选中的数据是:'+data+"-"+record.id);
	   //字符转日期格式
        var bornDate=Ext.util.Format.date(record.get('birthday'),"Y-m-d");
	   //调用子窗口
	   showDialog(record.get('id'),record.get('name'),record.get('sex'),bornDate,record.get('email'));
    } 
 }

});
  
  
   //子窗口
 function showDialog(id,name,sex,birthday,email){
  // alert(id+"-"+name+""+sex+"-"+birthday+"-"+email);
    var result=id+","+name+","+sex+","+birthday+","+email;
   var doc=window.showModalDialog("dialog.jsp?result="+result,"ddd",
   "font-size:20px;dialogWidth:400px;dialogHeight:400px;scrollbars=no;status=no");
   
   if(doc=="ok"){
      window.location.reload();
   }
 }
  
 <!--test2.html所需要的js___end --> 
   
   
    




test2.html

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="../js/test2.js"></script>

<!-- 修改层的样式 -->
   <style type="text/css">
	#loading {
	position:absolute;
	left:20%;
	top:25%;
	padding:2px;
	z-index:20001;
	height:auto;
	}
	#loading .loading-indicator {
	background:white;
	color:#444;
	font:bold 20px tahoma, arial, helvetica;
	padding:10px;
	margin:0;
	height:auto;
	}
	#loading-msg {
	font: normal 18px arial, tahoma, sans-serif;
 }
  </style>
</head>

<body>

 <!-- 表格需要的html元素 -->
 <select id="sexList">
 <option value="男">男 </option>
 <option value="女">女 </option>
</select>
<div id="myGrid"></div>

 <!-- 默认不显示修改层 -->
<div id="loading" style="background-color:#00CC33;width:120px;height:20px;display:none;">
<div class="loading-indicator"> <span id="loading-msg" style="color:red;font-size:20px;">修改成功</span></div>
</div>

</body>

</html>
 


dialog.js

 <!--dialog.jsp所需要的js___start--> 
  
  function startOnload(temp){
   //alert(temp);
 //分割从页面传来的参数  
 var result=temp;
 var list=result.split(',');
 var id=list[0];    
 var name=list[1];
 var sex=list[2];
 var birthday=list[3];
 var email=list[4];
 
 //alert(id+"-"+name+"-"+sex+"-"+birthday+"-"+email);
 
LoginPanel = function(){
    var win, f;
    var buildForm = function(){
        // 构建一个表单面板容器
        f = new Ext.form.FormPanel({
            // 给面板的body元素指定自定义的CSS样式信息
            bodyStyle : 'padding-top:6px',
            // 容器中元素的默认类型
            defaultType : 'textfield',
            // 标签的默认对齐方式
            labelAlign : 'right',
            // 指定标签的默认长度
            labelWidth : 55,
            // 标签与字段录入框之间的空白
            labelPad : 0,
            // 窗口是否显示背景色
            frame : true,
            // 容器中组件默认统一配置选项
            defaults :{
                // 验证字段是否能为空
                allowBlank : false,
                // 字段宽度
                width : 158
            },
            // 指定容器中的元素
            items : [{
                // 给元素添加CSS样式
                    cls : 'user',
                    // 元素的名称
                    name : 'name',
                    //默认值
                    value: name,
                    // 指定字段的标签
                    fieldLabel : '姓名',
                    // 为空时提示信息
                    blankText : '姓名不能为空',
                    allowBlank : false,
                    id:'name'
                },{
                    cls : 'key',
                    name : 'sex',
                    fieldLabel : '性别',
                    blankText : '性别不能为空',
                    xtype:'combo',
                    store:['男','女','保密'],
                    emptyText:'请选择性别',
                    forceSelection:true,
                    value:sex,
                   // readOnly:true,
                    allowBlank : false
                     
                },
                {
                    cls : 'key',
                    xtype:'datefield',
                    //修改日期样式
                     format:'Y-n-j',
                    name : 'bornDate',
                    value:birthday,
                    fieldLabel : '出生日期',
                    blankText : '出生日期不能为空',
                    inputType : 'text'
                },
                {
                    cls : 'key',
                    name : 'email',
                    vtype:'email',
                    fieldLabel : '电子邮件',
                    value:email,
                    blankText : '电子邮件不能为空',
                    inputType : 'text'
                },
                {
                    cls : 'key',
                    name : 'id',
                    value:id,
                    inputType : 'hidden'
                }]
        });
    };
    var buildWin = function(){
        // 构建一个窗口面板容器
        win = new Ext.Window({
            // 把该面板绑定于win这个DIV对象上
            el : 'win',
            // 窗口面板标题
            title : '学生信息管理',
            // 窗口面板宽度
            width : 265,
            // 高度
            height : 200,
            // 该面板布局类型
            layout : 'column',
            // 面板是否可以关闭及打开
            collapsible : true,
            defaults :{
                // 容器内元素是否显示边框
                border : false
            },
            items :{
                // 指定内部元素所占宽度1表示100% .5表示50%
                columnWidth : 1,
                // 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
                items : f
            },
            // 面板中按钮的排列方式
            buttonAlign : 'left',
            // 面板底部的一个或多个按钮对象
            buttons : [{
                // 按钮上需显示的文本
                    text : '修改',
                    // 单击按钮时响应的动作
                    handler : login
                },{
                    text : '重置',
                    handler : reset
                },{
                    text : '返回',
                    handler : link
                }]
        });
    };
    // 单击按钮时执行登陆操作
    var login = function(){
        // 执行当前表单面板的submit
        f.form.submit({
            // 动作发生期间显示的文本信息
                waitMsg : '正在修改......',
                // submit发生时指向的地址
                url : '../ext.do?method=update',
                // 表单提交方式
                method : 'POST',
                // 数据验证通过时发生的动作
                success : function(form, action){
                   // window.location.href = 'manage.ejf';
                    //获得表单元素为name的对象value值
                     //alert(f.findById('name').getEl().getValue());
                    //后台json返回的结果
                   alert(action.result.tips);
                   //关闭当前窗口
                   window.close();
                   //关闭窗口的返回值
                   window.returnValue="ok"; 
                },
                // 反之......
                failure : function(form, action){
                   // reset();
                    if (action.failureType == Ext.form.Action.SERVER_INVALID)
                        Ext.MessageBox.alert('警告', action.result.errors.msg);
                }
            });
    };
    // 清空当前表单面板内的数据
    var reset = function(){
        f.form.reset();
    };
    // 注册按钮指向的地址
    var link = function(){
        //window.open('http://easyjf.com/user.ejf?cmd=registerPU', '_blank')
        
        window.close();
    };
    return {
        init : function(){
            buildForm();
            buildWin();
            // 最后把窗口面板显示出来
            win.show();
        }
    }
}();
// 当前页面DOM加载完毕后,在LoginPanel作用域内执行LoginPanel.init.
Ext.onReady(LoginPanel.init, LoginPanel);
  
  }
  
    <!--dialog.jsp所需要的js___end--> 


dialog.jsp弹出框

<%@ page language="java"  pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>dialog.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
		<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext-all.js"></script>
		
		<script type="text/javascript" src="../js/dialog.js"></script>
		
		<script type="text/javascript">
        Ext.BLANK_IMAGE_URL ='resources/images/default/s.gif';
        Ext.QuickTips.init();//初始化鼠标停留时的显示框
        Ext.form.Field.prototype.msgTarget = 'side';
       </script>
     
<style type="text/css">
    .user{}{ background:url(images/user.gif) no-repeat 1px 2px; }
    .key{}{ background:url(images/key.gif) no-repeat 1px 2px;  }
    .key,.user{}{
        background-color:#FFFFFF;
        padding-left:20px;
        font-weight:bold;
        color:#000033;
    }
</style>

	</head>

	<body bgColor="#DFE8F6">
	     <%  
	        //接收页面参数
            request.setCharacterEncoding("utf-8");
            String result=new String(request.getParameter("result").getBytes("iso8859-1"),"gbk");
         %>
         <!-- 面板显示层 -->
        <div id="win" class="x-hidden"></div>
        
	</body>
    
      <!-- 必须放到最后调用dialog.js中的startOnload方法传值-->
     <script type="text/javascript">
      var temp="<%=result%>";
      startOnload(temp);
      
     </script>
	
</html>




服务器xml的源码
wed.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
      <servlet-name>ext</servlet-name>
      <servlet-class>org.ext.ser.ExtSerlet</servlet-class>
</servlet>	
 
 <servlet-mapping>
   <servlet-name>ext</servlet-name>
   <url-pattern>*.do</url-pattern>
 </servlet-mapping>
            
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>




servlet的源码
ExtSerlet.java

package org.ext.ser;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.ext.db.AccessStudent;


public class ExtSerlet extends HttpServlet{

	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req, resp);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
    
	System.out.println("loading....");	
	
	  try {
		//让前台页面的loading效果更明示  
		Thread.sleep(2000);
	} catch (InterruptedException e) {
		e.printStackTrace();
	}
	 //接收页面参数。。date为加载数据 update为更新数据	
     String str=request.getParameter("method");
     //访问数据库对象
     AccessStudent as=new AccessStudent();
     //设置页面字符编码
     request.setCharacterEncoding("UTF-8");
     response.setCharacterEncoding("UTF-8");
     
     if(str.equals("date")){
     //返回学生集合 
     List<Student> list=as.getStudent();
     
     //创建一个json对象。。
     JSONObject json = new JSONObject();
     //设置json中的页数
     json.put("totalProperty", 100);
     //把集合中的数据放到json中。。
     JSONArray arr = JSONArray.fromObject(list);
     //设置json的根点
     json.put("root", arr);
     //把json到放response中 ext中的grid表格的数据必须封装到json中 传到页面
     response.getWriter().print(json);
     //关闭reqsponse
     response.getWriter().close();
     
     }else if(str.equals("update")){
     //获得页面传来的参数	 
     int id=Integer.parseInt(request.getParameter("id"));
     String name=request.getParameter("name");
     String sex=request.getParameter("sex");
     String bornDate=request.getParameter("bornDate");
     String email=request.getParameter("email");
   System.out.println(id+"-update-"+bornDate);  
    Student stu=new Student();
 	stu.setId(id);
 	stu.setSex(sex);
 	stu.setName(name);
 	stu.setBirthday(bornDate);
 	stu.setEmail(email);
 	//开始更新
 	as.update(stu);
 	
     }
     
    //必须返回一个json给前台页面 ,否则前台页面报错
    response.getWriter().print("{success:true,tips:'修改成功'}");
  	response.getWriter().flush();
	}

	

}



javaBean存放数据
Student.java

package org.ext.ser;

public class Student {
   private int id;
   private String sex;
   private String birthday;
   private String email;
   private String name;
   //用来显示编辑
   private String edit;
   
public String getEdit() {
	return edit;
}
public void setEdit(String edit) {
	this.edit = edit;
}
public String getSex() {
	return sex;
}
public void setSex(String sex) {
	this.sex = sex;
}
public String getBirthday() {
	return birthday;
}
public void setBirthday(String birthday) {
	this.birthday = birthday;
}
public String getEmail() {
	return email;
}
public void setEmail(String email) {
	this.email = email;
}
public String getName() {
	return name;
}
public void setName(String name) {
	this.name = name;
}
public int getId() {
	return id;
}
public void setId(int id) {
	this.id = id;
}
}



数据库操作的源码
AccessStudent.java

package org.ext.db;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import org.ext.ser.Student;

public class AccessStudent extends DBConnection{
   
	public List<Student> getStudent(){
	 List<Student> list=new ArrayList<Student>();
	 Connection conn=this.getConnection();
	 String sql="select * from student";
	 try {
		PreparedStatement ps=conn.prepareStatement(sql);
		ResultSet rs=ps.executeQuery();
		while(rs.next()){
		Student sd=new Student();
		sd.setId(rs.getInt(1));
		sd.setName(rs.getString(2));
		sd.setSex(rs.getString(3));
		sd.setBirthday(rs.getString(4));
		sd.setEmail(rs.getString(5));
		sd.setEdit("编辑");
		list.add(sd);
		}
	} catch (SQLException e) {
		e.printStackTrace();
	}
	 return list;
	}
	
	
	public boolean update(Student stu){
		 int rs=0;
		 Connection conn=this.getConnection();
		 String sql="update student set name=?,sex=?,bornDate=?,email=? where id=?";
		 try {
			PreparedStatement ps=conn.prepareStatement(sql);
			ps.setString(1,stu.getName());
			ps.setString(2,stu.getSex());
			ps.setString(3,stu.getBirthday());
			ps.setString(4,stu.getEmail());
			ps.setInt(5,stu.getId());
			rs=ps.executeUpdate();
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
		 return (rs>0?true:false);
		}	

}



数据库连接的源码
DBConnection.java

package org.ext.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
	
   private String user="root";
   private String pass="root";
   private String url="jdbc:mysql://localhost/abc";
   private String path="org.gjt.mm.mysql.Driver";
   private Connection conn=null;
   
   public  Connection getConnection(){
	    if(conn==null){
	    	try {
				Class.forName(path);
				conn=DriverManager.getConnection(url, user, pass);
			    return conn;	
			} catch (Exception e) {
				e.printStackTrace();
			}
	    }
	    return conn; 
   }
   
   public void DBclose(){
	   if(conn!=null){
		   try {
			conn.close();
			conn=null;
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
	  }
   }
   
   public static void main(String[] args) {
	   DBConnection db=new DBConnection();
	   System.out.println(db.getConnection());
  }
}



Mysql语句的源码
use abc;
create table student (id int AUTO_INCREMENT primary key ,name varchar(20),sex varchar(2),
bornDate varchar(12),email varchar(20));

desc student;

insert into student (name,sex,bornDate,email) values('xiaoming','男','2010-2-1','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小王','男','2010-9-4','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小刘','男','2010-3-21','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小红','男','2010-8-11','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小半','男','2010-7-8','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('yoyo','女','2010-1-4','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('xxssl','女','2010-3-9','fsfsd@sina.com');
insert into student (name,sex,bornDate,email) values('小顺','女','2010-12-13','fsfsd@sina.com');


select * from student;


分享到:
评论

相关推荐

    ExtJS教程_完整版

    ExtJS自带的控件如窗口、表格、表单等能够在主流浏览器中保持一致的显示效果,从而减轻了浏览器兼容性的负担。其简单而强大的API设计使得创建复杂的用户交互变得简单,比如通过EventManager进行用户事件监听和处理,...

    ExtJs教程_完整版

    ### ExtJs教程_完整版 —— 第一章起步(1)关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架,专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...

    ExtJs教程_完整版.pdf

    ### ExtJs教程_完整版.pdf 知识点详解 #### 一、ExtJS概述与特点 **1.1 ExtJS是什么?** ExtJS是一个用于构建Web应用程序的强大且全面的JavaScript库。它以其丰富的用户界面组件、优秀的API文档以及对多种浏览器...

    深入浅出ExtJS第2版(完整版)

    《深入浅出ExtJS第2版(完整版)》是一本专注于ExtJS框架的深度解析与实践指导的书籍,旨在帮助读者全面理解并熟练掌握ExtJS的各项功能与应用技巧。ExtJS是一个用JavaScript编写的开源前端框架,它提供了一套丰富的...

    Extjs教材-完整版

    ### Extjs教材-完整版知识点概述 #### 一、ExtJS简介与特点 **ExtJS** 是一个基于JavaScript的开源框架,专为Web应用程序开发而设计。与其他JavaScript库相比,ExtJS提供了更为丰富的用户界面组件和更为优雅的编程...

    Extjs版本CRM完整代码

    学习这个CRM系统,你可以了解到如何使用ExtJS创建动态表格、实现分页、过滤和排序,以及如何设计复杂的表单和工作流。此外,还能了解如何利用Ajax技术与服务器进行数据交互,实现异步更新,以及如何优化性能和提高可...

    Extjs4.1版本中文版

    1. **组件化开发**:ExtJS的核心特性之一是组件化,它将UI元素抽象为可复用的组件,如按钮、表格、表单等。开发者可以方便地组合这些组件来创建复杂的用户界面。 2. **数据绑定**:ExtJS的数据绑定机制允许UI组件与...

    ExtJs4.0官方版本

    ExtJS 4.0提供了一套丰富的组件库,包括表格、面板、表单、树形结构等,所有组件都可以动态创建和修改。这使得开发者可以构建高度交互和可配置的用户界面。 4. Store管理 Store是ExtJS 4中处理数据的主要对象,它...

    Extjs6.60没有水印版本

    5. **"Extjs-6.6.0-trial.zip"**:这是一个包含ExtJS 6.6.0完整库的压缩文件,包含了框架的所有源代码、示例、文档和其他资源,开发者可以解压后在项目中引用,开始构建应用。 总的来说,"Extjs6.60没有水印版本"为...

    深入浅出EXTJS(第二版)完整清晰版

    《深入浅出EXTJS(第二版)》这本书作为学习EXTJS的强大辅助工具,不仅系统地介绍了EXTJS的基础知识,还涵盖了高级应用技巧,是开发者掌握EXTJS框架的理想选择。接下来,我们将围绕该书的主要内容进行深入探讨。 ##...

    深入浅出ExtJS(第2版).

    根据提供的标题、描述和标签,我们可以看出这是一本关于ExtJS技术的书籍——《深入浅出ExtJS(第2版)》。虽然给定的部分内容并没有提供具体的技术细节,但根据书名及其版本号,我们可以推测这本书是针对ExtJS框架...

    掏钱学extjs完全版

    **掏钱学EXTJS完全版**是一套全面深入学习EXTJS框架的专业教程,主要针对EXTJS 2.0版本进行讲解。EXTJS是一款强大的JavaScript库,用于构建富客户端Web应用程序,以其直观的组件化设计、丰富的用户界面和高度可定制...

    ExtJs 4.1.0 API中文版V0.2 Beta(Web版)

    它提供了丰富的组件库,包括表格、树形视图、图表、菜单、工具栏等,以及一套完整的MVC(模型-视图-控制器)架构,帮助开发者创建功能丰富的、交互性强的Web应用。版本4.1.0是ExtJS的一个重要里程碑,引入了许多新...

    extjs-4.1.1完整压缩包

    6. **图表组件**:EXTJS 4.1.1 包含各种图表组件,如柱状图、饼图、线图等,可用于展示数据统计和分析结果。 7. **拖放功能**:EXTJS 支持拖放操作,使得用户可以轻松地重新组织界面元素,提高交互性。 8. **触摸...

    extjs 写的动态加载、增删改查、拖拽Tree(完整版)

    ExtJS 是一个强大的JavaScript前端框架,用于构建交互式的Web应用程序,尤其在数据网格、图表、树形组件等方面表现优秀。动态加载、增删改查和拖拽功能是ExtJS TreePanel的重要特性,这些功能使得开发者可以创建出...

    extjs 中文帮助(完整版)

    这个“EXTJS中文帮助(完整版)”文档集合提供了全面的EXTJS学习和开发资源,旨在帮助开发者更高效地掌握EXTJS技术,实现复杂且功能丰富的Web应用程序。 EXTJS的核心特性包括组件化、数据绑定、可拖拽功能、灵活的...

Global site tag (gtag.js) - Google Analytics