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