$(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()); }