cola-ui的使用

时间  2020-05-06
标签 cola 使用 繁體版
原文   原文链接

[toc]javascript

官网：http://www.cola-ui.comhtml

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

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

组件地址：http://www.cola-ui.com/docs/buttonnode

源码地址：https://github.com/Cola-Org/cola-uigit

产品简介

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

开始

以上内容都是经过cola-ui官网得到的资料，绝大多数的开发内容能够参考cola-ui官网提供的API进行查阅github

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

组成结构

一般要基于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)api

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

不作描述

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定义的前端模型

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

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

表单相关

表单对国际化的处理

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

表单对日期格式的处理

一般须要将当前日期字段进行格式化只须要下面代码便可：

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

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

表单对枚举值的处理

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

页面元素

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属性里面来控制整个表单只读

表单对省市县级联的处理

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

引入数据字典

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

表格相关

表格对枚举值的处理

一般咱们都是在表单录入数据，在表格中进行简约展现，因此在表单中录入的下拉枚举值咱们须要在表格中使用的时候必须使用获取到的枚举值进行翻译

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

表格对行内编辑的处理

在对于处理一些简单数据的时候咱们能够不须要弹出一个复杂的编辑框对当前行的数据进行编辑处理，能够直接在表格进行行内编辑

c-table(bind="simple01s" dataType="Simple01" readOnly="false")
表格行编辑对下拉项的处理

在表单编辑咱们能够去选择一个下拉项作为数据值，固然在表格行编辑也能够

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

表格添加操做列的处理

一般咱们须要在表格的最后一列添加一行操做列来处理当前行的数据

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

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

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

表格数据加载的处理

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

loadMode: 'manual'

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

面板Panel 相关

在panel头位置添加按钮

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

其它

预加载处理

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

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

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

原文出处：https://www.cnblogs.com/alterem/p/11205522.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程