## Data组件基础01：列、初始化加载状态、行对象和游标 **一、Data的xid** Data组件是前端model上的数据核心，xid是Data组件的唯一标识，它的命名规则必须符合JS变量命名规则，因为Data组件为简化感知组件引用data的写法直接在model上使用xid存放了Data的对象实例，这样引用数据就可以使用model.xid的方式了，当然同样也支持model.comp(xid)的常规写法； <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="fruitData.ref('fName')"/> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="comp('fruitData').ref('fName')"/> 两种写法是等效的，但是显然第一种方式更简单直接 **二、Data的列** * Data组件的列定义 列定义包括：name、type、label， name：列的唯一标识 type：列的数据类型，取自范围：String、Integer、Long、Float、Double、Decimal、Boolean、Date、Time、DateTime label：列显示名称，当没有定义时，label为name 另外Data组件上还有一个重要的属性idColumn，用来指定Data数据中行ID的表示列，可以理解为关系型数据库中表上定义的key关系 <div xid="fruitData" component="$UI/system/components/justep/data/data" idColumn="fID" autoLoad="true"> <column label="ID" name="fID" type="String"/> <column label="显示名称" name="fName" type="String"/> <column label="重量" name="fWeight" type="Double"/> <data> [{"fName":"苹果","fID":"apple","fWeight":100}, {"fName":"梨","fID":"pear","fWeight":80}, {"fName":"西瓜","fID":"watermelon","fWeight":1800}, {"fName":"香蕉","fID":"banana","fWeight":3600}] </data> </div> 相关的属性和API： ~~~ 属性：  Data.defCols：存放列的定义信息 Data.idColumn ~~~ 代码示例： var data = this.comp('fruitData'); var IDColDef = data.defCols[data.idColumn];//获取ID列的定义 alert(data.idColumn+' label:'+IDColDef.label+',name:'+IDColDef.name+',type:'+IDColDef.type); ~~~ 取值赋值相关API: Data.getValue(col,row); Data.setValue(col,value,row); Row.val(col,value); ~~~ 获取数据时会根据列定义进行数据的转换，目前支持string—>Integer、Long、Float、Double、Decimal、Date、Time、DateTime转化，当转换失败时返回Data.ErrorValue对象，通过ErrorValue.value可以获取原值 代码示例： var data = this.comp('fruitData'); //给fWeight设置字符数据 data.setValue('fWeight','200'); var v = data.getValue('fWeight'); alert('fWeight:('+typeof(v)+')'+v); //给fWeight设置字符数据'abc'非有效的数值字符串 data.setValue('fWeight','abc'); v = data.getValue('fWeight'); alert('fWeight:'+v+','+v.value); [](https://box.kancloud.cn/2015-09-23_560180053d79c.png) [](https://box.kancloud.cn/2015-09-23_5601800b2803e.png) ~~~ 获取列显示名相关API： Data.label(col); Row.label(col); ~~~ <label bind-text="fruitData.label('fName')"/> ~~~ 获取行ID相关API: Data.getRowID(row); Data.getValue(Data.idColumn); Row.getID(); ~~~ 代码示例： //三种方式获取行ID var data = this.comp('fruitData'); var v = data.getValue(data.idColumn); var crow = data.getCurrentRow(); var id1 = data.getRowID(crow); var id2 = crow.getID(); alert('rowid:'+id1+','+v+','+id2); * 列类型和规则的关系 当列的type为Integer、Long、Float、Double、Decimal、Date、Time、DateTime时会增加数据格式的规则校验； <div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label20"> <label class="x-label" bind-text="fruitData.label('fWeight')"/> <input component="$UI/system/components/justep/input/input" class="form-control x-edit" bind-ref="fruitData.ref('fWeight')"/> </div> fruitData的fWeight列type为Double，当输入非数字时会出现错误提示 [](https://box.kancloud.cn/2015-09-23_5601800b7d8a8.png) * 列类型和input组件的关系 列类型和Input组件同样有着密切关系，不同类型会影响input的行为和展现，当列的type为Integer、Long、Float、Double、Decimal时，Input组件会自动加上输入控制，只允许输入数字类型；当列的type为Date、Time、DateTime时，Input组件会启用日期时间选择器进行数据修改 [](https://box.kancloud.cn/2015-09-23_56018011c90c6.png) **三、初始化加载状态** Data组件上有两个关于初始化加载状态属性：autoLoad、autoNew，表示当功能页面打开后data组件的状态，两个属性是互斥的； 当autoLoad=true时，Data组件在model的onModelConstructing时执行open操作，当autoNew=true时，Data组件在model的onModelConstructing时执行newData操作； 注：data定义的静态数据需要autoLoad=true才进行加载，否则需要主动调用open方法加载 **四、Data的行对象** Data组件上的数据是二维表结构，即行列结构，上面介绍了列现在我们来看看行对象 首先Data组件的数据存放在Data.datas上，Data.datas是可观察的数组（关于可观察的数组请查阅数据绑定的文章，这里我们就把他理解成简单的数组），数组上的每一个项就是行。通过行上扩展parent和children，很轻松就扩展出了Tree型数据结构（关于data的tree我们后面文章再详细介绍）。 [](https://box.kancloud.cn/2015-09-23_560180123c6dc.png) 通过上图我们能看到调试器中datas存放的行对象实例 ~~~ Data.Row常用API： Row.ref(col);---------获取对应列的可观察数据对象，主要使用在感知组件的bind-ref Row.val(col);---------获取对应列的值，等价于Data.getValue(col,row) Row.label(col);-------获取对应列的显示名 Row.index();----------获取行的索引号 Row.parent();---------获取行的父 Row.children();-------获取行的子 ~~~ **五、Data的数据游标** Data组件的游标指的就是Data组件的当前行，即：Data.currentRow，所有API和组件数据引用在没有显示指定行参数时使用的都是当前游标行 ~~~ 相关API： Data.getCurrentRow();---------获取当前行 Data.to(row);-----------------滚动游标 Data.first();-----------------游标到首行 Data.last();------------------游标到末尾行 Data.next();------------------游标到下一行 Data.pre();-------------------游标到前一行 ~~~ 案例通过Data.getCurrentRow()指定list组件中当前行的样式使用class：x-currentRow <div component="$UI/system/components/justep/list/list" class="x-list" data="fruitData"> <div class="x-list-template"> <div component="$UI/system/components/bootstrap/row/row" class="row" bind-css="{'x-currentRow':$object==$model.fruitData.getCurrentRow()}" style="padding: 6px 0;"> <div class="col col-xs-4"> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="ref('fID')"/> </div> <div class="col col-xs-4"> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="ref('fName')"/> </div> <div class="col col-xs-4"> <input component="$UI/system/components/justep/input/input" class="form-control" bind-ref="ref('fWeight')"/> </div> </div> </div> </div> 下图为运行效果： [](https://box.kancloud.cn/2015-09-23_560180129730e.png)[](https://box.kancloud.cn/2015-09-23_56018013056b7.png)