cola-ui的使用

hellowoody 發(fā)布于2019-08-16 18:37 / 1977人閱讀

摘要：采用了精簡的架構(gòu)，在確保靈活性的同時盡可能降低對開發(fā)者的技術(shù)要求。遵循的策略，特別適合于移動設備應用開發(fā)。由定義的前端模型用來標志當前字段的前端顯示文本，使用取到當前字段對應的當前語言的國際化翻譯。

[toc]

官方：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)品簡介

Cola UI是支持雙向數(shù)據(jù)綁定的一站式前端UI框架。采用了精簡的MVVM架構(gòu)，在確保靈活性的同時盡可能降低對開發(fā)者的技術(shù)要求。

Cola UI遵循Mobile First的策略，特別適合于移動設備應用開發(fā)。

Cola UI整合了jQuery和Semantic UI，同時提供更多常用的List、Table、Tree等高級控件。

開始

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

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

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

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

Jade

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

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的值相等

不做描述

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ī)的操作包括事件都應該編寫在cola(function(model) { })中，其中首先需要使用dataType定義當前Js中所有用到的DataType，使用model.describe交互后臺數(shù)據(jù)到當前指定model，使用model.set("", "")向model交互數(shù)據(jù)，頁面所有用到的事件方法應該存在于model.action({})中。

Model.js

由cola-ui定義的前端模型

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

caption用來標志當前字段的前端顯示文本，使用[(#{ })]取到當前字段對應的當前語言的國際化翻譯。

表單相關(guān) 表單對國際化的處理

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

表單對日期格式的處理

通常需要將當前日期字段進行格式化只需要下面代碼即可：

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

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

表單對枚舉值的處理

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

頁面元素

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")

這樣頁面會去加載枚舉值代碼為10000的對應status存放的id對應的文本顯示到當前字段，并為當前字段提供下拉項

表單對文本域的處理

類似于備注，通常都是用文本框來顯示

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

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

表單對只讀的處理

正常場景并不是表單中列出的所有的字段都是手動輸入的，比如ID，我們可以使用readOnly="true"對每個field進行只讀控制，也可以將readOnly="true"放在c-form屬性里面來控制整個表單只讀

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

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")

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) 表格對枚舉值的處理

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

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

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

在對于處理一些簡單數(shù)據(jù)的時候我們可以不需要彈出一個復雜的編輯框?qū)Ξ斍靶械臄?shù)據(jù)進行編輯處理，可以直接在表格進行行內(nèi)編輯

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

表格行編輯對下拉項的處理

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

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)")

表格添加操作列的處理

通常我們需要在表格的最后一列添加一行操作列來處理當前行的數(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")

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

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

因為此處是兩個表的關(guān)聯(lián)，所以需要定義兩個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}}"}方式拿到父表中當前選中行的name的值

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

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

loadMode: "manual"

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

面板Panel 相關(guān) 在panel頭位置添加按鈕

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

其它 預加載處理

通常我們會在頁面加載完成的時候自動觸發(fā)一部分方法或者set一部分數(shù)據(jù)值到指定屬性

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

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

云服務器 GPU云服務器數(shù)組的使用字典的使用控件的使用游標的使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/75447.html

發(fā)表評論

登陸后可評論

0條評論

hellowoody

男|高級講師

我要關(guān)注我要私信

TA的文章

Hostinger：美國虛擬主機，首月9.9元起，美國vps，首月27元起

閱讀 3451·2021-11-08 13:20
TikTok 月活躍用戶達到 10 億

閱讀 3375·2021-09-30 09:48
SiteGround虛擬主機支持Brotli壓縮技術(shù) 網(wǎng)站速度提高15-20％

閱讀 2579·2021-09-29 09:41
個人云主機有什么用-如果你有一臺云主機，你會用來做什么呢？

閱讀 600·2021-09-22 15:04
Vultr機房測評 - Vultr英國倫敦London機房綜合速度和線路去程回程測試

閱讀 2499·2021-08-23 09:44
UCloud推出U位智能資產(chǎn)管理服務，助力托管用戶進一步降本增效

閱讀 3689·2020-12-03 17:26
跨站腳本攻擊XSS

閱讀 1021·2019-08-30 14:10
應用現(xiàn)代CSS創(chuàng)建React App項目

閱讀 1575·2019-08-29 18:34

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

cola-ui的使用

表格行編輯對下拉項的處理

相關(guān)文章

Spring 指南（目錄）

不得不提的前端性能優(yōu)化

MongoDB指南---12、使用explain()和hint()、何時不應該使用索引

MongoDB指南---12、使用explain()和hint()、何時不應該使用索引

發(fā)表評論

0條評論

hellowoody

男|高級講師

TA的文章

Hostinger：美國虛擬主機，首月9.9元起，美國vps，首月27元起

TikTok 月活躍用戶達到 10 億

SiteGround虛擬主機支持Brotli壓縮技術(shù) 網(wǎng)站速度提高15-20％

個人云主機有什么用-如果你有一臺云主機，你會用來做什么呢？

Vultr機房測評 - Vultr英國倫敦London機房綜合速度和線路去程回程測試

UCloud推出U位智能資產(chǎn)管理服務，助力托管用戶進一步降本增效

跨站腳本攻擊XSS

應用現(xiàn)代CSS創(chuàng)建React App項目

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

cola-ui的使用

表格行編輯對下拉項的處理

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！