首页 > 代码库 > easyUI 表格
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 =http://www.mamicode.com/= ‘男‘||value == ‘f‘)"#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="http://www.mamicode.com/男" checked>男
<input type="radio" name="ssex" value="http://www.mamicode.com/女">女
</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();
}
easyUI 表格
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。