jQuery EasyUI- DataGrid使用 从数据库查询得到数据显示在前台的jsp页面,如何实现?

jQuery EasyUI- DataGrid使用 从数据库查询得到数据显示在前台的jsp页面,如何实现?,第1张

1、首先写入导出按钮和需要导出的datagrid列表。

2、点击导出按钮;获得需要导出的字段与不需要导出的数据进行数据处理,并且进行json解析。

3、异步 *** 作进入后台获取数据。

4、后台将数据写入excel(其中还有一个帮助类)。

因为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>

二、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会自动向后台传入参数:当前页及每页显示记录数,以此实现分页功能,此处只需要定义这两个变量即可。

{"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"}]}

五、效果截图

easyui自带有 loadData 方法,下面有两种加载数据方法:

<table id="tt" border="false" fit="true" fitcolumns="true" iconcls="icon-edit" singleselect="true"></table>

function strToJson(str) {

var json = eval('(' + str + ')')

return json

}

1.加载静态数据方法

var htmls = "[{'ID':'FI-SW-01','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-02','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-03','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-04','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'},{'ID':'FI-SW-05','aname':10.00,'mname':'P','uname':36.50,'pname':'Large','pcode':'EST-1'}]"

$('#tt').datagrid('loadData', strToJson(htmls))

2.ajax动态加载数据方法(支持后台数据库)

$.ajax({

url: "/index/index",

data: { id: 1, code: "101" },

datatype: "json",

type: "POST",

traditional: true,

success: function(data) {

$('#tt').datagrid('loadData', strToJson(data))

}

})

返回的data数据格式为方法1中的htmls字符串格式。

希望对你有帮助。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/9902111.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-03
下一篇 2023-05-03

发表评论

登录后才能评论

评论列表(0条)

保存