在wex5中怎么用js查询数据库中的数据，并遍历出来？

爱喝牛奶的面包 · 发表于 2016-12-28 09:41:05

爱喝牛奶的面包 · 发表于 2016-12-29 09:43:42

本帖最后由爱喝牛奶的面包于 2016-12-29 10:16 编辑

define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var util = require("$UI/system/components/justep/common/common");
require("$UI/demo/takeoutAdmin/dist/echarts-all");
var Model = function(){
this.isVisible = util.flag;
this.callParent();
};
Model.prototype.modelLoad = function(event){
var names = [];
var numbers = [];
this.comp("mainData").each(function(param){
names.push(param.row.val('fName')); //获取数据库fName字段遍历出来;
numbers.push(param.row.val('number')); //获取数据库的number字段遍历出来;
});
function mainData(cb){
// alert(JSON.stringify(numbers));
// alert(JSON.stringify(names));
setTimeout(function(){
// var json = {};
/*
for(var i=0;i<names.length;i++){
json[i]=names[i];
}
for(var y=0;y<numbers.length;y++){
json[y]=numbers[y];
}
*/
cb({
categories : names,
data : numbers
});
});
}
option = { // 指定图表的配置项和数据
title:{
text : '异步数据加载'
},
tooltip : {}, //提示框，鼠标悬浮交互时的信息提示;
legend : { //图例;
data : ['数量']
},
xAxis : { //设置ECharts图表组件内X轴刻度的样式;
data : []
},
yAxis : {}, //设置ECharts图表组件内y轴刻度的样式
series : [{
name : '数量',
type : 'bar',
data : []
}]
};
//简单的加载动画;
// myChart.showLoading();
//异步加载数据;
mainData(function(data){
//myChart.hideLoading();
myChart.setOption({
xAxis : {
data : data.categories
},
series : [{
name : '数量',
data : data.data
}]
});
});
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
var myChart = echarts.init(this.getElementByXid('detail')); // 基于准备好的dom，初始化echarts实例
};
return Model;
});

复制代码

liangyongfei · 发表于 2016-12-28 10:23:18

建议数据库中的数据，先查询放置在data组件中（如果没有特殊要求，建议使用baasData 和 baasServer配合进行数据交互！）

然后数据加载到data组件中后，循环data.each 取出数据，转换成echarts 需要的数据格式，调用它的方法展示数据即可！

案例介绍：
http://docs.wex5.com/integrate-echarts/
http://docs.wex5.com/portfolio-items/wex5-echarts/
/UI2/demo/misc/echarts/demo.w

爱喝牛奶的面包 · 发表于 2016-12-28 10:41:31

数据加载到data组件上了，关键是怎么循环呀，我就是不会循环取出数据，然后转换成json格式

liangyongfei · 发表于 2016-12-28 10:45:33

爱喝牛奶的面包发表于 2016-12-28 10:41
数据加载到data组件上了，关键是怎么循环呀，我就是不会循环取出数据，然后转换成json格式 ...

循环的常规写法！
this.comp('mainData').each(function(param){
names.push(param.row.val('fName'));
});

param.row.val('字段') 就是某个字段的值！
json格式如何转化！这个是js基础的语法知识！
如果是数组就是push 添加对象赋值的话直接 obj.name = param.row.val('fName')

需要根据echarts 需要的格式进行转换！这个你动手试试吧！

爱喝牛奶的面包 · 发表于 2016-12-28 14:14:32

还是不会啊，按照您说的还是没整出来啊，本人是菜鸟。能不能说的再细点

liangyongfei · 发表于 2016-12-28 14:23:06

爱喝牛奶的面包发表于 2016-12-28 14:14
还是不会啊，按照您说的还是没整出来啊，本人是菜鸟。能不能说的再细点 ...

给你个类似的代码！你参考下吧！
先定义好data 和 data1 的数据数组，然后data循环中给她们赋值！最后把他们添加到echarts 格式的数据中，就可以显示了！

var data = [];
var data1 = [];
var params = new biz.Request.ActionParam();
params.setParam("code", "");
var ctx = this.getContext();
var options = {
context : ctx,
action : "dataOA_DocAction1",
callback: function(data3){
if(data3.state){
var rows = data3.response.rows;
var length = rows.length;
for(var i=0;i<length;i++){
var fType = rows[i].FDOCSECRETLEVELNAME.value;
var times = rows[i].RCB.value;
data[i] = fType;
data1[i] = {value:times,name:fType};
}
}else{
}
}
};
var r=biz.Request.sendBizRequest(options);
var charTitle = "加密级别公文占比";
var option = {
title:{
text:charTitle,
x:'center'
},
tooltip : {
trigger: 'item',
formatter:"{a} {b}<br/> 公文数量：{c}({d}%)"
},
legend: {
show : false,
orient:'vertical',
x:'left',
data:data
},
calculable : false,
series : [
{
name:'加密级别',
type:'pie',
center:['50%','60%'],
itemStyle:{
normal:{
lable:{
show:true,
textStyle:{
fontSize:'19',
fontWeight:'bold'
},
formatter:"{b}:{c}({d}%)"
},
labelLine:{show:true}
}
},
data:data1
}
]
};
var myChart2 = echarts.init(this.getElementByXid('main2'));
myChart2.setOption(option);

复制代码

爱喝牛奶的面包 · 发表于 2016-12-28 17:12:54

define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var util = require("$UI/system/components/justep/common/common");
require("$UI/demo/takeoutAdmin/dist/echarts-all");
var Model = function(){
this.isVisible = util.flag;
this.callParent();
};
Model.prototype.modelLoad = function(event){
function mainData(cb){
setTimeout(function(){
var names = [];
$.each(function(param){
var row = this.comp("mainData").getValueByID("fName");
names.push(row);
});
var json = {};
for(var i=0;i<names.length;i++){
json[i]=names[i];
}
// var lst = [];
// var obj = {};
// obj['categories']=param.row.val('fName');
// obj['data']=param.row.val('number');
// lst.push(obj);
// json['content'] = lst;
cb(
JSON.stringify(json)
);
}, 1000);
}
option = { // 指定图表的配置项和数据
title:{
text : '异步数据加载'
},
tooltip : {}, //提示框，鼠标悬浮交互时的信息提示;
legend : { //图例;
data : ['数量']
},
xAxis : { //设置ECharts图表组件内X轴刻度的样式;
data : []
},
yAxis : {}, //设置ECharts图表组件内y轴刻度的样式
series : [{
name : '数量',
type : 'bar',
data : []
}]
};
//简单的加载动画;
myChart.showLoading({
text: '玩命加载中....'
});
//异步加载数据;
mainData(function(data){
myChart.setOption({
xAxis : {
data : data.row
},
series : [{
name : '数量',
data : data.data
}]
});
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var myChart = echarts.init(this.getElementByXid('detail')); // 基于准备好的dom，初始化echarts实例
};
return Model;
});

复制代码

这是我的js代码，我还是没看明白您发的，您能不能帮我看看我这个应该怎么改？

爱喝牛奶的面包 · 发表于 2016-12-28 17:16:24

这是我的w页面和js页面，能帮我看看嘛？

liangyongfei · 发表于 2016-12-28 17:25:29

爱喝牛奶的面包发表于 2016-12-28 17:12
这是我的js代码，我还是没看明白您发的，您能不能帮我看看我这个应该怎么改？

...

不是$.each 而是 data.each 获取遍历数据，请看API 文档

this.comp('mainData').each(function(param){
param.row.val('字段');//取值
});

复制代码

		自动登录	找回密码
密码			注册

[结贴] 在wex5中怎么用js查询数据库中的数据，并遍历出来？

name显示出来了，但是number为什么不显示呢，是哪里错误了？