easyUI 表格

1.创建
<table id ="ID"></table>

2.属性

dategrid：
columns
列的定义的数组
URl：访问远程数据的数组
[“total“:总记录条数，“row”：[{行的对象}]]
toolbar：工具栏
pagination=true/false
是否显示分页栏
列
field
列对应的属性名
title
表头标题
checkbox:true/false
是否是复选框列
必须要同时设置filed

1.创建表格

<table id="hh"></table>

2、创建datagrid显示学生信息，并创建相应的按钮

<script type="text/javascript">
$(function(){

	$("#hh").datagrid({

		url:'StudentServlet',
	//冻结列
	frozenColumns:[[
	                {field:'id',checkbox:true},//复选框
	                {field:'sno',title:'学号',width:100}  

	                ]],
	              //定义列
	        	    columns:[[    

	        	        {field:'sname',title:'姓名',width:200,align:'center'},
	        	        {field:'ssex',title:'性别',width:200,align:'center',
	        	        	formatter: function(value,row,index){
	        	        		if(value == '男'||value == 'f')
	        	        			{
	        	        				return '男';
	        	        			}
	        	        		else
	        	        			{
	        	        				return '女';
	        	        			}
	        	        	},
	        	        	styler:function(value,row,index){
	        	        		if(value=='男'|| value=='f')
	        	        			{
	        	        				return 'background-color:#ccccff;color:red;';

	        	        			}
	        	        	}
	        	        },

	        	        {field:'sbirthday',title:'生日',width:200,align:'right'},
	        	        {field:'sclass',title:'班级',width:200,align:'center'}

	        	    ]] ,
	        	    fitColumns:true,       //列自适应宽度，不能和冻结列同时设置为true
	        	    striped:true,           //斑马线
	        	    idField:'sno',     //主键列
	        	    rownumbers:true,        //显示行号
	        	    singleSelect:false,      //是否单选
	        	    pagination:true,         //分页栏
	        	    pageList:[8,16,24,32] ,  //每页行数选择列表
	        		pageSize:8   ,            //初始每页行数
	        		remoteSort:false,        //是否服务器端排序，设成false才能客户端排序
	        		//sortName:'unitcost',     //定义哪些列可以进行排序。

	        		toolbar:[

							{
	 							iconCls:'icon-search',
								 text:'查询',
								 handler:function(){
									 $("#hh").datagrid('load')},//加载和显示第一页的所有行

							},

	        		         {
	        		        	 iconCls:'icon-add',
	        		        	 text:'添加',
	        		        	 handler:function(){
	        		        		 //清除表单旧数据
	        		        		 $("#form1").form("reset");//重置表单数据

	        		        		 $("#saveStu").dialog('open');
	        		        		 },
	        		         },
	        		         {
	        		        	 iconCls:'icon-edit',
	        		        	 text:'修改',
	        		        	 handler:function(){
	        		        		 },
	        		         },
	        		         {
	        		        	 iconCls:'icon-delete',
	        		        	 text:'删除',
	        		        	 handler:function(){
	        		        		 },
	        		         }
	        		         ],
	});
})

</script>

　　3.创建点击添加按钮时的弹窗dialog,并通过post方式发送表单的信息传给URL地址的Servlet层

<div class="easyui-dialog" id="saveStu" style="width:400px; height:300px"
title="添加学生"
data-options="{
closed:true,
modal:true,
buttons:[{
text:'保存',
iconCls:'icon-save',
	handler:function(){
		$('#form1').form('submit',{

			url:'SaveStudentServlet',
			onSubmit:function(){
				var isValid = $(this).form('validate');
				if(!isValid)
				{
					$.messager.show({

						title:'消息',
						msg:'数据验证未通过'
					});
				}
				return isValid;	// 返回false终止表单提交
			},
			success:function(data){
				var msg = eval('('+ data +')');//eval是js的方法
			if(!msg.success)
				{
					alert(msg.message);
				}
				else
				{
				 $('#hh').datagrid('load');
					$.messager.show({

						title:'消息',
						msg:'数据验证通过,保存成功'
					});
					$('#saveStu').dialog('close');
				}

			}
		});
	}

},

{
text:'取消',
iconCls:'icon-cancel',
	handler:function(){$('#saveStu').dialog('close')},
}]
}">
	<form action="" id="form1" method="post"><br><br>
		<table border="0" width=100%>
			<tr>
				<td align="right" width="30%">学号：</td>
				<td>
					<input class="easyui-textbox" id="sno" name="sno"
					data-options="required:true,validType:'length[3,3]'">
				</td>
			</tr>
			<tr>
				<td align="right" width="30%">姓名：</td>
				<td>
					<input class="easyui-textbox" id="sname" name="sname"
					data-options="required:true,validType:'length[2,3]'">
				</td>
			</tr>
			<tr>
				<td align="right" width="30%">性别：</td>
				<td>
					<input type="radio" name="ssex" value="男" checked>男
					<input type="radio"  name="ssex" value="女">女

				</td>
			</tr>

			<tr>
				<td align="right" >生日：</td>
				<td>
					<input class="easyui-datebox" id="sbirthday" name="sbirthday"
					data-options="required:false,">
				</td>
			</tr>

			<tr>
				<td align="right" >班级：</td>
				<td>
					<input class="easyui-textbox" id="sclass" name="sclass"
					data-options="required:true,validType:'length[5,5]'">
				</td>
			</tr>
		</table>

	</form>

</div>

　　servlet层

package com.hanqi.web;

import java.io.IOException;
import java.text.SimpleDateFormat;

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

import com.hanqi.entity.Student;
import com.hanqi.service.StudentService;

/**
 * Servlet implementation class SaveStudentServlet
 */
public class SaveStudentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public SaveStudentServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		//转码
				request.setCharacterEncoding("UTF-8");
				response.setCharacterEncoding("UTF-8");
				response.setContentType("text/html");

		//接受参数
				String sno = request.getParameter("sno");
				String sname = request.getParameter("sname");
				String ssex= request.getParameter("ssex");
				String sbirthday = request.getParameter("sbirthday");
				String sclass = request.getParameter("sclass");

				String msg = "{'success':true,'message':'保存成功'}";
				if(sno != null)
				{
					try
					{
						Student stu = new Student();
						stu.setSno(sno);
						stu.setSclass(sclass);
						stu.setSname(sname);
						stu.setSsex(ssex);
						if(sbirthday !=null && !sbirthday.trim().equals(""))
						{
							SimpleDateFormat  sdf = new SimpleDateFormat("yyyy-MM-dd");
							stu.setSbirthday(sdf.parse(sbirthday));
						}
						new  StudentService().addStudent(stu);
					}
					catch(Exception e)
					{
						 msg = "{'success':false,'message':'访问失败'}";
					}

					response.getWriter().print(msg);
				}
				else
				{

					 msg = "{'success':false,'message':'访问异常'}";
					response.getWriter().print(msg);
				}

	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

　　service层

//添加保存
	public void addStudent(Student stu)
	{
		new StudentDAO().insert(stu);
	}

　　DAO层

//添加数据
	public void insert(Student stu)
	{
		init();

		se.save(stu);

		 destroy();

	}