easyUI 表格
Posted 琢磨先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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();
}
以上是关于easyUI 表格的主要内容，如果未能解决你的问题，请参考以下文章