easyui页面数据显示的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui页面数据显示的问题相关的知识,希望对你有一定的参考价值。

我想选中表中的行,点击新增按钮以后,能在弹出的窗口中的上级机构里,显示我选中的当前行的数据,求帮忙!!!!

参考技术A 弹出的窗口中用一个表单,新增的时候获取选中行的数据,然后给表单赋值。获取选中行的数据有一个方法,调用一下就可以了!

easyUI的表格如何显示数据库里的数据啊

求助,easyUI的表格如何显示数据库里的数据啊?datagrid_data.json不懂怎么用

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

五、效果截图

参考技术A 数据库查询出来的结果 转成一个json格式的数据 这个json的数据格式要带两个属性 一个是total 总记录数 一个是rows 就是明细行 参考技术B 返回一个json格式的数据格式要有total和rows两个属性 rows就是数组行了

以上是关于easyui页面数据显示的问题的主要内容,如果未能解决你的问题,请参考以下文章

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

easyUI的表格如何显示数据库里的数据啊

easyui datagrid 在页面上不显示数据

easyUI——页面多个datagrid导致表头与数据错位

使用easyui中的datagrid时,通过action能够返回json数据,但是,却不能在页面中显示数据

easyui textbox 获取数据时 获取数据时有换行符 为啥显示到页面就不能换行?