X5中提供了dataTables和grid组件。它们都可以分页显示数据、可以使用CSS控制样式、可以排序、可以显示页脚汇总。grid还可以直接编辑、可以分组,可以显示树形数据。

目录

1、组件展示

dataTables组件展示网格数据

dataTables

 

grid组件展示树形数据

树形表格

2、整体功能

2.1、显示数据——dataTables & grid

  1. 添加组件——从右侧组件面板中拖拽dataTables或者grid组件到设计器中
  2. 关联数据——设置组件的data属性,选择一个bizData、baasData或者data组件
  3. 添加列——在组件上点右键,选择添加列,选择要显示的列,点确定按钮。
  4. 删除列——用鼠标选中列,按delete键即可删除选中的列

2.2、设置编辑——grid

  1.  设置列的属性editable为true
  2. 在列中放入编辑时用的组件,例如:input,gridSelect、textarea
  3. 设置编辑组件的bind-ref属性,和列的ref指向相同的列

拖放编辑组件

注意:拖拽组件到设计器中,在列的下方出现红色小竖线时,松开鼠标

设置编辑

编辑组件放入列中时,会自动在列的下面创建editor节点,编辑组件就放在editor节点下。

grid组件还有一个directEdit属性,如果希望点击某列即进入编辑状态,设置这个属性为true,否则双击某列才会进入编辑状态。

2.3、显示行号——dataTables & grid

  1. 设置showRowNumber为true
  2. grid还可以设置行号列的宽度,设置rowNumberWidth属性

显示行号

2.4、设置多列头——grid

grid可以实现下面这样多列头的效果,方法是:

多列头

1、在grid组件上点右键,选择设置多列头

设置多列头

 

2、点列头右边的加号,再点增加合并定义按钮,在合并列中选择合并的第一列,输入要合并的列数,以及定义合并后列头的名称。如果要加多层列头,再点列头右边的加号。

设置多列头

3、grid的列头默认是左对齐,设置多列头后,使用居中会比较好看,打开grid组件的class属性,选择列头对齐方式为居中

设置列头居中

4、现在效果出来了。

2.5、设置分组——grid

下图展示了grid的多级分组,多级统计的能力,按“类型”和“提交人”分组,统计“金额”字段分组及统计

1、在grid组件上点右键,选择设置分组

grid分组设置

  • 1、启用分组——设置是否使用分组
  • 2、启用自定义分组栏——启用后,用户可以调整分组
  • 3、分组折叠——选中后,grid只显示一级分组,展示一级分组,显示二级分组或数据,逐级展开可以看到全部数据
  • 4、默认分组列定义——按顺序勾选需要分组的字段

 

2、在需要分组统计的列上设置分组属性,例如:设置类型的分组属性

grid分组设置

  • text——设置分组显示名称,{0}表示分组字段的值,{1}表示分组中的记录数,其它文字根据需要来写,例如:上图是这样设置的:一级分组:{0}
  • order——设置分组排序方式,设置是升序还是降序
  • columnShow——设置分组后是否显示该列
  • summany——设置分组是否统计,设置该级分组是否显示统计行
  • summanyType——设置统计方式,选择统计函数
  • summanyTpl——设置统计显示模版,{0}表示分组统计值,{1}表示分组指,例如:<b>合计:{0}</b>,其它文字根据需要来写
  • summanyPos——设置分组统计显示位置,选择是头部还是尾部

2.6、设置页脚汇总——dataTables & grid

页脚汇总

1、显示页脚行——设置组件的useFooter属性为true

2、页脚显示文字——两种方式设置

(1)设置列的footerData属性——支持动态计算,即数据修改后,自动重算统计值

上图中的页脚是这样设置的:

  • 类型列的footerData属性设置为’合计”
  • 金额列的footerData属性设置为$data.sum(‘sENField11’),其中$data是环境变量,代表组件关联的data组件,sum是求和方法,sENField11是金额列的字段名。

(2)使用setFooterData方法

上图中的页脚可以这样设置


this.comp('taskGrid').setFooterData({sTypeName:'合计',sENField11:1000});

2.7、控制显示——dataTables & grid

如何设置表格的高度?如何设置列的宽度?

dataTables的设置

1、列宽的设置

列的width属性可以有下面三种情况

  • 不设置——根据内容,自适应宽度
  • 设置为像素值——例如:100px,列宽为100px
  • 设置为百分比——例如:25%,列宽占整个组件的四分之一宽

2、表格自动高度和固定高度

  • 自动高度——不设置scrollY属性,表格的高度根据数据的多少自适应
  • 固定高度——设置scrollY属性为高度像素值,例如:200px,表格的高度为200px。数据多了,会出现垂直滚动条,如果数据没那么多  通过scrollCollapse属性设置表格是否自适应高度,scrollCollapse为true,表格高度适应数据高度,为false,表格高度不变。

3、表格自适应宽度和响应式处理

  • 自适应宽度——不用特殊设置,组件就会自适应宽度。当表格有太多列,导致页面出现滚动条的时候,可以通过设置scrollX属性,来开启水平滚动条。设置为1,显示水平滚动条,为空,不显示滚动条。
  • 响应式处理——当列多的时候,还可以使用响应式处理的方法,效果如下图,将右边显示不下的列显示在每行的下面,点左侧的绿色按钮,可以显示这些列的内容,点红色按钮,可以隐藏这些内容。使用响应式处理的方法是设置flexibleWidth为false,responsive为true

响应式处理

grid的设置

1、列宽的设置

列的width属性可以有下面两种情况

  • 不设置——和其它没有设置宽度的列,平分表格总宽度减去已设置宽度的列的宽度总和
  • 设置为像素值——例如:100,列宽为100px

2、表格自动高度和固定高度

  • 自动高度——设置height属性为auto
  • 固定高度——设置height属性为高度像素值,例如:200px,表格的高度为200px。数据多了,会出现垂直滚动条

2.8、显示树形——grid

树形表格

grid组件可以显示上面两种树形,左边的是树,也就是只显示一列,右边的是树形表格,可以显示多列。还可以设置虚根,例如:左边的树设置了虚根组织机构,这个组织机构不是数据,不在数据库中。

grid显示为树和显示虚根,是通过下面四个属性设置出来的。

  • appearance属性——控制显示样式,设置为grid时,显示为普通表格,设置为tree时,显示为树,设置为treeGrid时,显示为树形表格
  • expandColumn属性——当appearance属性为tree或treeGrid时必填,设置为展开列的字段名,例如:上图中名称列是展开列,名称列对应的字段名是sName,就将sName填入expandColumn属性
  • useVirtualRoot属性——设置是否使用虚根,设置为true时,表示使用虚根,设置为false时,表示不使用虚根
  • virtualRootLabel属性——设置虚根的名称,例如:上图virtualRootLabel属性设置的是组织机构

树形显示图标

树和树形数据的展开列上可以显示图标,在onTreeIconRender事件中,可以根据不同的数据,显示不同的图标。下面的代码中展示了使用字体图标和图片的两种方式。

	Model.prototype.grid1TreeIconRender = function(event){
		if(event.row.val('sOrgKindID')=='psm')
			event.html = '<i class="icon-android-contact" style="font-size:16px;color:skyblue;"/>';
		else{
			var url = require.toUrl('$UI/demo/ogn.gif');
			event.html = '<img src="' + url + '" />'; } }; 

2.9、刷新——grid

grid和data之间是使用行ID进行关联的,因此修改行ID之后,grid和data就失去了关联,必须刷新grid,才能正确显示data中的数据。

刷新grid的方法是refresh();,有两种情况会修改行ID

  1. 使用setValue方法给行ID赋值
  2. 使用复制行的方法assign进行整行复制

下面的代码展示了把data1的当前行整行复制给data2的当前行,在调用整行复制assign方法后,改变了data2的当前行的ID,改成了data1的当前行的ID,因此必须刷新显示data2数据的grid2,grid2才能正确显示这行新数据

	Model.prototype.copyRowBtnClick = function(event){
		var row1 = this.comp('data1').getCurrentRow();
		var row2 = this.comp('data2').getCurrentRow();
		row2.assign(row1);
		this.comp('grid2').refresh();
	};

2.10、动态创建——dataTables & grid

表格组件可以动态创建,下面分别展示创建dataTables和grid的代码。代码中创建了一个显示orgData的sName和sCode两列的表格

创建dataTables

	//引用dataTables.js
	var dataTables = require("$UI/system/components/justep/dataTables/dataTables");

	Model.prototype.createGridBtnClick = function(event) {
		var parentNode = this.getElementByXid("content1");
 		var option = {
			parentNode : parentNode,
			//dataTables的属性,设计时有的属性都可以设置
			data : "orgData",
			class:'table table-hover table-striped',
			flexibleWidth : true,
			responsive : false,
			// 列定义
			columns : [{sName:"sName",xid:"column1"}, {sName:"sCode",xid:"column2"}]
		};
		new dataTables(option);
	};

创建grid

	//引用grid.js
	var Grid = require("$UI/system/components/justep/grid/grid");

	Model.prototype.createGridBtnClick = function(event) {
		var parentNode = this.getElementByXid("content1");
		var option = {
			parentNode : parentNode,
			//grid的属性,设计时有的属性都可以设置
			data: "orgData",
			width: '100%',
			height:'auto',
			// 列定义
			colModel : [{width:"300",name:"sName",xid:"column1" },{width:"200",name:"sCode",xid:"column2"}]
		};
		new Grid(option);
	};

3、列的功能

3.1、显示列、隐藏列——dataTables & grid


//使用组件的hideCol方法隐藏列

this.comp('dataTables1').hideCol('sFName');

this.comp('grid1').hideCol('sFName');

//使用组件的showCol方法显示列

this.comp('dataTables1').showCol('sFName');

this.comp('grid1').showCol('sFName');

3.2、设置列的前端过滤——grid

grid支持在列头出现过滤工具条,可以过滤每一列,还有多种操作符可以选择,这里过滤的是前端数据,也就是只过滤展现出来的数据。 列的前端过滤

做法:设置grid组件的useFilterBar属性为true,在源码中给grid的列增加如下的操作符,运行时效果如上图


      <column width="150" name="sCreateTime" xid="column16">
          <searchoptions>
            <sopt>
              <item>eq</item>
              <item>ne</item>
              <item>le</item>
              <item>lt</item>
              <item>gt</item>
              <item>ge</item>
              <item>bw</item>
              <item>bn</item>
              <item>cn</item>
              <item>nc</item>
              <item>ew</item>
              <item>en</item>
            </sopt>
          </searchoptions>
      </column>

3.3、设置列的排序——dataTables & grid

  • 服务端排序——对数据库中的数据进行排序,将排序后的数据显示到组件中
  • 前端排序——对前端显示的数据进行排序
  • 多列排序——象sql的order by一样,对多个列同时进行排序

列的排序

dataTablers支持两种方式排序:服务端排序和多列排序

  • 设置组件允许排序——设置组件的ordering属性为true
  • 设置列允许排序——设置列的orderable属性为true,列就可以排序了
  • 使用多列排序——按住shift键盘,选择要排序的第二列、第三列…

grid支持两种方式排序:服务端排序和前端排序

  • 设置使用服务端排序——设置组件的serverSort属性为true
  • 设置使用前端排序——设置组件的erverSort属性为false
  • 设置列允许排序——设置列的sortable属性为true,列就可以排序了
  • 设置排序方式——排序方式分为文本text、整数int、浮点数float、日期date四种,根据列的类型正确选择列的sorttype属性值

 3.4、列的格式化显示——dataTables & grid

列的格式化显示

dataTables的设置

dataTables只支持格式化显示日期型数据,通过设置列的format属性实现

grid的设置

grid的列支持格式化显示五种数据:分别是整型integer、数值型number、货币型currency、日期型date和电子邮件email。通过设置formatte

r属性来实现。

  • 整型integer、数值型number——可以设置千分位thousandsSeparator和小数位数decimalPlaces
  • 货币型currency——还可以设置前缀prefix和后缀suffix
  • 日期型date——可以设置日期格式
  • 电子邮件email——设置为email后,点击邮箱地址,会打开outlook,以这个邮箱地址为收件人,生成新邮件

3.5、列内容对齐——grid

列内容对齐有三种方式:左对齐left、居中center、右对齐right,通过设置列的align属性实现

3.6、设置可调整列宽——grid

设置列的resizable为true,表示可调整列宽,设置为false,表示列宽度固定

4、行的功能

4.1、设置行高、前景色、背景色——dataTables & grid

使用rowAttr属性——静态设置

  • 下图为设置了rowAttr属性的前后对比,设置了行高50px和粉色背景色
  • rowAttr属性设置为{style:’height:50px;background:pink;’}

设置行高、背景色

 

使用rowAttr属性——动态设置

  • 下图为设置了rowAttr属性的前后对比,编码等于JUSTEP时,背景色为粉色,否则为黄色
  • rowAttr属性设置为$row.val(‘sCode’)==’JUSTEP’?{style:’height:50px;background:pink;’}:{style:’height:50px;background:yellow;’}

动态设置行背景色
rowAttr属性只为显示用,当修改数据之后,需要在data组件的onValueChanged事件中写代码重新设置。

例如:使用grid组件的setRowCss方法设置行底色,代码如下


	Model.prototype.detailDataValueChanged = function(event){
		if(event.col=='sCode'){
			var rowid = this.comp('detailData').getRowID(event.row);
			if(event.value=='JUSTEP'){
				this.comp('detailGrid').setRowCss(rowid,{background:'pink'});
			}else{
				this.comp('detailGrid').setRowCss(rowid,{background:'yellow'});
			}
		}
	};

4.2、设置奇偶行的背景色——dataTables & grid

dataTables组件的设置

  • dataTables使用了Bootstrap的表格样式,可以直接修改Bootstrap的样式。
  • 奇行背景色的样式——.table-striped>tbody>tr:nth-of-type(odd)

效果如下图

.table-striped&gt;tbody&gt;tr:nth-of-type(odd) {
	background:pink;
}

奇偶行的样式

grid组件的设置

  • 奇偶行显示不同的颜色——设置grid的altRows属性为true,奇行是白色,偶行是灰色。
  • 自定义偶行背景色——定义class,例如pinkalt,只定义背景色就可以。在altclass属性中写上pinkalt,效果如下图
.pinkalt{
        background:pink;
}

奇偶行样式

4.3、设置选中行的背景色——dataTables & grid

dataTables的设置

选中行的样式可以有三种情况:

  1. 不设置——rowActiveClass属性设置为空
  2. 使用Bootstrap的表格样式的active状态——rowActiveClass属性设置为active
  3. 自定义——定义新的class,例如:blueActive,只定义背景色就可以。在rowActiveClass属性中填上blueActive
.blueActive{
        background:skyblue !important;
}

grid的设置

.x-state-highlight是选中行的样式

.x-state-highlight{
	background:pink !important;
}

4.4、设置鼠标悬停行的背景色——dataTables & grid

dataTables的设置

  • dataTables使用了Bootstrap的表格样式,可以直接修改Bootstrap的样式。
  • 鼠标悬停行背景色的样式——.table-hover>tbody>tr:hover
.table-hover&gt;tbody&gt;tr:hover {
	background:yellow;
}

grid的设置

tr.x-state-hover是鼠标悬停行的样式
tr.x-state-hover{
	background:pink !important;
}

4.5、行的多选——dataTables & grid

多选

1、设置多选行

设置组件的multiselect属性为true,就会在左侧出现一列checkbox,选中checkbox,表示选中checkbox所在的行,需要全选时,可以点列头上的checkbox。

还可以使用代码选中行,调用组件的setRowChecked方法,设置某行选中或不选中。这个方法有两个参数,第一个参数是要操作的行,第二个参数是是否选中。

2、获取多选行

选中checkbox后,调用组件的getCheckeds()方法,返回选中行的行ID数组

3、选中或取消选中时触发的事件

  • 选中列头上的checkbox时,表示全选,会触发onRowCheckedAll事件
  • 取消选中列头上的checkbox时,表示全取消,会触发onRowCheckedAll事件
  • 选中数据行上的checkbox时,表示选中本行,会先触发onRowCheck事件,再触发onRowChecked事件
  • 取消选中数据行上的checkbox时,表示取消选中本行,会先触发onRowCheck事件,再触发onRowChecked事件
  • 三个事件中,都返回了触发事件的动作,event.checked为true,表示要选中,为false表示要取消选中
  • onRowCheck事件和onRowChecked事件中,event返回了选中或取消选中的行信息,event.row为选中或取消选中的行,event.rowID为选中或取消选中的行ID
  • 控制是否允许选中或取消选中,在onRowCheck事件中,判断是否允许选中或取消选中,如果不允许,就设置event.cancel=true;,就会取消这次操作

4、grid组件的扩展能力

关于多选,grid组件还提供了下面4个属性

  • mutilboxonly属性——控制点击行是不是进行多选;如果为true,表示只能点checkbox才能多选
  • mutilselectWidth属性——设置多选列的宽度
  • checkedclass属性——设置选中行的样式,例如可以定义一个设置了背景色的样式,将样式名称填入checkedclass属性
  • cascade属性——控制树是否级联勾选,设置为true时,选中或取消选中父节点的checkbox,会自动选中或取消选中已展开的子节点的checkbox。设置为false时,则没有上面的效果

5、单元格的功能

5.1、设置单元格的前景色、背景色——dataTables & grid

单元格样式

设置单元格的前景色、背景色,使用dataTables和grid的单元格渲染事件onCellRender似乎很合适。实际上,对于dataTables来说,是很合适,onCellRender事件只在渲染组件时为每个单元格触发一次,以后不再触发。但是对于grid来说,不仅渲染组件时会触发,而且当光标离开可编辑单元格时,也会触发。这样就存在没有修改数据时,仍要执行代码,为了避免这种情况,我们使用onReload和onValueChanged事件。

dataTables的设置

  • 设置单元格样式——在dataTables组件的单元格渲染事件onCellRender中设置
	Model.prototype.dataTables1CellRender = function(event){
		if(event.colName=='sName'){
			if(event.colVal.length &gt; 10)
			        event.html='<font color="red">' + event.html + '</font>';
			else
			        event.html='<font color="blue">' + event.html + '</font>'; } };

grid的设置

  • 设置单元格样式的方法——使用grid组件的setCell方法
  • 数据加载后设置所有单元格的样式——在grid组件的重新加载事件onReload中设置
  • 数据修改后重新设置样式——在data组件的onValueChanged事件设置
	Model.prototype.taskGridReload = function(event){
		var taskData = this.comp('taskData');
		var me = this;
		taskData.each(function(option){
			me.setNameCellColor(option.row);
		});
	};

	Model.prototype.taskDataValueChanged = function(event){
		if(event.col=='sName'){
			this.setNameCellColor(event.row);
		}
	};

	Model.prototype.setNameCellColor = function(row){
		var style;
		if(row.val('sName').length &gt; 10)
			style = {color:'#ff0000'};
		else
			style = {color:'#00ff00'};
		this.comp('taskGrid').setCell(row.getID(),'sName',style);
	};

5.2、合并单元格——grid

单元格合并

  • 获得要合并的第一个单元格——调用组件的getCell方法获得单元格cell(也就是table中的td)
  • 在单元格上设置合并——调用cell的jquery方法attr(‘rowspan’,数量)设置合并
  • 隐藏其它被合并的单元格——调用cell的jquery方法hide隐藏单元格

下面的代码演示了对于一列的合并算法

	Model.prototype.taskGridReload = function(event){
		var taskData = this.comp('taskData');
		var lastName='';//记录上一个单元格的值,用于比较
		var delRowArr = [];//保存被合并的行ID,最后设置隐藏
		var spanRowArr = [];//保存要设置合并的行ID,最后设置合并
		var spanNum = 0;//记录需要合并几行
		var firstRowID;//记录需要合并的行ID
		taskData.each(function(option){//在遍历时进行比较,确定合并方式
			if(lastName==option.row.val('sCreatorPersonName')){
				delRowArr.push(option.row.getID());
				spanNum ++;
			}else{
				if(lastName != '' && spanNum > 1)
					spanRowArr.push([firstRowID,spanNum]);
				spanNum = 1;
				lastName = option.row.val('sCreatorPersonName');
				firstRowID = option.row.getID();
			}
		});
		if(spanNum > 1){
			spanRowArr.push([firstRowID,spanNum]);
		}
		if(spanRowArr.length > 0){//设置合并
			$.each(spanRowArr,function(i,rowid){
				var cell = event.source.getCell(rowid[0],'sCreatorPersonName');
				$(cell).attr('rowspan',rowid[1]);
			});
		}
		if(delRowArr.length > 0){//设置隐藏
			$.each(delRowArr,function(i,rowid){
				var cell = event.source.getCell(rowid,'sCreatorPersonName');
				$(cell).hide();
			});
		}
	};

5.3、显示按钮、链接——dataTables & grid

grid-btnl

在单元格中显示按钮、链接

  • 显示按钮——onCellRender事件中的event.html可以控制单元格的展现,给event.html设置为<button>,就可以展现出按钮。
  • 显示链接——onCellRender事件中的event.html可以控制单元格的展现,给event.html设置为<a>,就可以展现出链接。
  • 在添加的按钮和链接的单击事件中获得model对象的方法
    • v3.3版本及以前:使用justep.Bind.contextFor(this).$model
    • v3.4版本及以后:使用justep.Util.getModel(this)
	Model.prototype.taskGridCellRender = function(event){
		if(event.colName=="sEIField41")//显示按钮
			event.html = "<button class='btn btn-default btnDel' onclick='justep.Bind.contextFor(this).$model.delData(event,\"" + event.rowID + "\")'>删除</button>";
			//上面这句代码中,第一个event是onclick的dom事件对象,第二个event是onCellRender的事件对象,this是button这个节点
	};
	Model.prototype.delData = function(event, rowid) {
		var row = this.comp("taskData").getRowByID(rowid);
		this.comp("taskData").deleteData(row);
		event.stopPropagation();//停止事件的传播,否则还会出发RowClick事件
	};

5.4、显示图片——dataTables & grid

显示图片

显示图片——在onCellRender中给event.html设置为,就可以显示出图片

代码如下,根据不同的值,显示不同的图片

	Model.prototype.taskGridCellRender = function(event){
		if(event.colName=="sEIField41"){
			var url;
			if(event.colVal==1)
				url = require.toUrl("$UI/demo/justep.png");
			else
				url = require.toUrl("$UI/demo/car.jpg");
			event.html = "<img src='" + url + "' width='100'/>";
		}
	};

上面展示了显示图片文件的写法,还有两种图片,一种是存入数据库的blob图片,另一种是存入文档服务器的附件图片,它们的区别在于获得图片url的方法不同,下面分别进行介绍

1、获得附件图片的url

使用AttachmentImage组件上传图片后,字段里面的值是一个json数组,例如

[{“docID”:”C6952018F8B0000173652E80D420D000″,”docName”:”ct2.jpg”,”size”:”21261″,”docPath”:”/defaultDocNameSpace”,”fileID”:”1-defaultDocNameSpace”,”time”:”2015-04-24T10:49:03.634Z”}]

在这个json数组中,获取docPath和fileID,调用getURLByFileID方法获取附件图片的url
注意,需要引用DocUtils

	var DocUtils = require("$UI/system/components/justep/docCommon/docUtil");

	Model.prototype.taskGridCellRender = function(event){
		if(event.colName=="sETField31"){
			var json = event.colVal;
			if(json != "" &amp;&amp; json != undefined){
                var jsonList = eval("("+json+")");
                var docPath = jsonList[0]["docPath"];                 //获得docPath
                var fileID = jsonList[0]["fileID"];;                   //获得fileID
                var url = DocUtils.InnerUtils.getURLByFileID({docPath:docPath,fileID:fileID,context:this.getContext()})
               event.html = "<img src='" + url + "' width='100'/>";
			}
		}
	};

2、获得blob图片的url

在queryAction中得不到blob类型的数据,在select中可以增加一列,用来判断blob字段是否有数据。有数据时,再设置用img显示。

	Model.prototype.taskGridCellRender = function(event){
		if(event.colName=="hasImg"){
			if(event.colVal == "1"){
				var url = biz.Request.setBizParams(require.toUrl("$UI/system/service/common/bizAction.j")
					+ "?blobDataModel=/system/data"                                  //数据模块目录
					+ "&amp;blobConcept=SA_Task"                                          //概念名
					+ "&amp;blobRelation=sEBField51"                                           //关系名
					+ "&amp;blobConceptValue=" + event.rowID                                        //行ID
					+ "&amp;process=/erp/buy/process/grid/gridProcess"              //流程名称
					+ "&amp;activity=mainActivity"                                    //环节名称
					+ "&amp;action=blobDownloadAction"                                //调用的Action
					+ "&amp;$query-version=" + justep.UUID.createUUID(),this.getContext().getBSessionID());
               event.html = "<img src='" + url + "' width='100'/>";
			}
 		}
	};

5.5、使用文本框编辑——grid

使用文本框编辑

  • 设置编辑时,放textarea组件,可以编辑多行数据,且编辑后的数据也多行显示
  • 设置textarea组件的bind-ref属性,和列的ref指向相同的列

 5.6、使用下拉框编辑——grid

编辑使用下拉框

  1. 设置编辑时,放gridSelect组件,可以在编辑时,显示下拉框
  2. 设置gridSelect组件的bind-ref、bind-labelRef属性,和列的ref指向相同的列
  3. 设置gridSelect组件的option属性下面的3个属性:data、value、label
  • data指向一个data组件或者bizData组件,作为下拉数据的来源
  • value指向data中的列名,这个值会写入bind-ref关联的字段
  • label指向data中的列名,这个值会写入bind-labelRef关联的字段

6、说明

dataTables组件封装的是jquery的dataTables插件

grid组件封装的是jquery的jqGrid插件

本文由WeX5君整理,WeX5一款开源免费的html5开发工具H5 App开发就用WeX5!

阅读其他app 开发相关文章:http://doc.wex5.com/?p=3443