您好,登錄后才能下訂單哦!
這篇文章主要介紹了java中cola-ui怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
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í)控件。
以上內(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ō)明
通常要基于camsi工程在瀏覽器渲染出來(lái)的頁(yè)面由三個(gè)部分組成,例如:simple01.jade、M.js、simple01Model.js
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 body v-box flex-box .content() c-table(bind="simple01s" dataType="Simple01") column(property="name") append scripts script(src="simple01Model.js") script(src="simple01.js")
dataType的值應(yīng)該與Js中定義的dataType的值以及Model.js中定義的dataType的值相等
不做描述
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({})
中。
由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ó)際化翻譯。
在正常情況下,dataType可能會(huì)被公用,然后每個(gè)字段在每個(gè)不同的地方顯示的文本標(biāo)識(shí)不一樣,這時(shí)候可以使用
caption
屬性進(jìn)行操作,例如:caption=ll.l("name")
前面提到在Js中國(guó)際化使用的是[(#{ })]
通常需要將當(dāng)前日期字段進(jìn)行格式化只需要下面代碼即可:
field(property="birthday") label c-datepicker(displayFormat="yyyy-MM-dd" inputFormat="yyyy-MM-dd")
將datatype類(lèi)型為Date的birthday字段的文本顯示和選擇的日期格式調(diào)整為"yyyy-MM-dd"
我們經(jīng)常會(huì)把一些常規(guī)的數(shù)據(jù)做成枚舉值存放在數(shù)據(jù)庫(kù),并把頁(yè)面的文本輸入框改變成為下拉項(xiàng)
頁(yè)面元素
field(property="status") label c-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)
類(lèi)似于備注,通常都是用文本框來(lái)顯示
fields.cols-1 field(property="remark") label c-textarea(rows="3")
首先定義當(dāng)前字段獨(dú)占一列,使用c-textarea(rows="3")
表名當(dāng)前字段獨(dú)占三列
正常場(chǎng)景并不是表單中列出的所有的字段都是手動(dòng)輸入的,比如ID,我們可以使用
readOnly="true"
對(duì)每個(gè)field進(jìn)行只讀控制,也可以將readOnly="true"
放在c-form屬性里面來(lái)控制整個(gè)表單只讀
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")
引入數(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", ""); } } }); });
通常我們都是在表單錄入數(shù)據(jù),在表格中進(jìn)行簡(jiǎn)約展示,所以在表單中錄入的下拉枚舉值我們需要在表格中使用的時(shí)候必須使用獲取到的枚舉值進(jìn)行翻譯
column(property="status") template div(c-bind="translate('10000',$default)")
在對(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")
在表單編輯我們可以去選擇一個(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')") template div(c-bind="translate('10000',$default)")
通常我們需要在表格的最后一列添加一行操作列來(lái)處理當(dāng)前行的數(shù)據(jù)
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")
很多場(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的值
在某些場(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ù)
c-panel#panelDemo(caption=ll.l("panel")) template(name="tools") div c-button.primary(caption=ll.l("add") click="add")
通常我們會(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) { })
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“java中cola-ui怎么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。