• 把数据库里面的内容放进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());     
    	}
    
  • 相关阅读:
    MySQL索引的操作
    MySQL表的操作02
    MySQL表的操作01
    字典实现简单购物车程序
    python 中if和elif的区别
    格式化操作---%方法
    正则表达式相关知识
    实现 像网易云音乐 播放列表那样的弹出型Dialog
    为什么在非UI线程中操作UI的改变失不安全的
    模板方法模式-Template Method
  • 原文地址:https://www.cnblogs.com/zuo72/p/8253897.html
Copyright © 2020-2023  润新知