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显示学生信息，并创建相应的按钮

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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层

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<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层

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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层

?
1
2
3
4
5
//添加保存
    public void addStudent(Student stu)
    {
        new StudentDAO().insert(stu);
    }

　　DAO层

?
1
2
3
4
5
6
7
8
9
10
11
12
//添加数据
    public void insert(Student stu)
    {
        init();
         
        se.save(stu);
         
         
         destroy();
          
         
    }

　　

 

posted @   琢磨先生  阅读(1934)  评论(0)  编辑  收藏  举报
AmazingCounters.com
点击右上角即可分享
微信分享提示