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(); }