easy ui window使用

利用easyui编写一个用户管理小例子，目的是演示CRUD操作。先看一下效果图：

1、表格的定义：

<table id="user-table">
    <thead>
        <tr>
            <th field="name" width="100">名称</th>
            <th field="phone" width="100">电话</th>
            <th field="addr" width="100">地址</th>
            <th field="duty" width="100">职务</th>
        </tr>
    </thead>
</table>

利用表格的THEAD来定义列，field属性对应用户数据模型的字段名称。

接着用jQuery创建表格，同时创建一个操作工具栏：

grid = $('#user-table').datagrid({
    url:'/demo1/user/getUsers',
    title:'用户资料',
    width:600,
    height:300,
    singleSelect:true,
    toolbar:[{
        text:'新增',
        iconCls:'icon-add',
        handler:newUser
    },'-',{
        text:'修改',
        iconCls:'icon-edit',
        handler:editUser
    },'-',{
        text:'删除',
        iconCls:'icon-remove'
    }]
});

 

2、定义用户信息窗口和表单

<div id="user-window" title="用户窗口" style="width:400px;height:250px;">
    <div style="padding:20px 20px 40px 80px;">
        <form method="post">
            <table>
                <tr>
                    <td>名称：</td>
                    <td><input name="name"></input></td>
                </tr>
                <tr>
                    <td>电话：</td>
                    <td><input name="phone"></input></td>
                </tr>
                <tr>
                    <td>地址：</td>
                    <td><input name="addr"></input></td>
                </tr>
                <tr>
                    <td>职务：</td>
                    <td><input name="duty"></input></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="text-align:center;padding:5px;">
        <a href="javascript:void(0)" onclick="saveUser()" id="btn-save" icon="icon-save">保存</a>
        <a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" icon="icon-cancel">取消</a>
    </div>
</div>

可以看到，窗口是一个DIV，表单是一个FORM，这种创建方式具有极大的灵活性，不需要学习成本，创建的jQuery代码如下：

$('#btn-save,#btn-cancel').linkbutton();
win = $('#user-window').window({
    closed:true
});
form = win.find('form');

其中建立了窗口的操作按钮，并获取表单对象。

 

3、进行CRUD操作的客户端代码：

function newUser(){
    win.window('open');
    form.form('clear');
    form.url = '/demo1/user/save';
}
function editUser(){
    var row = grid.datagrid('getSelected');
    if (row){
        win.window('open');
        form.form('load', '/demo1/user/getUser/'+row.id);
        form.url = '/demo1/user/update/'+row.id;
    } else {
        $.messager.show({
            title:'警告',
            msg:'请先选择用户资料。'
        });
    }
}
function saveUser(){
    form.form('submit', {
        url:form.url,
        success:function(data){
            eval('data='+data);
            if (data.success){
                grid.datagrid('reload');
                win.window('close');
            } else {
                $.messager.alert('错误',data.msg,'error');
            }
        }
    });
}
function closeWindow(){
    win.window('close');
}

 

 

例子中使用etmvc框架来处理后台的数据，演示例子中不使用数据库。

定义用户数据模型：

public class User {
    public Integer id;
    public String name;
    public String phone;
    public String addr;
    public String duty;

    public User clone(){
        User u = new User();
        u.id = id;
        u.name = name;
        u.phone = phone;
        u.addr = addr;
        u.duty = duty;
        return u;
    }
}

定义后台用户的CRUD操作：

public class UserController extends ApplicationController{
    /**
     * 返回全部用户资料
     */
    public View getUsers() throws Exception{
        Map<String,Object> result = new HashMap<String,Object>();
        result.put("total", users.size());
        result.put("rows", users);

        return new JsonView(result);
    }

    /**
     * 取得指定的用户资料
     */
    public View getUser(Integer id) throws Exception{
        User user = users.get(id-1);
        return new JsonView(user);
    }

    /**
     * 保存用户资料，这里对用户名称进行非空检验，仅供演示用
     */
    public View save(User user) throws Exception{
        Map<String,Object> result = new HashMap<String,Object>();
        if (user.name.length() == 0){
            result.put("failure", true);
            result.put("msg", "用户名称必须填写。");
        } else {
            result.put("success", true);
            user.id = users.size()+1;
            users.add(user);
        }
        View view = new JsonView(result);
        view.setContentType("text/html;charset=utf-8");
        return view;
    }

    /**
     * 更新指定的用户资料
     */
    public View update(Integer id) throws Exception{
        Map<String,Object> result = new HashMap<String,Object>();
        User user = users.get(id-1).clone();
        updateModel(user);
        if (user.name.length() == 0){
            result.put("failure", true);
            result.put("msg", "用户名称必须填写。");
        } else {
            result.put("success", true);
            user.id = id;
            users.set(id-1, user);
        }
        View view = new JsonView(result);
        view.setContentType("text/html;charset=utf-8");
        return view;
    }

    // 用户资料测试数据
    private static List<User> users = new ArrayList<User>();
    static{
        for(int i=1; i<10; i++){
            User user = new User();
            user.id = i;
            user.name = "name" + i;
            user.phone = "phone" + i;
            user.addr = "addr" + i;
            user.duty = "duty" + i;

            users.add(user);
        }
    }
}