cola-ui的使用

[toc]

> 官方：[http://www.cola-ui.com](http://www.cola-ui.com)
>
> 教程位置：[http://www.cola-ui.com/guide/model](http://www.cola-ui.com/guide/model)
>
> API: [http://www.cola-ui.com/api/cola.html](http://www.cola-ui.com/api/cola.html) , [http://legacy.cola-ui.com](http://legacy.cola-ui.com)
>
> 组件地址：[http://www.cola-ui.com/docs/button](http://www.cola-ui.com/docs/button)
>
> 源码地址：[https://github.com/Cola-Org/cola-ui](https://github.com/Cola-Org/cola-ui)

## 产品简介

- Cola UI是支持双向数据绑定的一站式前端UI框架。采用了精简的MVVM架构，在确保灵活性的同时尽可能降低对开发者的技术要求。
- Cola UI遵循Mobile First的策略，特别适合于移动设备应用开发。
- Cola UI整合了jQuery和Semantic UI，同时提供更多常用的List、Table、Tree等高级控件。

## 开始

`以上内容都是通过cola-ui官网获得的资料，绝大多数的开发内容可以参考cola-ui官网提供的API进行查阅`

**本文档主要针对于camsi工程中用到的功能或特性，且可能不存在于cola-ui官网提供的API进行整理和说明**

### 组成结构

`通常要基于camsi工程在浏览器渲染出来的页面由三个部分组成，例如：simple01.jade、M.js、simple01Model.js`

#### Jade

`Jade 是一个高性能的模板引擎，它深受 Haml影响，它是用 JavaScript 实现的，并且可以供 [Node](http://nodejs.org/) 使用，你也可以[在此试用](http://naltatis.github.io/jade-syntax-docs/)，这里推荐[Jade入门中文文档](http://www.nooong.com/docs/jade_chinese.htm)`

```jade
extends /_page
block body
v-box
flex-box
.content(style="overflow: auto")
c-table(bind="simple01s" dataType="Simple01")
column(property="name")
append scripts
script(src="simple01Model.js")
script(src="simple01.js")
```

dataType的值应该与Js中定义的dataType的值以及Model.js中定义的dataType的值相等

#### Js

`不做描述`

```javascript
cola(function(model) {
model.dataType($DataType.Simple01);
model.describe("simple01s", {
dataType : "Simple01",
provider : {
url : "controller/simple01Service/findPagination?from={{$from}}&limit={{$limit}}",
pageSize : 10,
sendJson : true,
loadMode: 'manual'
}
});
model.set("title", "[(#{simple01})]");
model.action({
test : function() {
cola.alert('test')
}
});
});
```

所有正规的操作包括事件都应该编写在`cola(function(model) { })`中，其中首先需要使用dataType定义当前Js中所有用到的DataType，使用`model.describe`交互后台数据到当前指定model，使用`model.set("", "")`向model交互数据，页面所有用到的事件方法应该存在于`model.action({})`中。

#### Model.js

`由cola-ui定义的前端模型`

```javascript
var $DataType = {
Simple01: {
name: "Simple01",
properties : {
name : {
caption : "[(#{name})]",
dataType : "string"
}
}
}
};
```

`caption`用来标志当前字段的前端显示文本，使用`[(#{ })]`取到当前字段对应的当前语言的国际化翻译。

### 表单相关

#### 表单对国际化的处理

> 在正常情况下，dataType可能会被公用，然后每个字段在每个不同的地方显示的文本标识不一样，这时候可以使用`caption`属性进行操作，例如：`caption=ll.l("name")`**前面提到在Js中国际化使用的是`[(#{ })]`**

#### 表单对日期格式的处理

> 通常需要将当前日期字段进行格式化只需要下面代码即可：

```jade
field(property="birthday")
label
c-datepicker(displayFormat="yyyy-MM-dd" inputFormat="yyyy-MM-dd")
```

将datatype类型为Date的birthday字段的文本显示和选择的日期格式调整为"yyyy-MM-dd"

#### 表单对枚举值的处理

> 我们经常会把一些常规的数据做成枚举值存放在数据库，并把页面的文本输入框改变成为下拉项

页面元素

```jade
field(property="status")
label
c-dropdown(c-items="dictionary('10000')")
```

引入Js

```jade
script(src=basecodeCP + "controller/basecode/codeDetail/findCodeDetails?baseCodeIds=10000")
```

或者

```jade
script(src="controller/basecode/codeDetail/findCodeDetails?baseCodeIds=10000")
```

这样页面会去加载枚举值代码为10000的对应status存放的id对应的文本显示到当前字段，并为当前字段提供下拉项

#### 表单对文本域的处理

> 类似于备注，通常都是用文本框来显示

```jade
fields.cols-1
field(property="remark")
label
c-textarea(rows="3")
```

首先定义当前字段独占一列，使用`c-textarea(rows="3")`表名当前字段独占三列

#### 表单对只读的处理

> 正常场景并不是表单中列出的所有的字段都是手动输入的，比如ID，我们可以使用`readOnly="true"`对每个field进行只读控制，也可以将`readOnly="true"`放在c-form属性里面来控制整个表单只读

#### 表单对省市县级联的处理

Jade

```jade
field(property="country"
label
c-dropdown(c-items="dictionary('CountryCode')" onSelectData="onCountrySelect")
(property="province" caption=ll.l("province") c-readOnly="queryCondition.country != 'CHN'")
label
c-dropdown(c-items="provinces" textProperty="name" assignment="province=kind" onSelectData="onProvinceSel")
field(property="city" caption=ll.l("city") c-readOnly="queryCondition.country != 'CHN'")
label
c-dropdown(c-items="cities" textProperty="name" assignment="city=kind" beforeOpen="beforeCityOpen" onSelectData="onCitySel")
field(property="county" caption=ll.l("county") c-readOnly="queryCondition.country != 'CHN'")
label
c-dropdown(c-items="counties" textProperty="name" assignment="county=kind" beforeOpen="beforeCountyOpen")
```

引入数据字典

```jade
script(src="controller/basecode/codeDetail/findCodeDetails?baseCodeIds=CountryCode")
```

Js

```javascript
cola(function(model) {
model.describe("provinces", {
provider: {
url: "controller/basecode/codeDetail/findCachedCodeDetails",
parameter: {
baseCodeId: "Address",
parentId: "NULL"
}
}
});
model.set("title", "[(#{simple01})]");
model.set("queryCondition", {"country":"CHN"});
model.action({
beforeCityOpen: function () {
var province = model.get("queryCondition.province");
$.ajax("controller/basecode/codeDetail/findCachedCodeDetails?baseCodeId=Address&parentId=" + province, {
type: "get", async: false
}).done(function (result) {
if (result) {
model.set("cities", result);
}
});
},
beforeCountyOpen: function () {
var city = model.get("queryCondition.city");
$.ajax("controller/basecode/codeDetail/findCachedCodeDetails?baseCodeId=Address&parentId=" + city, {
type: "get", async: false
}).done(function (result) {
if (result) {
model.set("counties", result);
}
});
},
onProvinceSel: function (self, arg) {
var queryCondition = model.get("queryCondition");
if(queryCondition.get("province") != arg.data.get("kind")){
queryCondition.set("city", "");
queryCondition.set("county", "");
}
},
onCitySel: function (self, arg) {
var queryCondition = model.get("queryCondition");
if(queryCondition.get("city") != arg.data.get("kind")){
queryCondition.set("county", "");
}
},
onCountrySelect: function (self, arg) {
var selectedItem = arg.data;
if("CHN" != selectedItem.key) {
model.get("queryCondition").set("province", "");
model.get("queryCondition").set("city", "");
model.get("queryCondition").set("county", "");
}
}
});
});
```

### 表格相关

#### 表格对枚举值的处理

> 通常我们都是在表单录入数据，在表格中进行简约展示，所以在表单中录入的下拉枚举值我们需要在表格中使用的时候必须使用获取到的枚举值进行翻译

```jade
column(property="status")
template
div(c-bind="translate('10000',$default)")
```

#### 表格对行内编辑的处理

> 在对于处理一些简单数据的时候我们可以不需要弹出一个复杂的编辑框对当前行的数据进行编辑处理，可以直接在表格进行行内编辑

```jade
c-table(bind="simple01s" dataType="Simple01" readOnly="false")
```

##### 表格行编辑对下拉项的处理

> 在表单编辑我们可以去选择一个下拉项做为数据值，当然在表格行编辑也可以

```jade
column(property="status")
template(name="edit")
c-dropdown(bind="$default" c-items="dictionary('10000')")
```

最后代码整理为

```jade
column(property="status")
template(name="edit")
c-dropdown(bind="$default" c-items="dictionary('10000')")
template
div(c-bind="translate('10000',$default)")
```

#### 表格添加操作列的处理

> 通常我们需要在表格的最后一列添加一行操作列来处理当前行的数据

```jade
c-table(bind="simple in simple01s" dataType="Simple01")
column(caption=ll.l("operation"))
template
div
a.cell-link(c-onclick="view(simple)")=ll.l("view")
```

#### 表格联动的处理

> 很多场景下，我们的数据和数据都是有关联关系，比如一本书对应书籍的出版社的详细信息，这时候针对不同的书本信息联动到出版社的详细信息

因为此处是两个表的关联，所以需要定义两个dataType

cModel.js

```javascript
var $DataType = {
A: {
name: "A",
properties : {
name : {
caption : "[(#{name})]",
dataType : "string",
}
}
},
B : {
name : "B",
properties : {
name : {
caption : "[(#{name})]",
dataType : "string"
}
}
}
};
```

c.jade

```jade
c-table(bind="as" dataType="a")
column(property="name")
c-table(bind="as#.bs" dataType="b")
column(property="name")
```

c.js

```js
cola(function(model) {
model.dataType($DataType.B);
$DataType.A.properties.bs = {
dataType: "B",
aggregated: true,
provider: {
url: "controller/B/find",
sendJson: true,
parameter: {
"name": "{{@name}}"
}
}
}
model.dataType($DataType.A);
model.describe("as", {
dataType : "A",
provider : {
url : "controller/C/findPagination?from={{$from}}&limit={{$limit}}",
pageSize : 10,
sendJson : true,
loadMode: 'manual'
}
});
model.set("title", "[(#{C})]");
model.action({
});
});
```

在关联中可以使用`parameter:{"name":"{{@name}}"}`方式拿到父表中当前选中行的name的值

#### 表格数据加载的处理

> 在某些场景下我们可以让表格数据直接加载到页面，也可以使用事件来触发加载数据

```javascript
loadMode: 'manual'
```

可以通过loadMode来控制表单是否在页面加载的时候加载数据到页面：manual手工加载，注释掉loadMode缺省自动加载数据

### 面板Panel 相关

#### 在panel头位置添加按钮

```jade
c-panel#panelDemo(caption=ll.l("panel"))
template(name="tools")
div
c-button.primary(caption=ll.l("add") click="add")
```

### 其它

#### 预加载处理

> 通常我们会在页面加载完成的时候自动触发一部分方法或者set一部分数据值到指定属性

```javas
cola.ready(function() {
cola.widget("panelDemo").collapse(); // 在加载完页面之后 折叠id为panelDemo的面板
});
```

代码应该放在`cola(function (model) { })`