webix前端架构的项目应用

webix框架兼容javascript、HTML、CSS，应用比较灵活，应用框架时，配合后台webAPI，整个web项目里面，App文件夹保存前台的多语言文件，图片文件，webix原代码js、css，视图文件等，视图文件里面全是使用js文件编写页面布局与功能实现，文件开头使用define(["locale", "/app/views/shared/components.js"], function (_, com) {。。。页面代码段}来实现父页面对子页面的调用，包括调用UI和方法（UI和方法都要从子页面返回，即return 回来，列如：return {
$ui: show，返回UI布局

Additem：Additem 返回方法
};父页面才能实现调用）。

后台添加验证 [AllowAnonymous, HttpGet, HttpPost, Route("listProject")]，需写清楚方法名称，才能正确的找到前台调用的控制器

下面介绍几个比较灵活的属性应用：

1：template属性是一个基础属性，可以应用与任何一个控件里面用于设置控件的模板和基础的内容，支持字符串形式的html，也支持写成函数，返回处理后的字符串，修改显示内容的效果

例如：function (obj, type, value) {
return "<span class='webix_icon_btn enter_btn' style='cursor: pointer;' title='" + _("spmsreport") + "' ><img src='/app/libs/icon/check.png' align='absmiddle' /></span>";
} //用来格式化显示内容

2：设置datatable的首行搜索；

{id: "officeName", header: [_("Office"), {
                    content: "serverSelectFilterByParameter",      搜索的类型，可修改成其他的方式
                    options: "/api/spms/GetOffices",                   后台处理Url
                    para: function () {                                       后台请求时需要带的参数
                        var regionName = $$("maindata").getFilter("regionName").value;
                        return { regionId: regionName };
                    }
                }],}

3：获取当前语言

webix.storage.local.get("spms--:app:lang");

4：数字千位用“，”隔开：re = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;

var newNum = num.replace(re, "$1,");

5：按钮右对齐： { gravity: 1 }写成与按钮同级

6：head属性和template属性一样，可以布局也可以拼接字符串

秒客网

webix前端架构的项目应用

相关文章