$(function() {
$("#tab").datagrid( //先要连接数据库里面的信息,建一个数据模型,还有一个查询的方法,还要有一个//Servlet
{
width : 800, //扩展至Panel面板
height : 600,
title : "用户信息",
url : "SelectAppUserServlet",
fitColumns : true, //配合着columns :里面的width使用,相当于是百分比
pagination : true, //分页
rownumbers : true,
singleSelect : true, //单选模式
idField : "ids",
queryParams : { //在请求远程数据的时候发送额外的参数。
"param1" : "新添加的参数"
},
toolbar : [ { //顶部工具栏的DataGrid面板.
iconCls : 'icon-edit',
text : "编辑",
handler : function() {
var fmobj = $("#tab").datagrid("getSelected");
// alert(fmobj);
$("#fm").form("load", fmobj);
$("#dialog").dialog("open");
}
}, "-", {
iconCls : 'icon-help',
text : "帮助",
handler : function() {
alert('帮助按钮')
}
} ],
frozenColumns : [ [ { //同列属性,但是这些列将会被冻结在左侧。
title : "",
field : "",
checkbox : true
}, {
title : "主键ids",
field : "ids",
width : 100
} ] ],
checkOnSelect : false, //如果为false,当用户仅在点击该复选框的时候才会被选中或取消。
selectOnCheck : false,
columns : [ [
{
title : "用户名",
field : "username", //数据模型里的成员变量的名字
width : 100
},
{
title : "密码",
field : "password",
width : 100
},
{
title : "姓名",
field : "realname",
width : 100
},
{
title : "性别",
field : "sex",
formatter : function(value, row, index) { //value:字段值。
row:行记录数据。
index: 行索引。
if (value == 1) { //给个判断
return "男";
}
return "女";
},
width : 100
},
{
title : "创建时间",
field : "createtime",
formatter : function(value, row, index) {
var date = new Date(value); //获取当前日期和时间
return date.getFullYear() + "年"
+ (date.getMonth() + 1) + "月"
+ date.getDate() + "日";
},
width : 100,
sortable : true
} ] ]
});
});
<table id="tab"></table>
Servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
AppUserDao auDao = new AppUserDao();
List<AppUser> list = auDao.selectAppUser();
System.out.println(request.getParameter("param1"));
/*
*{rows:[{},{},{}],total:20} rows:对象 total:list.size()
*/
JSONObject jo = new JSONObject();
jo.put("rows", list);
jo.put("total", list.size());
response.getWriter().append(jo.toJSONString());
}