把数据库里面的内容放进DataGrid(数据表格)

  

$(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());     
	}
原文地址:https://www.cnblogs.com/zuo72/p/8253897.html