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条)

报告相同问题？

关注问题

easyui datagrid 不显示数据问题 easyui java mvc
2017-07-24 18:52

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

sxlxmh1314的博客上一篇实现了datagrid加载时列名的动态添加，因项目需求，需要对此页面设置定时器，3秒刷新一次，用datagrid的reload方法刷新时会有闪屏的效果，网上搜的在本页面中添加css样式的方法虽然对闪屏有一定的改善，但效果...
easyui datagrid，获取当前选中的列名
2015-11-03 06:29

回答 5 已采纳调用beginEdit后给所有编辑器添加click事件获取编辑器所在有field属性的td单元格，field值就是列名称 ``` $('#dg').datagrid('be
easyui datagrid用 insertRow 添加一行数据数据不显示 easyui
2018-05-13 14:51

回答 2 已采纳 dataTypt:"json", dataType打错了，所以success中的result为字符串，不是转换后的json对象。所以result.id，result.loginId，
datagrid控件数据显示 ecmascript javascript 开发语言有问必答
2023-03-29 10:14

回答 3 已采纳不要返回空内容，如果没有内容要返回{"total":0,"rows":[]}这种没有数据的格式，否则返回空数据格式错误不会更新datagrid内容，而且datagrid是easyui的还是什么其他框架
动态管理ASP.NET DataGrid数据列
2020-03-04 09:06

通过这种方式，我们可以在运行时根据用户需求动态调整DataGrid的列显示，提高了应用的灵活性和用户体验。这种技术广泛应用于数据展示需求变化频繁或需要个性化配置的场景，比如用户可以根据自身需要选择显示哪些列。...
datagrid加载的数据与Controller返回的数据不一致 easyui
2018-03-28 03:01

回答 4 已采纳 btch_id改为字符串类型，不要数字类型的，发送到客户端转为对象后溢出了吧，不变都难
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动态绑定列名和数据
2010-11-13 21:24

qing2005的博客这个要命的需求给UI层带来不少麻烦，首先，我们采用easyUI的datagrid显示表格数据，而表格的列是静态写死的，如果要根据不同权限显示不同的字段导致必须通过结果集来show字段，但是easyUI的源代码中是ajax拿到数据后...
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....
WPF动态添加行列DATAGRID
2013-04-28 10:28

DataGrid可以通过绑定到一个数据源（如ObservableCollection或List）来自动生成列，而行则会根据数据源中的对象数量自动创建。但是，如果数据源的结构未知或者需要在运行时动态调整列的数量和类型，我们需要手动处理...
jquery easyui中datagrid 中的动态接受后台传的数据
2018-03-02 15:30

若未的博客摘要: 在开发中遇到一个问题,就是从后台传过的数据,字段数量和数据是不固定的,所以要对datagrid 方法进行改进1.前台返回数据controller 方法要加上@ResponseBody这里的 list 是数据集合 ele 是字段集合2.js接受数据$...
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); ...
easyui下datagrid嵌套显示相关文件
2017-07-27 17:12

在IT领域，EasyUI是一个基于jQuery的前端框架，它提供了丰富的UI组件，包括表格（datagrid...这些文件协同工作，实现了在EasyUI的datagrid组件中动态加载并显示嵌套的表格数据，为用户提供更丰富的信息展示和交互体验。
没有解决我的问题, 去提问

悬赏问题

¥20 iOS绕地区网络检测
¥15 python验证码滑块图像识别
¥15 根据背景及设计要求撰写设计报告
¥15 QT6颜色选择对话框显示不完整
¥20 能提供一下思路或者代码吗
¥15 用twincat控制！
¥15 请问一下这个运行结果是怎么来的
¥15 单通道放大电路的工作原理
¥30 YOLO检测微调结果p为1
¥15 DS18B20内部ADC模数转换器

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

2条回答 默认 最新

悬赏问题

2条回答默认最新