• 所有问题

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

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

    举报该问题
    推荐答案   推荐于2017-09-26

     å› ä¸º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"}]}

    五、效果截图

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2013-05-22
    数据库查询出来的结果 转成一个json格式的数据 这个json的数据格式要带两个属性 一个是total 总记录数 一个是rows 就是明细行
    第2个回答  2013-05-22
    返回一个json格式的数据格式要有total和rows两个属性 rows就是数组行了
    相似回答
    easyui怎么获取数据库中的内容?答：easyui自带有 loadData 方法，下面有两种加载数据方法： 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'},...
    ...EasyUI- DataGrid使用 从数据库查询得到数据显示在前台的jsp页面...答：1、首先写入导出按钮和需要导出的datagrid列表。2、点击导出按钮；获得需要导出的字段与不需要导出的数据进行数据处理，并且进行json解析。3、异步操作进入后台获取数据。4、后台将数据写入excel(其中还有一个帮助类)。
    easyui+ckeditor怎么把easyui从数据库提取得数据在ckeditor中显示答：thisObj.className = "active";document.getElementById(tabObj+"_Content"+i).style.display = "block";}else{ tabList[i].className = "normal";document.getElementById(tabObj+"_Content"+i).style.display = "none";}
    在easyui的表格中,所绑定的数据是从数据库取得的数据,怎么将部分符合条 ...答：align:'right',styler: function(value,row,index){if (value > 90){ return 'background-color:#ff0000;color:white;'; // the function can return predefined css class and inline style // return {class:'c1',style:'color:red'}}}">Unit Cost 可以看到效果：...
    easyui中能从数据库中得到数据,为什么不能再tree中显示?答：可能是因为你的数据格式上有问题；这个是官网上对tree数据结构的属性描述，你的数据缺少一个“id”属性，而官网上对ID的描述是：“id对于加载远程数据很重要”。你的页面上有没有报什么错误啊？
    easyui之datagrid为什么后台返回的数据在前台不显示答：用的是PHP+easyUI做的开发，EasyUI datagrid绑定数据源有问题，就是数据显示不出来。 原来在win下做开发，这样写是好使的，顺道贴出stuFamilyJson方法的代码：public function stuFamilyJson(){ tb=D('StuFamily');familyInfo=$tb->where('stu_id='.session('userId'))->select();foreach ($fam...
    大家正在搜
    excel如何读取数据库数据表格数据库储存数据的基本组件如何将excel表格导入数据库将excel表数据导入数据库mysql清空数据库所有表数据数据库显示表格excel表格数据库数据库和数据表excel传输数据到数据库
    相关问题
    easyui是怎么获取数据库数据的
    jQuery EasyUI- DataGrid使用 从数据库...
    在easyui的表格中,所绑定的数据是从数据库取得的数据,怎...
    用easyUI显示在页面mysql数据库里面的表格信息
    easyui怎么获取数据库中的内容？
    easyui是怎么获取数据库数据的
    easyui用数据表格DataGrid将数据库内容传输到前台...
    jquery easyui datagrid中的所有数据如何...