wex5通过data组件实现分页查询

原创
2019/01/11 23:59
阅读数 583
  • 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;
});
  • 具体w文件源码
<?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"
                }
            }
        }
        // ......
    ]
}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部