做后台管理管理系统时,基于ajax的数据操作和富有表现力的数据绑定插件jtable绝对是一个不错的选择,他接收来自服务器端的json格式的数据。而且他是一款开源的基于jquery和jquery ui的插件,您可以根据自己的需要修改其表现,如css,甚至修改其源码,让其符合您的需求。
下面我将介绍在asp.net mvc3.0 和ssh框架下jtable的使用
2 将相应的css (jtable.css)和jquery.jtable.zh-CN.js、jquery.jtable.min.js拷到您的项目下。
3 引入插件,在view中,一般放在模板页中,为了简单,我放在AdministratorController下的Index Action对应的视图中,即Index.aspx页面中
4 编写javascript代码绑定数据
$("#smallTypeList").jtable({
title:"商品小类别管理列表",
paging:true,
pageSize:10,
selecting:true, //Enable selecting
multiselect: true, //Allow multiple selecting
selectingCheckboxes: true,
actions: {
listAction:"/Administrator/GoodsSmallTypeList",
createAction:"/Administrator/GoodsSmallTypeCreate",
updateAction:'/Administrator/GoodsSmallTypeUpdate',
deleteAction:'/Administrator/GoodsSmallTypeDelete'},
fields: {
sid: {
key:true,
list:false,
create:false,
edit:false},
sname: {
title:"名称",
width:"30%",
inputClass:"validate[required]"},
cid: {
title:"类别",
width:"30%",
options:"/Administrator/CateList"},
spic: {
title:"类别图片",
width:"30%",
options: {'暂无':'暂无'}
}});
$("#smallTypeList").jtable("load");
});
5 在controller中输出json
为了简单,省略Models层的代码,笔者认为您已经具备一定的asp.net mvc的基础知识。
绑定数据,注意参数(jtableStartIndex,jtPageSize)
第一个参数用来指定当前起始记录,第二个用来指定一页显示的记录行,用这两个参数实现分页。
public JsonResult GoodsSmallTypeList(int jtStartIndex, intjtPageSize)
{try{int totalCount =goodscateEntity.getAllCategorys().Count();var goodsSmallList =goodscateEntity.getAllCategorys().Skip(jtStartIndex).Take(jtPageSize);return Json(new { Result = "OK", Records = goodsSmallList, TotalRecordCount =totalCount });
}catch(Exception ex)
{return Json(new { Result = "ERROR", Message =ex.Message.ToString() });
}
}
代码中,返回json时参数的OK表示请求状态,Records表示数据集合,TotalRecordCount表示总记录数。一般这些参数的约定好的,不可改成其他,除非你不愿意使用。您可以在jtable源码中进行修改。
publicJsonResult GoodsSmallTypeCreate(tb_goodsCategory category)
{try{if (!ModelState.IsValid)
{return Json(new { Result = "ERROR", Message = "请填写信息完整"});
}bool l =goodscateEntity.InsertGoodsCategory(category);return Json(new { Result = "OK", Record =category });
}catch(Exception ex)
{return Json(new { Result = "ERROR", Message =ex.Message.ToString() });
}
}///
///修改商品类型///
///
///
publicJsonResult GoodsSmallTypeUpdate(tb_goodsCategory category)
{try{bool l =goodscateEntity.ModifyGoodsCateGory(category);return Json(new { Result = "OK", Record =category });
}catch(Exception ex)
{return Json(new { Result = "ERROR", Message =ex.Message.ToString() });
}
}///
///删除商品类型///
///
///
public JsonResult GoodsSmallTypeDelete(int?sid)
{try{bool l =goodscateEntity.DeleteGoodsCategory(sid);return Json(new { Result = "OK"});
}catch(Exception ex)
{return Json(new { Result = "ERROR", Message =ex.Message.ToString() });
}
}
运行结果:
这样,jtable的使用描述就此完成,本人技术有限,文中还有许多不足,希望大家批评指正,谢谢。
使用 SSH很简单,只要的struts.xml加入相关配置,使其返回的数据为json即可。 当然要引入json对应的jar包哦。希望对大家有用。