u010474082
2015-11-30 07:49
采纳率: 40%
浏览 5.6k
已采纳

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();

}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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"}

    点赞 打赏 评论
  • 一个columns配置对应一组数据,你要更换过columns自己清空下datagrid容器的html,重新生成

     <div id="dvdg">
    <table id="dg"></table>
    </div>
    <script>
    $('#dvdg').html('<table id="dg"></table>');//清空之前的datagrid
    //用同步或者异步ajax或者新column配置后重构,注意异步ajax $('#dg').datagrid(......)放到回调里面
    $('#dg').datagrid(......)//重构,
    </script>
    
    点赞 打赏 评论

相关推荐 更多相似问题