datagrid json-easyui datagrid 不显示json数据

问题描述

easyui datagrid 不显示json数据

过程描述:页面 A输入参数,进入controller进行逻辑处理并生成json数据,然后通过
MVC返回json数据,并对页面A相关easyui datagrid表格进行数据展示。
问题:easyui datagrid不现实数据,且页面不报错,调试能看到json数据。
页面代码:

 <button id="myb" class="easyui-linkbutton c6" type="button"
                onclick="test()" >测试</button>
        function test(){

         jq('#tt').datagrid({
                title:'DataGrid - DetailView',
                width:500,
               height:250,
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
               fitColumns:true,
               type:"POST",
                url:'/store/saleout/getjson',
                columns:[[
                    {field:'product_name',title:'Item ID',width:80},
                    {field:'numbers',title:'Product ID',width:100,sortable:true},
                    {field:'price',title:'List Price',width:80,align:'right',sortable:true},
                   {field:'buyer',title:'Unit Cost',width:80,align:'right',sortable:true}
                ]]

            });
                 alert("333");
        }
    调试显示数据:{"rows":[{"product_name":"土豆","numbers":2,"price":40,"buyer":"A","style":"A","type":"WU","saleoutdate":"2015-3-31"}],"total":1}

    请教一下:什么原因导致 easyui datagrid数据不显示?不报错,不知道到底从哪里入手,困扰了不短时间,多谢!!

    页面完整代码如下,调试数据截图在附件中。
    ![![图片说明](http://img.ask.csdn.net/upload/201505/31/1433004879_544586.png)图片说明](http://img.ask.csdn.net/upload/201505/31/1433004871_778225.png)

        <!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html lang="en">
<jsp:include page="../fragments/staticFiles.jsp" />
<jsp:include page="../fragments/BootStrapFiles.jsp"/>
<head>
<meta charset="utf-8">
<title>saleout</title>
<script type="text/javascript">
    var jq = $.noConflict();

    function test(){

         jq('#tt').datagrid({
                title:'DataGrid - DetailView',
                width:500,
               height:250,
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
               fitColumns:true,
               type:"POST",
                url:'/store/saleout/getjson',
                columns:[[
                    {field:'product_name',title:'Item ID',width:80},
                    {field:'numbers',title:'Product ID',width:100,sortable:true},
                    {field:'price',title:'List Price',width:80,align:'right',sortable:true},
                   {field:'buyer',title:'Unit Cost',width:80,align:'right',sortable:true}
                ]]

            });

         alert("333");

        }

    jq(document).ready(function(){

            jq("#ajax_pos").click(
                    function (){alert("test");
                      jq.ajax({url:"<spring:url value="/saleout/precheck.html"/>",
                            data:jq("#search_form").serialize(),
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                             type:"POST",
                             success: function(data){
                            //   jq("#tt").datagrid("load");
                                 if( window.confirm(" 添加记录成功,是否继续添加?")){
                                 //  location.reload();
                               //    alert(data.toString());
                                    }else{
                                       location.href="<spring:url value="/menu" htmlEscape="true"/>";

                                        }

                             },
                            error:function(data){alert("数据失败!"+data);},
                      });

                    });

    });

</script>

<style>
ul {
    margin: 0;
    width: 100%;
}

 li {
    margin: left;
    float: left;
    width: 100%;
}
</style>

</head>

<body>
    <div id="headmenu">
    <jsp:include page="../saleOut/saleoutMenu.jsp"/>
    </div>
    <p></p>
 <table id="tt"></table>

 <button id="myb" class="easyui-linkbutton c6" type="button"
                onclick="test()" >测试</button>

      <div id="ajax_form" align="center" >
       <form:form modelAttribute="saleout" id="search_form" method="post">
           <fieldset>
                    <div  id="product_name" align="left">
                    <label class="control-label">产品名称: </label>
                    <form:input path="product_name" size="30" maxlength="80" />
                    </div>
           </fieldset>
       </form:form>
        <div id="_buttons">
            <button id="ajax_pos" class="easyui-linkbutton c6" type="button"
                style="width: 80px; height: 35px" >提交</button>
        </div>
    </div>

</body>

</html>

解决方案

什么版本的easyui。。1.3.2测试你的代码没问题。。你的连表头都没有,是不是导入的样式有冲突什么的,开发工具看下表头都有什么样式


<jsp:include page="../fragments/BootStrapFiles.jsp"/>

你导入bootstrap框架了?

解决方案二:

json数据首尾少了方括号

时间: 2024-07-29 21:05:32

datagrid json-easyui datagrid 不显示json数据的相关文章

jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据_jquery

废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

easyui datagrid 大数据加载效率慢,优化解决方法(推荐)_jquery

在使用easyui datagrid途中发现加载数据的效率真的不是一般的差.经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受. 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句代码 $(_1e0).html(_1e4.join("")); 改为: $(_1e0)[0].

jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果_jquery

1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-index属性等. 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等.将来保存的时候,就是通过取这个属性值找某一行的数据的. function

jquery easyui datagrid实现增加,修改,删除方法总结_jquery

本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: <body> <form id="form1" runat="server"> <table id="tt"> </table> </form> </body> 引用的JS: <link rel="stylesheet" t

jQuery EasyUI datagrid实现本地分页的方法_jquery

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g

jQuery easyUI datagrid 增加求和统计行的实现代码_jquery

在datagrid的onLoadSuccess事件增加代码处理. <style type="text/css"> .subtotal { font-weight: bold; }/*合计单元格样式*/ </style> <script type="text/javascript"> function onLoadSuccess() { //添加"合计"列 $('#table').datagrid('append

easyui-在使用EasyUI datagrid去得到后台json数据时,前面页面显示不出来,这是为啥么呢?

问题描述 在使用EasyUI datagrid去得到后台json数据时,前面页面显示不出来,这是为啥么呢? 解决方案 在datagrid的URL的路径前面加${pageContext.request.contextPath}这个试试. 解决方案二: 可以多用浏览器开发工具看ajax发送的请求最终返回的是什么内容..如果不符合datagrid需要的结构或者发生错误都不会显示数据

easyui datagrid 不显示第一页数据

问题描述 easyui datagrid 不显示第一页数据 问个很白的问题..别笑话我... 打算页面打开后,就直接显示数据, 但是现在必须点一下分页栏上的刷新才显示.倒也显示页数和记录数,请教这是怎么回事啊? <script type="text/javascript"> $(function () { var request = new Object(); Request = GetRequest(); var db = Request['DB']; var shp_i

jquery easyui datagrid 某列的数据为0或空时,这个列不显示

问题描述 jquery easyui datagrid 某列的数据为0或空时,这个列不显示 jquery easyui datagrid 某列的数据为0或空时,怎么让这个列不显示. 解决方案 问题是你所有行的此列都是0没有..要是有些列不是0那不是也被隐藏了, 如果是只要有0或者为空就隐藏,自己遍历下返回的数据,然后调用hideColumn执行隐藏此列$('#dg').datagrid('hideColumn','列名称') 解决方案二: jquery easyui datagrid 列宽按百分