EasyUI入门——CRUD

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

• easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
• easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
• 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
• HTML 网页的完整框架。
• easyui 节省了开发产品的时间和规模。
• easyui 非常简单，但是功能非常强大。

jQuery EasyUI下载

使用json时常用的jar

源码下载

EasyUI菜鸟教程

一、弹出对话框就行操作：

index.xml:

先引用一些css和js：

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/demo/demo.css"><script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>

body里面的代码：

    <!-- 创建表单 -->    <table id="dg" title="所有用户" class="easyui-datagrid" style="width:550px;height:250px"        url="userCtrl/selectUser.do"        toolbar="#toolbar"        rownumbers="true" fitColumns="true" singleSelect="true">    <thead>        <tr>            <th field="name" width="110">姓名</th>            <th field="phone" width="110">电话</th>            <th field="email" width="150">邮件</th>        </tr>    </thead></table><div id="toolbar">    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">移除</a></div><!-- 创建表单对话框 --><div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"        closed="true" buttons="#dlg-buttons">    <div class="ftitle">编辑用户</div>    <form id="fm" method="post">        <div class="fitem">            <label>姓名 ：</label>            <input name="name" class="easyui-validatebox" required="true">        </div>        <div class="fitem">            <label>电话 ：</label>            <input name="phone" class="easyui-validatebox" required="true">        </div>        <div class="fitem">            <label>邮件 ：</label>            <input name="email">        </div>    </form></div><div id="dlg-buttons">    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a></div><script type="text/javascript">    //弹出添加用户的对话框function newUser(){    $('#dlg').dialog('open').dialog('setTitle','添加有用户');    $('#fm').form('clear');    url = 'userCtrl/saveUser.do'; //这里的url是保存用户的路径}//保存的方法function saveUser(){    $('#fm').form('submit',{        url: url,        onSubmit: function(){            return $(this).form('validate');        },        success: function(result){            var result = eval('('+result+')');            if (result.errorMsg){                $.messager.show({                    title: 'Error',                    msg: result.errorMsg                });            } else {                $('#dlg').dialog('close');        // close the dialog                $('#dg').datagrid('reload');    // reload the user data            }        }    });}//修改用户的窗口function editUser(){var row = $('#dg').datagrid('getSelected');if (row){    $('#dlg').dialog('open').dialog('setTitle','编辑用户');    $('#fm').form('load',row);    url = 'userCtrl/updateUser.do?id='+row.id;}}//删除用户function destroyUser(){    var row = $('#dg').datagrid('getSelected');    if (row){        $.messager.confirm('提示','你确定要删除这个用户吗?',function(r){            if (r){                $.post('userCtrl/delUser.do',{id:row.id},function(result){                    if (result.success){                        $('#dg').datagrid('reload');    // reload the user data                    } else {                        $.messager.show({    // show error message                            title: 'Error',                            msg: result.errorMsg                        });                    }                },'json');            }        });    }}</script>

UserCtrl.java：

package com.mfc.ctrl;import java.util.List;import javax.annotation.Resource;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.mfc.dao.UserDao;import com.mfc.entity.User;import net.sf.json.JSONObject;@Controller@RequestMapping("userCtrl")public class UserCtrl {@Resource(name = "userDao")private UserDao userDao;@RequestMapping("selectUser")@ResponseBodypublic Object selectUser(){List<User> users = userDao.selectUser(null);JSONObject jsonObject = new JSONObject();jsonObject.put("users", users);return users;}@RequestMapping("saveUser")public void saveUser(User user){userDao.addUser(user);}@RequestMapping("updateUser")public void updateUser(User user){userDao.updateUser(user);}@RequestMapping("delUser")public void delUser(Integer id){userDao.delUser(id);}}

这里只看了控制器和界面的代码！

效果图：

二、直接在表格上进行操作：

修改index.jsp

这里使用alluser.jsp代替：

先引入css和js：

这里要新下载一个jquery.edatagrid.js：

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/demo/demo.css"><script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.3/jquery.edatagrid.js"></script>

代码：

    <script type="text/javascript">        $(function(){            $('#dg').edatagrid({                url: 'userCtrl/selectUser.do',                saveUrl: 'userCtrl/saveUser.do',                updateUrl: 'userCtrl/updateUser.do',                destroyUrl: 'userCtrl/delUser.do'            });        });    </script>            <h1>直接实现数据的增删改查</h1><table id="dg" title="所有用户" style="width:700px;height:250px"toolbar="#toolbar" pagination="true" idField="id"rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="name" width="120" editor="{type:'validatebox',options:{required:true}}">姓名</th><th field="phone" width="120" editor="{type:'validatebox',options:{required:true}}">电话</th><th field="email" width="120" editor="{type:'validatebox',options:{validType:'email'}}">邮件</th></tr></thead></table><div id="toolbar"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">新建</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">删除</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">保存</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">取消<a></div>

效果图：