JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据。此处,我们使用Struts2框架整合DataGrid,实现数据的显示。

一、页面内容

为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>房产信息管理</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
  </head>

 <body>
 <table id="housesManage" style="height: 100%"></table>
 <div id="addHouse"></div>
 <div id="updateHouse"></div>

 <script type="text/javascript">
    $(document).ready(function(){
     //datagrid设置
	 $('#housesManage').datagrid({
				title:'房产列表',      //表格标题
			        iconCls:'icon-list', //表格图标
				nowrap: false,      //是否只显示一行,即文本过多是否省略部分。
				striped: true,
				fitColumns:true,    //防止水平滚动
				scrollbarSize:0,    //去掉右侧滚动条列
				url:"houses/showHouses!show", //action地址
				idField:'id',
				collapsible:false,//是否可折叠的
				singleSelect:true,//只能单选
				frozenColumns:[[
				  {field:'ck',checkbox:true}
				]],
			        pagination:true, //包含分页
				pageSize: 10,
				pageList: [10,20,30],//可以设置每页记录条数的列表
				rownumbers:true,
				singleSelect:true,//只能单选
				columns :[[{
				  field : 'id',
                  title : 'ID',
                  align:'center',
                  hidden : true
				},{
				   field : 'unitNum',
                   title : "楼栋号",
                   width : 100,
                   align:'center',
                   sortable : true,
				},{
				   field : 'doorCard',
                   title : "门牌号",
                   width : 100,
                   align:'center',
                   sortable : true,
				},{
				   field : 'roomArea',
                   title : "房屋面积(平米)",
                   width : 100,
                   align:'center',
                   sortable : true,
				},{
				   field : 'buildTime',
                   title : "建筑时间",
                   width : 150,
                   align:'center',
                   sortable : true,
				},{
				   field : 'isUse',
                   title : "使用状态",
                   width : 80,
                   align:'center',
                   sortable : true,
                   formatter: function(value,row,index){

                     if(value=="0"){
                        return '已使用';
                     }else{
                       return '<font color="red">空置</font>';
                     }
                  }
				}]],
				toolbar:[{
					text:'添加',
					iconCls:'icon-add',
					handler:function(){
				        //显示上传界面
				        $('#addHouse').dialog({
									    title: '房产管理|添加房屋信息',
									    width: 500,
									    iconCls:'icon-add',
									    height: 300,
									    closed: false,
									    cache: false,
									    href: 'houses/addHouse.jsp',
									    modal: true
									});
				        }
				}, '-', {
                text: "删除",
                iconCls: "icon-cut",
                handler: function () {
                    //选中要修改删除的行
                      var rows = $("#housesManage").datagrid('getSelections'); //返回所有选中的行

                      if (rows.length > 0) {//选中几行的话触发事件
                        $.messager.confirm("提示", "您确定要重置该用户密码吗?", function (res) {//提示是否删除
                            if (res) {
                               //获得编号
                               var id=rows[0].id;
                               // 获得删除行索引
                               var tableindex = $("#housesManage").datagrid('getRowIndex', id);

                               $.post('houses/delHouse!delete',{
                                 "house.id":id
                                },function(data){
                                  if(data.message=="2"){
                                     $.messager.alert('温馨提示','删除失败!','error');
                                  }else{
                                      //删除选中的行
                                      $("#housesManage").datagrid("deleteRow",tableindex);
                                  }
                               });
                            }
                        });
                    }
                }
              },'-',{
                  text: "修改",
                  iconCls: "icon-edit",
                  handler: function (){

                    //选中要修改删除的行
                      var rows = $("#housesManage").datagrid('getSelections'); //返回所有选中的行

                      if (rows.length > 0) {//选中几行的话触发事件

                       //获得编号
                       var id=rows[0].id;
                       //显示修改界面
				        $('#updateHouse').dialog({
									    title: '房产管理|修改房屋信息',
									    width: 500,
									    iconCls:'icon-edit',
									    height: 300,
									    closed: false,
									    cache: false,
									    href: 'houses/getHouse!get?house.id='+id,
									    modal: true
									});
                  }
                }
              },'-',{
                text: "刷新列表",
                iconCls: "icon-reload",
                handler: function (){

                    $("#housesManage").datagrid('reload');
                }
                }] ,onLoadError : function() {
			           $.messager.alert('温馨提示','数据加载失败!','error');  

			     }
			});

			displayMsg();

});

   //改变分页显示
    function displayMsg() {
        $('#housesManage').datagrid('getPager').pagination({
        displayMsg : '当前显示<font color="red"> {from} - {to} </font>条记录   共 <font color="red">{total}</font> 条记录'
	    });
	} 

  </script>
  </body>
</html>

由上可知,EasyUI数据表格可以通过JS生成,看上去比较清爽,也可以使用<tr><td></td></tr>方式生成,但是看上去比较乱。当点击链接按钮的时候,页面会根据url中action请求地址,自动去执行对应的action,并将结果返回。

二、struts.xml中配置

 <!-- 显示房产信息 -->
      <action name="showHouses" class="com.wy.action.HouseAction" method="show">
         <result type="json" name="success">
           <param name="root">result</param>
         </result>
      </action>

三、对应的Action 处理类

        private JSONObject result;       //返回的json
	private String rows;             //每页显示的记录数
	private String page;             //当前第几页 

        //显示房产基本信息
	public String show(){
	    //当前页
	    int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
	    //每页显示条数
	    int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows); 

	    //每页的开始记录  第一页为1  第二页为number +1
	    int start = (intPage-1)*number; 

	    HouseDao houseDao=new HouseDao();
	    ArrayList<THouse> listHouses=houseDao.getHouses(start, number); //从数据库中查询数据

	    Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map  

	    int count=houseDao.getHouseCount(); //求出总记录数

	    //total键 存放总记录数,必须的
	    jsonMap.put("total", count);
            jsonMap.put("rows", listHouses);//rows键 存放每页记录 list  

            result=JSONObject.fromObject(CommonUtil.getJsonNotNull(jsonMap));

           return SUCCESS;
	}

action 类中,rows,page 是用于EasyUI分页操作的,EasyUI会自动向后台传入参数:当前页及每页显示记录数,以此实现分页功能,此处只需要定义这两个变量即可。

四、EasyUI JSON数据格式

{"total":5,"rows":[{"doorCard":"1-1101","id":22,"roomArea":"140","unitNum":1,"tusers":[],"isUse":"1","buildTime":"2015-04-01"},{"doorCard":"1-1202","id":29,"roomArea":"160","unitNum":1,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"2-2202","id":28,"roomArea":"160","unitNum":2,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"3-3301","id":26,"roomArea":"150","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-13"},{"doorCard":"3-2102","id":27,"roomArea":"160","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-06"}]}

后台返回的JSON格式必须是这样的,才能被前台EasyUI DataGrid识别并显示数据,否则数据无法显示。

五、效果截图

//此处结束

时间: 2024-10-09 02:48:18

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据的相关文章

C#在listview控件中显示数据库数据

一.了解listview控件的属性 view:设置为details columns:设置列 items:设置行 1.将listview的view设置为details 2.设置列属性 点击添加,添加一列 设置一列的Text属性,这就是列名 添加三列 3.编辑items属性,添加一行数据 编辑Text属性,添加一行的第一个数据 编辑subitems属性,添加一行中的其他数据 添加两个数据 填写结果 二.在listview中显示数据库数据 //在listview中显示数据库数据 private voi

EasyUI学习总结(五)——EasyUI组件使用

EasyUI学习总结(五)--EasyUI组件使用 一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程序为例讲解EasyUI组件的使用 二.EasyUI组件的使用 2.1.创建测试的JavaWeb项目 2.2.编写测试代码 编写一个用户登录页面Login1.html,用于输入用户名和密码进行登录,使用JQuery的ajax方法异步提交表单 Login1.html的代码如下: 1 <!DOCTYPE

easyui学习笔记2—在行内进行表格的增删改操作【转载】

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo

EasyUI学习总结(六)——EasyUI布局

EasyUI学习总结(六)--EasyUI布局 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的div删掉,另外,如果需要创建复杂的easyUI布局,那么可以通过嵌套东.西.南.北.中五个面板来实现.下面简单演示一下EasyUI布局. 1.1.通过div创建easyUI布局 easyUI的layout可以通过div来创建,使用div来创建easyUI

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select></select>中的option字符串.让后将字符串响应回来,动态添加到<select>中.其中的字符串中包含了后台的数据. 页面js代码: 1 <script type="text/javascript"> 2 //加载部门 3 function loa

QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据

QML与C++交互:在qml中使用QSqlQueryModel显示数据库数据 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考链接: http://qt-project.org/wiki/How_to_use_a_QSqlQueryModel_in_QML 环境: 主机:WIN7 开发环境:Qt5.2.1 说明: 在QML中不能直接对数据库进行操作,所以将QSqlQueryModel封装成子类,作为属性给QML使用 效果图: 源代码: qml文

【EasyUI学习-2】Easyui Tree的异步加载

作者:ssslinppp       1. 摘要 easyui相关的介绍可以上其官网或者百度去搜索,这里不做介绍. Easyui Tree的使用,官网或者easyui中文网站,也有相关介绍,但是官方提供的实例所使用的json是写死的,不是后台实时读取的.在实际的项目中,要显示的tree数据,一般都是从数据库中读取,然后通过通过ajax或者其他技术将tree的json数据发送到前台,然后显示. 本文将介绍easyui tree的异步加载,以及手动展开tree. 2. tree的相关介绍 上图是一个

EasyUI学习总结(一)——EasyUI入门

一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.4.1 下载完成之后,得到压缩包,解压后,得到一个[jquery-easyui-1.4.1]文件夹,里面有如下图所示的文件: 二.EasyUI入门 2.1.引入必要的js和css样式文件 要想在页面中使用EasyUI,那么首先要做的就是在页面中引入必要js和css样式文件,以在jsp文件中使用EasyUI为例,文件引

显示数据库数据以及模板引擎的使用

思路分析 文件地址:链接:https://pan.baidu.com/s/1QxHoYfsFXERLmqT1tMbo7Q 密码:y89a 样式效果: 分析: ①实现这个效果,我们一般需要2个页面,一个html页面,用来浏览器显示:一个PHP页面,用来接收数据库数据,并且把接受来的数据返回到前端. ②这时,我们一般需要三个步骤:第一,使用ajax发送请求:第二,在PHP页面获取数据库数据,将数据库的数据返回给前端:第三,前端接收后端返回 的数据,使用模板引擎,将数据按照表格的样式显示出来. 代码实