- wex5的data组件的api设计的很好，只要深度了解data组件运行机制，写分页查询很简单。
- 具体的js源码
define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var Model = function(){
this.callParent();
};
Model.prototype.dataMainCustomRefresh = function(event){
event.async = true;
justep.Baas.sendRequest({
"url" : "/ecoolper/address/query",
"async" : true,
"params" : {
"limit" : event.limit,
"offset" : event.offset,
"columns" : event.source.getColumnIDs(),
},
"success" : function(table) {
event.source.loadData(table, event.options.append);
event.source.doRefreshAfter(true, event.options);
}
});
};
return Model;
});
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
design="device:pc">
<div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:190px;left:371px;">
<div component="$UI/system/components/justep/data/data" autoLoad="true"
xid="dataMain" idColumn="id" onCustomRefresh="dataMainCustomRefresh">
<column name="id" type="String" xid="xid1"/>
<column name="userId" type="String" xid="xid2"/>
<column name="name" type="String" xid="xid3"/>
<column name="phone" type="String" xid="xid4"/>
</div>
</div>
<div component="$UI/system/components/justep/grid/grid" hiddenCaptionbar="true"
altRows="true" class="x-grid-no-bordered" xid="gridMain" data="dataMain" width="100%"
height="300">
<columns xid="columns1">
<column width="300" name="id" xid="column1"/>
<column width="300" name="userId" xid="column2"/>
</columns>
</div>
<div component="$UI/system/components/justep/pagerBar/pagerBar" class="x-pagerbar container-fluid"
xid="pagerBar" data="dataMain">
<div class="row" xid="div8">
<div class="col-sm-3" xid="div9">
<div class="x-pagerbar-length" xid="div10">
<label component="$UI/system/components/justep/pagerLimitSelect/pagerLimitSelect"
class="x-pagerlimitselect" xid="pagerLimitSelect2">
<span xid="span11">显示</span>
<select component="$UI/system/components/justep/select/select" class="form-control input-sm"
xid="select2">
<option value="10" xid="default5">10</option>
<option value="20" xid="default6">20</option>
<option value="50" xid="default7">50</option>
<option value="100" xid="default8">100</option>
</select>
<span xid="span12">条</span>
</label>
</div>
</div>
<div class="col-sm-3" xid="div11">
<div class="x-pagerbar-info" xid="div12">当前显示0条，共0条</div>
</div>
<div class="col-sm-6" xid="div13">
<div class="x-pagerbar-pagination" xid="div14">
<ul class="pagination" component="$UI/system/components/bootstrap/pagination/pagination"
xid="pagination3">
<li class="prev" xid="li5">
<a href="#" xid="a5">
<span aria-hidden="true" xid="span13">«</span>
<span class="sr-only" xid="span14">Previous</span>
</a>
</li>
<li class="next" xid="li6">
<a href="#" xid="a6">
<span aria-hidden="true" xid="span15">»</span>
<span class="sr-only" xid="span16">Next</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
- data组件数据格式（转载：http://doc.wex5.com/?p=4932）
{
// "@type" - 类型标识，"table"表明这个JSON是一个table结构的数据
"@type" : "table",
// "userdata" - table的元信息
"userdata" : {
// "idColumnName" - ID列的名称
"idColumnName" : "fID",
// "idColumnType" - ID列的数据类型
"idColumnType" : "String",
/**********可以在下面列定义中包含包含ID列，并忽略ID列定义**********/
// "relationAlias" - 列名，以逗号分隔
"relationAlias" : "fAddress,fContent,fCreateTime,fPhoneNumber,fSum,fUserID,fUserName",
// "relationTypes" - 列数据类型，与上面的列名对应，
// 支持的类型有String、Integer、Long、Float、Double、Decimal、Boolean、Date、Time、DateTime
"relationTypes" : "String,String,DateTime,String,Float,String,String",
// "sys.count" - 总行数，用于分页的页数计算，仅当返回第一页数据（offset==0）时需要返回总行数
"sys.count" : 2,
/**********以下元信息只对BeX5的BizData组件有效，WeX5中可以忽略**********/
// "idColumnDefine" - ID列的关系名称，用于指出列对应的概念和关系
"idColumnDefine" : "fID",
// "relations" - 列关系名称，用于指出列对应的概念和关系
"relations" : "fAddress,fContent,fCreateTime,fPhoneNumber,fSum,fUserID,fUserName",
// "model" - 数据模块，用于指出概念映射的data模块路径
"model" : "",
// "updateMode" - 更新模式，指定数据保存时的乐观锁机制（whereVersion或whereAll）
"updateMode" : "whereVersion"
},
// "rows" - 行数据数组
"rows" : [
// 第一行数据，每一行数据都是一个JSON结构
{
// "fAddress" - fAddress是列名，后面的JSON数据是fAddress字段的值
"fAddress" : {
"value" : "北京朝阳区东三环南路98号高和蓝峰大厦18层1802室"
},
"fContent" : {
"value" : "土豆炖牛肉套餐(1) 老北京烤鸭套餐(1) "
},
"fCreateTime" : {
// 注意日期时间类型的数据格式
// 日期"yyyy-MM-dd"、时间"hh:mm:ss.fff"、日期时间"yyyy-MM-ddThh:mm:ss.fffZ"
"value" : "2015-03-04T16:45:49.000Z"
},
// "fPhoneNumber" - fPhoneNumber是列名，后面的JSON数据是fName字段的值
// 修改过的值数据包含value、originalValue和changed
"fPhoneNumber" : {
// "value" - 列值
"value" : "010-59798677",
// "originalValue" - 列修改前的原值，仅当changed==1时有效
"originalValue" : "400-017-8677",
// "changed" - 列数据是否被修改（0或1）
"changed" : 1
},
"fSum" : {
"value" : 80
},
"fUserID" : {
"value" : "user"
},
"fUserName" : {
"value" : "马先生"
},
// "userdata" - 行的元信息
"userdata" : {
// "isModified" - 行数据是否被修改
"isModified" : true,
// "recordState" - 行编辑状态（ new、edit、delete、none），仅当isModified==true时有效
"recordState" : "edit",
// "id" - ID列的值数据
// 未修改的值数据只包含value，修改过的值数据包含value、originalValue和changed
"id" : {
"value" : "C684CA403A4000017A8FBAB093D01B65"
}
}
},
// 第二行数据
{
"fAddress" : {
"value" : "北京朝阳区东三环南路98号高和蓝峰大厦18层1802室"
},
"fContent" : {
"value" : "剁椒鱼头套餐(1) 宫爆鸡丁(1) "
},
"fCreateTime" : {
"value" : "2015-03-04T16:45:44.000Z"
},
"fPhoneNumber" : {
"value" : "400-017-8677"
},
"fSum" : {
"value" : 61
},
"fUserID" : {
"value" : "user"
},
"fUserName" : {
"value" : "马先生"
},
"userdata" : {
"isModified" : false,
"id" : {
"value" : "C684CA3EF930000156201E203200CD80"
}
}
}
// ......
]
}
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
