目錄

• 產(chǎn)品簡(jiǎn)介
• 開(kāi)始
  • 組成結(jié)構(gòu)
  • 表單相關(guān)
  • 表格相關(guān)
  • 面板Panel 相關(guān)
  • 其它

官網(wǎng)：http://www.cola-ui.com

教程位置：http://www.cola-ui.com/guide/model

API: http://www.cola-ui.com/api/cola.html , http://legacy.cola-ui.com

組件地址：http://www.cola-ui.com/docs/button

源碼地址：https://github.com/Cola-Org/cola-ui

產(chǎn)品簡(jiǎn)介

• Cola UI是支持雙向數(shù)據(jù)綁定的一站式前端UI框架。采用了精簡(jiǎn)的MVVM架構(gòu)，在確保靈活性的同時(shí)盡可能降低對(duì)開(kāi)發(fā)者的技術(shù)要求。
• Cola UI遵循Mobile First的策略，特別適合于移動(dòng)設(shè)備應(yīng)用開(kāi)發(fā)。
• Cola UI整合了jQuery和Semantic UI，同時(shí)提供更多常用的List、Table、Tree等高級(jí)控件。

開(kāi)始

以上內(nèi)容都是通過(guò)cola-ui官網(wǎng)獲得的資料，絕大多數(shù)的開(kāi)發(fā)內(nèi)容可以參考cola-ui官網(wǎng)提供的API進(jìn)行查閱

本文檔主要針對(duì)于camsi工程中用到的功能或特性，且可能不存在于cola-ui官網(wǎng)提供的API進(jìn)行整理和說(shuō)明

組成結(jié)構(gòu)

通常要基于camsi工程在瀏覽器渲染出來(lái)的頁(yè)面由三個(gè)部分組成，例如：simple01.jade、M.js、simple01Model.js

Jade

Jade 是一個(gè)高性能的模板引擎，它深受 Haml影響，它是用 JavaScript 實(shí)現(xiàn)的，并且可以供 [Node](http://nodejs.org/) 使用，你也可以[在此試用](http://naltatis.github.io/jade-syntax-docs/)，這里推薦[Jade入門(mén)中文文檔](http://www.nooong.com/docs/jade_chinese.htm)

extends /_page block bodyv-boxflex-box.content(style="overflow: auto")c-table(bind="simple01s" dataType="Simple01")column(property="name") append scriptsscript(src="simple01Model.js")script(src="simple01.js")

dataType的值應(yīng)該與Js中定義的dataType的值以及Model.js中定義的dataType的值相等

Js

不做描述

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')}}); });

所有正規(guī)的操作包括事件都應(yīng)該編寫(xiě)在cola(function(model) { })中，其中首先需要使用dataType定義當(dāng)前Js中所有用到的DataType，使用model.describe交互后臺(tái)數(shù)據(jù)到當(dāng)前指定model，使用model.set("", "")向model交互數(shù)據(jù)，頁(yè)面所有用到的事件方法應(yīng)該存在于model.action({})中。

Model.js

由cola-ui定義的前端模型

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

caption用來(lái)標(biāo)志當(dāng)前字段的前端顯示文本，使用[(#{ })]取到當(dāng)前字段對(duì)應(yīng)的當(dāng)前語(yǔ)言的國(guó)際化翻譯。

表單相關(guān)

表單對(duì)國(guó)際化的處理

在正常情況下，dataType可能會(huì)被公用，然后每個(gè)字段在每個(gè)不同的地方顯示的文本標(biāo)識(shí)不一樣，這時(shí)候可以使用caption屬性進(jìn)行操作，例如：caption=ll.l("name")前面提到在Js中國(guó)際化使用的是[(#{ })]

表單對(duì)日期格式的處理

通常需要將當(dāng)前日期字段進(jìn)行格式化只需要下面代碼即可：

field(property="birthday")labelc-datepicker(displayFormat="yyyy-MM-dd" inputFormat="yyyy-MM-dd")

將datatype類型為Date的birthday字段的文本顯示和選擇的日期格式調(diào)整為"yyyy-MM-dd"

表單對(duì)枚舉值的處理

我們經(jīng)常會(huì)把一些常規(guī)的數(shù)據(jù)做成枚舉值存放在數(shù)據(jù)庫(kù)，并把頁(yè)面的文本輸入框改變成為下拉項(xiàng)

頁(yè)面元素

field(property="status")labelc-dropdown(c-items="dictionary('10000')")

引入Js

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

或者

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

這樣頁(yè)面會(huì)去加載枚舉值代碼為10000的對(duì)應(yīng)status存放的id對(duì)應(yīng)的文本顯示到當(dāng)前字段，并為當(dāng)前字段提供下拉項(xiàng)

表單對(duì)文本域的處理

類似于備注，通常都是用文本框來(lái)顯示

fields.cols-1field(property="remark")labelc-textarea(rows="3")

首先定義當(dāng)前字段獨(dú)占一列，使用c-textarea(rows="3")表名當(dāng)前字段獨(dú)占三列

表單對(duì)只讀的處理

正常場(chǎng)景并不是表單中列出的所有的字段都是手動(dòng)輸入的，比如ID，我們可以使用readOnly="true"對(duì)每個(gè)field進(jìn)行只讀控制，也可以將readOnly="true"放在c-form屬性里面來(lái)控制整個(gè)表單只讀

表單對(duì)省市縣級(jí)聯(lián)的處理

Jade

field(property="country"labelc-dropdown(c-items="dictionary('CountryCode')" onSelectData="onCountrySelect") (property="province" caption=ll.l("province") c-readOnly="queryCondition.country != 'CHN'")labelc-dropdown(c-items="provinces" textProperty="name" assignment="province=kind" onSelectData="onProvinceSel") field(property="city" caption=ll.l("city") c-readOnly="queryCondition.country != 'CHN'")labelc-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'")labelc-dropdown(c-items="counties" textProperty="name" assignment="county=kind" beforeOpen="beforeCountyOpen")

引入數(shù)據(jù)字典

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

Js

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", "");}}}); });

表格相關(guān)

表格對(duì)枚舉值的處理

通常我們都是在表單錄入數(shù)據(jù)，在表格中進(jìn)行簡(jiǎn)約展示，所以在表單中錄入的下拉枚舉值我們需要在表格中使用的時(shí)候必須使用獲取到的枚舉值進(jìn)行翻譯

column(property="status")templatediv(c-bind="translate('10000',$default)")

表格對(duì)行內(nèi)編輯的處理

在對(duì)于處理一些簡(jiǎn)單數(shù)據(jù)的時(shí)候我們可以不需要彈出一個(gè)復(fù)雜的編輯框?qū)Ξ?dāng)前行的數(shù)據(jù)進(jìn)行編輯處理，可以直接在表格進(jìn)行行內(nèi)編輯

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

表格行編輯對(duì)下拉項(xiàng)的處理

在表單編輯我們可以去選擇一個(gè)下拉項(xiàng)做為數(shù)據(jù)值，當(dāng)然在表格行編輯也可以

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

最后代碼整理為

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

表格添加操作列的處理

通常我們需要在表格的最后一列添加一行操作列來(lái)處理當(dāng)前行的數(shù)據(jù)

c-table(bind="simple in simple01s" dataType="Simple01")column(caption=ll.l("operation"))templatediva.cell-link(c-onclick="view(simple)")=ll.l("view")

表格聯(lián)動(dòng)的處理

很多場(chǎng)景下，我們的數(shù)據(jù)和數(shù)據(jù)都是有關(guān)聯(lián)關(guān)系，比如一本書(shū)對(duì)應(yīng)書(shū)籍的出版社的詳細(xì)信息，這時(shí)候針對(duì)不同的書(shū)本信息聯(lián)動(dòng)到出版社的詳細(xì)信息

因?yàn)榇颂幨莾蓚€(gè)表的關(guān)聯(lián)，所以需要定義兩個(gè)dataType

cModel.js

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

c.jade

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

c.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({}); });

在關(guān)聯(lián)中可以使用parameter:{"name":"{{@name}}"}方式拿到父表中當(dāng)前選中行的name的值

表格數(shù)據(jù)加載的處理

在某些場(chǎng)景下我們可以讓表格數(shù)據(jù)直接加載到頁(yè)面，也可以使用事件來(lái)觸發(fā)加載數(shù)據(jù)

loadMode: 'manual'

可以通過(guò)loadMode來(lái)控制表單是否在頁(yè)面加載的時(shí)候加載數(shù)據(jù)到頁(yè)面：manual手工加載，注釋掉loadMode缺省自動(dòng)加載數(shù)據(jù)

面板Panel 相關(guān)

在panel頭位置添加按鈕

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

其它

預(yù)加載處理

通常我們會(huì)在頁(yè)面加載完成的時(shí)候自動(dòng)觸發(fā)一部分方法或者set一部分?jǐn)?shù)據(jù)值到指定屬性

cola.ready(function() {cola.widget("panelDemo").collapse(); // 在加載完頁(yè)面之后 折疊id為panelDemo的面板 });

代碼應(yīng)該放在cola(function (model) { })

轉(zhuǎn)載于:https://www.cnblogs.com/alterem/p/11205522.html

總結(jié)

以上是生活随笔為你收集整理的cola-ui的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。