备忘：.NET webapi 返回json结果给前台，前台渲染表格

最新推荐文章于 2024-07-19 08:42:46 发布

xiongpengbo

最新推荐文章于 2024-07-19 08:42:46 发布

阅读量237

点赞数

文章标签：前端后端

本文链接：https://blog.youkuaiyun.com/xiongpengbo/article/details/113937374

版权

本文记录了如何在.NET WebAPI中通过HttpGet方法返回JSON数据，以及前端如何利用layuiTable和ECharts库解析并展示这些数据。后台通过SQL查询计算总面积，并将数据封装成JSON响应。前端接收到数据后，初始化表格和图表，进行数据渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.后台

[HttpGet]
[Route("api/sde/statqu")]
public HttpResponseMessage getQuStatics(string where)
{
int area = SDEDBContext.ExecuteInt32("select sum(SHAPE_AREA) as area from SDE_TABLE where " + where);

List<STATICSS> list = new List<STATICSS>();
STATICSS staticS = new STATICSS();
staticS.name = "市";
staticS.type = "类型";
staticS.count = "123";
staticS.area =area;
list.Add(staticS);
list.Add(staticS);
list.Add(staticS);
list.Add(staticS);
list.Add(staticS);

LayuiTable laytable = new LayuiTable();
laytable.data = list;
laytable.code = 0;
laytable.msg = "";
laytable.count = 5;
string json = JsonConvert.SerializeObject(laytable);
//返回json数
return new HttpResponseMessage()
{
Content = new StringContent(json, Encoding.UTF8, "application/json"),
};

}

2.前台

表格

function initdata() {
table.render({
elem: '#demo'
, height: 500
, cellMinWidth: 80
, dataType: 'jsonp'
, url: dataurl+wherestr //数据接口
//, page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
// layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
// //,curr: 5 //设定初始在第 5 页
// , groups: 1 //只显示 1 个连续页码
// , first: false //不显示首页
// , last: false //不显示尾页
// }
, page: true
, toolbar: '#toolbarDemo'
, defaultToolbar: ['filter', 'exports', 'print',
{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]

, cols: [[ //表头
{ type: 'checkbox', fixed: 'left' }
, { field: 'name', title: '行政区划', sort: true }
, { field: 'garea', title: '公面积(公顷)', sort: true }
, { field: 'sarea', title: '生面积(公顷)', sort: true }
, { field: 'farea', title: '面积(公顷)', align: 'center', sort: true }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
});

}

echart图形

function initChart() {
$.ajax({
url: dataurl+wherestr,
type: 'get',
success: function (rr) {
if (rr) {
var myChart = echarts.init(document.getElementById('chart'));

// 指定图表的配置项和数据
var option = {
title: {
text: '统计图'
},
tooltip: {},
legend: {
data: ['面积']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '面积',
type: 'bar',
data: []
}]
};

stalist = rr.data;

for (var i = 0; i < stalist.length; i++) {
var xname = stalist[i]["name"];
var areas = stalist[i]["area"];
option.xAxis.data.push(xname);
option.series[0].data.push(areas);
console.log(option.series[0]);
}

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
});

}