datagrid根据返回data动态添加列

1.页面展示:
在这里插入图片描述

需求:动态获取商品各竞品的价格, 勾选几个竞品就显示几个竞品的价格, 竞品全部由数据库查询得出, 列不固定

2.主要表结构:

CREATE TABLE `pis2b_match_result` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `competitor_id` int(4) DEFAULT NULL COMMENT '友商id',
  `merchant_id` varchar(32) DEFAULT NULL COMMENT '若选择的是友商平台下的商家,填商家id',
  `province_code` varchar(10) DEFAULT NULL COMMENT '省份code',
  `type_id` int(4) DEFAULT NULL COMMENT '账号所属企业类型',
  …
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=129 DEFAULT CHARSET=utf8 COMMENT='药城商品匹配结果';

3.返回数据格式:

{
    "rows": [
        {
            "approve": "国药准字Z42021662",
            "cat1Name": "中西成药",
            "factory": "健民药业集团股份有限公司",
            "norm": "5g*40袋",
            "prices": [
                {
                    "drugDsctPrice": 29.08,
                    "merchant": "启元旗舰店",
                    "prices": [],
                    "siteAndMerchant": "药师帮-启元旗舰店",
                    "siteName": "药师帮",
                    "spuCode": "020APAZ150001"
                }
            ],
            "shortName": "龙牡壮骨颗粒",
            "spuCode": "020APAZ150001",
            "supplyName": "广东壹号药业有限公司"
        },
        {
            "approve": "国药准字H31022635",
            "cat1Name": "中西成药",
            "factory": "上海新亚药业闵行有限公司",
            "norm": "15g",
            "prices": [
                {
                    "drugDsctPrice": 3.4,
                    "merchant": "启元旗舰店",
                    "prices": [],
                    "siteAndMerchant": "药师帮-启元旗舰店",
                    "siteName": "药师帮",
                    "spuCode": "108368"
                },
                {
                    "drugDsctPrice": 3.4,
                    "merchant": "药品汇旗舰店",
                    "prices": [],
                    "siteAndMerchant": "药师帮-药品汇旗舰店",
                    "siteName": "药师帮",
                    "spuCode": "108368"
                }
            ],
            "shortName": "林可霉素利多卡因凝胶",
            "spuCode": "108368",
            "supplyName": "广东壹号药业有限公司"
        }
        .....
    ],
    "total": 13
}

4.Jsp 页面:

// 初始化比价信息
function initDataGrid() {
	var params = getSearchParams();
	var columns = initCompetitorAndMerchantPriceColumns();
	$("#data_grid").datagrid({
		url : "/pis/matchResult/findSingleProvinceMatchResults",
		method : "post",
		queryParams : params,
		nowrap : false,
		fitColumns : true,
		pageList: [10, 20, 30],//选择一页显示多少数据
		pagination : true,//在DataGrid控件底部显示分页工具栏。
		loadMsg : "查询中...",
		emptyMsg : "<span size = 5>暂无记录</span>",
		rownumbers : true,
		frozenColumns:[[
			{field : "supplyName", title : "厂商", align : "center", width : 140},
			{field : "spuCode", title : "商品编码" , align : "center", width : 120},
			{field : "norm", title : "规格", align : "center", width : 120},
			{field : "approve",title : "批准文号",  align : "center", width : 150},
		]],
		columns : [
			columns
		],
		rowStyler: function(rowIndex, rowData){
			if (rowIndex % 2 == 1){
				return "background-color:#9b9f9f;";
			}
		}
	});
}

// 初始化价格列
function initCompetitorAndMerchantPriceColumns() {
	var columns = [];
	var competitorAndMerchantInputs= $("#competitorAndMerchants").find("input[name='competitor_merchant_id']");
    for(var i = 0; i < competitorAndMerchantInputs.length; i++){
		if(competitorAndMerchantInputs[i].checked){
			var column = {};
			column["field"] = "prices" + i; //列名不可带特殊字符,否则可能导致表格列对不齐
			column["title"] = $(competitorAndMerchantInputs[i]).attr("class");
		    column["width"] = 80;
			column["formatter"] = function(value,rowData,rowIndex){
				// 取价格
				var prices = rowData["prices"];
				for(var j = 0; j < prices.length; j++){
					// 此处应使用this
					if(prices[j]["siteAndMerchant"] == this.title){
					 	return prices[j]["drugDsctPrice"];
					}
				}
				return "";
			}
			columns.push(column);
		}
	}
	return columns;
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值