快捷搜索:

jquery-easyui编写用户管理小例子

使用easyui编写一个用户治理小例子,目的是演示CRUD操作。先看一下效果图:

1、表格的定义:

名称

电话

地址

职务

使用表格的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,表单是一个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 result = new HashMap();

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 result = new HashMap();

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 result = new HashMap();

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 users = new ArrayList();

static{

for(int i=1; i

完备的代码请见附件,可以看到,easyui具有极少的JS代码。

下载:http://bbs.fengfly.com/thread-155-1-1.html

您可能还会对下面的文章感兴趣: