datagrid根据后台数据动态显示列名与内容

已知后台返回数据格式为(1){"total":8,"rows":[{"HID":"1","HNAME":"世纪新都","AMOUNT":"1075.00"},{"HID":"2","HNAME":"江南商都","AMOUNT":"33.00"},{"HID":"3","HNAME":"凯瑞商都","AMOUNT":"- 51.00"},{"HID":"4","HNAME":"阳光百货","AMOUNT":"9.00"}, {"HID":"5","HNAME":"银泰百货","AMOUNT":"-35.00"}, {"HID":"281","HNAME":"测试1","AMOUNT":"-13.00"}, {"HID":"297","HNAME":"家乐福","AMOUNT":"-4.00"}, {"HID":"327","HNAME":"利比亚","AMOUNT":"-2.00"}]}

(2){"total":16,"rows":[{"WAID":"1","WANO":"3001","WANAME":"上衣","UNITS":"件","SALE":"900","KKHJ":"-35.00","KK1":"0.00","KK2":"- 20.00","KK3":"-12.00","KK4":"- 3.00","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"1.00"}, {"WAID":"47","WANO":"700096","WANAME":"工装","UNITS":" 套","SALE":"100","KKHJ":"-24.00","KK1":"-4.00","KK2":"- 1.00","KK3":"","KK4":"","KK5":"","KK281":"- 19.00","KK297":"","KK327":"","ROWNUMBER":"2.00"}, {"WAID":"12569","WANO":"3001A","WANAME":"休闲裤","UNITS":" 件","SALE":"100","KKHJ":"-24.00","KK1":"- 3.00","KK2":"2.00","KK3":"- 23.00","KK4":"","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"3.00"}, {"WAID":"6592","WANO":"A121","WANAME":"西装","UNITS":" 套","SALE":"33","KKHJ":"-23.00","KK1":"","KK2":"","KK3":"- 19.00","KK4":"","KK5":"","KK281":"","KK297":"","KK327":"- 4.00","ROWNUMBER":"4.00"},{"WAID":"21","WANO":"3006","WANAME":"牛仔裤","UNITS":"条","SALE":"280","KKHJ":"- 14.00","KK1":"","KK2":"","KK3":"","KK4":"","KK5":"- 19.00","KK281":"5.00","KK297":"","KK327":"","ROWNUMBER":"5.00"}, {"WAID":"3","WANO":"30032","WANAME":"风衣","UNITS":" 件","SALE":"900","KKHJ":"-12.00","KK1":"18.00","KK2":"- 17.00","KK3":"3.00","KK4":"","KK5":"- 16.00","KK281":"","KK297":"","KK327":"","ROWNUMBER":"6.00"}, {"WAID":"6591","WANO":"A12","WANAME":"西装","UNITS":" 套","SALE":"0","KKHJ":"-5.00","KK1":"","KK2":"","KK3":"- 1.00","KK4":"","KK5":"","KK281":"","KK297":"- 4.00","KK327":"0.00","ROWNUMBER":"7.00"}, {"WAID":"99","WANO":"CY003","WANAME":"衬衫","UNITS":" 件","SALE":"0","KKHJ":"-1.00","KK1":"- 1.00","KK2":"","KK3":"","KK4":"","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"8.00"}, {"WAID":"1324","WANO":"NZK0869","WANAME":"睡衣","UNITS":" 双","SALE":"0","KKHJ":"- 1.00","KK1":"","KK2":"","KK3":"","KK4":"","KK5":"","KK281":"- 1.00","KK297":"","KK327":"","ROWNUMBER":"9.00"}, {"WAID":"53","WANO":"7001","WANAME":"t恤条纹","UNITS":" 件","SALE":"380","KKHJ":"0.00","KK1":"1.00","KK2":"- 1.00","KK3":"","KK4":"","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"10.00"}, {"WAID":"6572","WANO":"2543212","WANAME":"衬衫","UNITS":" 件","SALE":"44","KKHJ":"1.00","KK1":"1.00","KK2":"","KK3":"","KK4":"","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"11.00"}, {"WAID":"5","WANO":"3005","WANAME":"T恤","UNITS":" 件","SALE":"780","KKHJ":"2.00","KK1":"","KK2":"","KK3":"","KK4":"2.00","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"12.00"}, {"WAID":"48","WANO":"100330000001","WANAME":"女装雪纺衫红袖","UNITS":" 件","SALE":"500","KKHJ":"12.00","KK1":"","KK2":"12.00","KK3":"","KK4":"","KK5":"","KK281":"","KK297":"","KK327":"","ROWNUMBER":"13.00"}, {"WAID":"4","WANO":"3004","WANAME":"西便装","UNITS":" 件","SALE":"900","KKHJ":"15.00","KK1":"9.00","KK2":"","KK3":"","KK4":"5.00","KK5":"","KK281":"","KK297":"","KK327":"1.00","ROWNUMBER":"14.00"}, {"WAID":"2","WANO":"3002","WANAME":"大衣","UNITS":" 件","SALE":"900","KKHJ":"119.00","KK1":"54.00","KK2":"58.00","KK3":"1.00","KK4":"5.00","KK5":"","KK281":"","KK297":"","KK327":"1.00","ROWNUMBER":"15.00"}, {"WAID":"58","WANO":"771","WANAME":"女装-连衣裙","UNITS":" 套","SALE":"0","KKHJ":"1002.00","KK1":"1000.00","KK2":"","KK3":"","KK4":"","KK5":"","KK281":"2.00","KK297":"","KK327":"","ROWNUMBER":"16.00"}]}

jsp:

 <script type="text/javascript"> 
var colname=[];
var cols=[];  
var ss="";
//分页设置
function pp(){
    //var hide=$('#huizong').val();
    //if(hide==0){
    //  hide1==true;hide2=true;
    //}else if(hide==1){
    //  hide1=false;hide2=true;
    //}else{
    //  hide1=true;hide2=false;
    //}
        $('#pp').pagination({//分页设置
            layout:['first','links','last','manual'],
            pageSize:20,
            onSelectPage : function(pageNum, pageSize) {
                nouse=$('#nouse').val();
                page=pageNum.toString();
                getinventorydistri(page,nouse);
            }
        });
        var col = [ [{
            field : 'WARENAME',
            title : '商品',
            width : 20
        }, {
            field : 'KCHJ',
            title : '小计',
            width : 20
        }] ];
        //s = "[[";  
       // s = s + "{field:'WARENAME',title:'商品',width:160},{field:'COLORNAME',{field:'KCHJ',title:'小计'}";  
       // s = s + "]]";
        var options=
        {
                idFile : 'WARENAME',
                width : '100%',
                height : '520px',
                fitColumns : true,
                striped : true, //隔行变色
                rownumbers : true, //显示行数
                singleSelect : true,
                columns:col,
                showFooter:true,
                onClickRow:function(rowIndex, rowData){

                },
                pageSize : 20
            }
        //加载数据
        $('#gg').datagrid(options);
            getinvdistridata();
            setTimeout('1000');
            getinvdistrisum();
            setTimeout('1000');
            getinventorydistri();

        }
//查询统计库存分布方法
function getinvdistridata(){
    $('#selectd').dialog('close');
    var nowdate =$('#nowdate').datebox('getValue');//当前时间
    var wareid=$("#awareno").val();//货号
    var adbrandid =$("#adbrandid").val();//品牌
    var adtypeid=$("#adtypeid").val();//类型
    var prodyear=$("#yearss").val();//生产年份
    var seasonname=$("#jijie option:selected").text();//季节
    //alert(nowdate);
        $.ajax({
            type : "POST", //访问WebService使用Post方式请求 
            url : "InvDistriServlet", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
            data : {
                invdistriser : "getinvdistridata",
                nowdate:nowdate,
                wareid:wareid,
                adbrandid:adbrandid,
                adtypeid:adtypeid,
                prodyear:prodyear,
                seasonname:seasonname
            }, //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到                          
            dataType : 'text',
            success : function(text) { //回调函数，result，返回值 
                if (text != "f") {
                    data = $.parseJSON(text);
                    $('#gg').datagrid('loadData', data);
                    $('#pp').pagination({
                        total : data.total,
                    });
                } else {
                    alert(text);
                }

            }
        });
}

function getinvdistrisum(){
    $('#selectd').dialog('close');
    $.ajax({
        type : "POST", //访问WebService使用Post方式请求 
        url : "InvDistriServlet", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
        data : {
            invdistriser : "getinvdistrisum"
        }, //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到                          
        dataType : 'text',
        success : function(text) { //回调函数，result，返回值 
            if (text != "f") {
                alert(text);
                //colname = $.parseJSON(text);
                colname=text;
            } else {
                alert(text);
            }

        }
    });
}
//查询库存分布列表方法
function getinventorydistri(page, nouse){
    $('#selectd').dialog('close');
    var hzfs=$("#huizong").val();//汇总方式
    var wareid=$("#awareno").val();//货号
    var adbrandid =$("#adbrandid").val();//品牌
    var adtypeid=$("#adtypeid").val();//类型
    var prodyear=$("#yearss").val();//生产年份
    var seasonname=$("#jijie option:selected").text();//季节
    var order=$("input[name='pai1']:checked").val();//排序方式
    var paixu=$("#paixu").val();//排序项目
    $.ajax({
        type : "POST", //访问WebService使用Post方式请求 
        url : "InvDistriServlet", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
        data : {
            invdistriser : "getinvdistri",
            hzfs:hzfs,
            wareid:wareid,
            adbrandid:adbrandid,
            adtypeid:adtypeid,
            prodyear:prodyear,
            seasonname:seasonname,
            order:order,
            paixu:paixu,
            page:page,nouse:nouse
        }, //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到                          
        dataType : 'text',
        success : function(text) { //回调函数，result，返回值 
            if (text != "f") {
                data = $.parseJSON(text);
                $('#gg').datagrid('loadData', data);
                $('#pp').pagination({
                    total : data.total,
                });
            } else {
                alert(text);
            }

        }
    });
}
</script>

Servlet:（为节约略去方法中从jsp取值）
//库存分布数据求和及生成列表头
private void getinvdistrisum(HttpServletRequest request, HttpServletResponse response) throws Exception {
Map res = InvDistriBase.getinvdistrisum();
System.out.println("size");
System.out.println("size"+res.size());
PrintWriter out = response.getWriter();
out.print(res);
out.close();

}

private void getinvdistridata(HttpServletRequest request, HttpServletResponse response) throws IOException {
    // 获取统计库存数据 

    String res = InvDistriBase.getinvdistridata();
    JSONObject obj = JSONObject.fromObject(res);
    InvDistriBase.sqltext=obj.getString("SQLTEXT");
    PrintWriter out = response.getWriter();
    out.print(res);
    out.close();

}

    private void getinvdistri(HttpServletRequest request, HttpServletResponse response) throws Exception {
    // 获得库存分页数据
    String res = InvDistriBase.getinvdistri();
    PrintWriter out = response.getWriter();
    InvDistriBase.page = "1";
    out.print(res);
    out.close();

}

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
u010474082 2016-02-25 03:29
关注
后台拼接为跟你返回的 json一样的column就可以了如我拼接的columns: [{"field":"KC281","title":"测试1","width":100,"align":"center","halign":"center"},{"field":"KC297","title"
:"家乐福","width":100,"align":"center","halign":"center"},{"field":"KC1","title":"世纪新都","width":100,"align"
:"center","halign":"center"},{"field":"KC562","title":"华贸城","width":100,"align":"center","halign":"center"
},{"field":"KC2","title":"江南商都","width":100,"align":"center","halign":"center"},{"field":"KC563","title"
:"苹果城","width":100,"align":"center","halign":"center"},{"field":"KC3","title":"凯瑞商都","width":100,"align"
:"center","halign":"center"},{"field":"KC311","title":"的的爱的","width":100,"align":"center","halign":"center"
},{"field":"KC564","title":"四季城","width":100,"align":"center","halign":"center"},{"field":"KC4","title"
:"阳光百货","width":100,"align":"center","halign":"center"},{"field":"KC5","title":"银泰百货","width":100,"align"
:"center","halign":"center"},{"field":"KC6","title":"瑞成新都","width":100,"align":"center","halign":"center"
},{"field":"KC8","title":"凤阳","width":100,"align":"center","halign":"center"},{"field":"KC327","title"
:"利比亚","width":100,"align":"center","halign":"center"},{"field":"KC42","title":"綦江商都","width":100,"align"
:"center","halign":"center"}]
因为后台返回格式为：{"total":42,"rows":[{"WAREID":"21","WARENO":"3006","WARENAME":"牛仔裤","UNITS":"条","RETAILSALE":"280","KCHJ":"-222.00","KC1":"2.00","KC2":"-3.00","KC3":"-28.00","KC4":"-98.00","KC5":"-18.00","KC6":"","KC8":"-82.00","KC42":"","KC281":"5.00","KC297":"","KC311":"","KC327":"","KC562":"","KC563":"","KC564":"","ROWNUMBER":"1.00"}

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(1条)

报告相同问题？

关注问题

datagrid根据后台数据动态显示列名与内容
2015-11-30 07:49

回答 2 已采纳后台拼接为跟你返回的 json一样的column就可以了如我拼接的columns: [{"field":"KC281","title":"测试1","width":100,"align":"cen
easyui datagrid，获取当前选中的列名
2015-11-03 06:29

回答 5 已采纳调用beginEdit后给所有编辑器添加click事件获取编辑器所在有field属性的td单元格，field值就是列名称 ``` $('#dg').datagrid('be
easyui datagrid 不显示数据问题 easyui java mvc
2017-07-24 18:52

回答 3 已采纳注册时间手机号筛选
easyUI datagrid ajax实时刷新动态添加列名
2015-06-09 19:53

sxlxmh1314的博客上一篇实现了datagrid加载时列名的动态添加，因项目需求，需要对此页面设置定时器，3秒刷新一次，用datagrid的reload方法刷新时会有闪屏的效果，网上搜的在本页面中添加css样式的方法虽然对闪屏有一定的改善，但效果...
easyUI datagrid 怎么动态添加一行数据？ easyui
2018-05-13 16:28

回答 6 已采纳没记错的话，result需要解析吧。var obj = eval('(' + result + ')'); alert( obj.name);
easyui 的 datagrid 在选项卡 tabs 中不显示数据 easyui
2018-05-08 06:14

回答 4 已采纳设置width，height ``` $('#dg').datagrid({height:'100%',width:'100%',//////// url
datagrid加载的数据与Controller返回的数据不一致 easyui
2018-03-28 03:01

回答 4 已采纳 btch_id改为字符串类型，不要数字类型的，发送到客户端转为对象后溢出了吧，不变都难
wpf datagrid 列名修改列标题修改
2018-04-10 20:01

liukun0928的博客第一次接触到wpf时，使用datatable想要把数据显示到datagrid上面，代码如下： string conSqlS = "Select * from mapsize"; DataTable dt = new DataTable(); mysql.GetAdapter(conSqlS).Fill(dt); ...
datagrid控件数据显示 ecmascript javascript 开发语言有问必答
2023-03-29 10:14

回答 3 已采纳不要返回空内容，如果没有内容要返回{"total":0,"rows":[]}这种没有数据的格式，否则返回空数据格式错误不会更新datagrid内容，而且datagrid是easyui的还是什么其他框架
easyui datagrid用 insertRow 添加一行数据数据不显示 easyui
2018-05-13 14:51

回答 2 已采纳 dataTypt:"json", dataType打错了，所以success中的result为字符串，不是转换后的json对象。所以result.id，result.loginId，
WPF .Net FameWork4.6.1 DataGrid 数据要点击才显示 asp.net c# microsoft visual studio
2019-03-19 14:02

回答 1 已采纳 ![图片说明](https://img-ask.csdn.net/upload/201903/22/1553245629_735021.png) 换成CellTemplete就可以了，CellEdi
EasyUI datagrid 动态加载表格数据的方式
2017-09-25 10:11

sun_falls的博客 //arr[1] 为IDNENAME 指标表显示列名(一般为中文) columns.setTitle(arr[ 1 ].toString()); //columns.setWidth(width); 一般不需要设置width columns.setAlign( "center" ); String jsons = JSON....
jquery easyui中datagrid 中的动态接受后台传的数据
2018-03-02 15:30

若未的博客摘要: 在开发中遇到一个问题,就是从后台传过的数据,字段数量和数据是不固定的,所以要对datagrid 方法进行改进1.前台返回数据controller 方法要加上@ResponseBody这里的 list 是数据集合 ele 是字段集合2.js接受数据$...
WPF DataGrid简单使用
2022-05-09 13:25

BeanGo的博客 1.创建 DataGrid <DataGrid x:Name="dataGrid" HorizontalAlignment="Left" Margin="15,195,0,0" ...在WPF中对DataGrid控件的列名设置是非常简单方便的，跟WPF的所有控件都一样可以对某个元素的独立控
easyui datagrid动态绑定列名和数据
2010-11-13 21:24

qing2005的博客这个要命的需求给UI层带来不少麻烦，首先，我们采用easyUI的datagrid显示表格数据，而表格的列是静态写死的，如果要根据不同权限显示不同的字段导致必须通过结果集来show字段，但是easyUI的源代码中是ajax拿到数据后...
easyui中datagrid动态生成列（动态formatter）
2020-11-28 14:15

SunshineGe的博客解析需求: 后台需要拿到动态生成的数据（我们是用存储过程生成或者函数），前台进行拼接前台实现：取到对应的天数，然后初始化字段，接着加载数据 function dynamicLoad(){ //拿到月份，需要只选取年和月份的...
没有解决我的问题, 去提问

悬赏问题

¥15 #MATLAB仿真#车辆换道路径规划
¥15 java 操作 elasticsearch 8.1 实现索引的重建
¥15 数据可视化Python
¥15 要给毕业设计添加扫码登录的功能！！有偿
¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
¥15 微信公众号自制会员卡没有收款渠道啊
¥100 Jenkins自动化部署—悬赏100元
¥15 关于#python#的问题：求帮写python代码
¥20 MATLAB画图图形出现上下震荡的线条
¥15 关于#windows#的问题：怎么用WIN 11系统的电脑克隆WIN NT3.51-4.0系统的硬盘

datagrid根据后台数据动态显示列名与内容

2条回答 默认 最新

悬赏问题

2条回答默认最新