microbee-http 丨 软件开发框架

概述


microbee-http是一款开源分布式http服务器中间件,主要功能如下:

1)作为类似于nginx,apache的HTTP服务器,承担Web服务数据的转发、请求、后端语言的解析任务等;

2)是基于HTTP中间件的低代码开发平台,平台在开发过程中不断优化升级,可轻松自如应对各种需求变更,进一步节省开发时间;

3)与microbee-data数据库中间件集成使用,兼容国内外大部分数据源(如PostgreSQL、Oracle 、MySQL、ClickHouse、BigTable、Redis、Hbase等),完成高负载应用的搭建,解决不同数据库和异构系统之间的阻抗;

4)是将大数据,AI模型泛数据库化。


microbee-http能做什么?


1)Web 开发,支持路由,Session管理,模板等,不需要容器

2)提供对WebSocket的支持

3)TCP/UDP开发,提供了丰富的IO类库,支持多种网络应用开发。

4)支持主流的数据和消息访问

5)microbee-http不仅仅是一个Web开发框架,它更像一个技术栈或者说microbee-http是一个生态体系,下面对microbee-http和Spring做一个对比:

项目 Spring microbee-http
核心框架 spring-core microbee-http
Web开发 spring-webmvc microbee-http-front
jdbc框架 spring-jdbc microbee-data
微服务 Spring-cloud microbee-http-server

microbee-http的优势


1)支持多种语言混合编程,提升项目的可集成性和降低项目对语言和技术的依赖。

2)不依赖中间件,开发,部署,运维变得简单。

3)抛弃复杂的实体,数据模型,Maper隐射提升开发效率和维护效率。

4)java程序在线编译,开发者对于简单的程序更新可在线编辑,修改即应用,无需停止项目运行,无需重复打包部署,对于反复修改软件产品研发既降低了开发成本,又提高了更新的时效性。

5)分布式特效和高效的HTTP服务架构使得其根据高负载能力。


技术体系


1)核心模块

microbee-http核心模块主要涵盖前端部分microbee-http-front,服务器部分microbee-http-server和一些基础的功能,如HTTP、TCP、文件系统访问、WebSocket、延时与重复执行、缓存等其他基础的功能。microbee-http-front为javascript实现,其提供完整的api,完成后台数据调取,文件传输,数据上传等,是前端接口调取框架工具集;microbee-http-server使用java与c++语言编写,提供标准的web3.0服务和分布式数据操作平台,(二开接口正在研发中…)。

2)数据访问模块

microbee-http 提供了对关系型数据库、NoSQL、消息中间件的支持,传统的客户端因为是阻塞的,会严重影响系统的性能,因此microbee-http提供了对以上客户端的异步支持。

3)响应式编程

4)整合其他模块

5)认证与授权


后端使用说明


microbee-http的使用分为前端部分microbee-http-front和服务器部分microbee-http-server。microbee-http-front为javascript实现,是前端接口调取框架工具集,使用其提供的api完成后台数据调取,文件传输,数据上传等;microbee-http-server使用java与c++语言编写,提供标准的web3.0服务,和分布式数据操作平台,其二开接口正在研发中。

2.1服务器配置说明

2.1.1 模型与数据库表映射关系

视图层数据模型与存储层数据库表的映射关系存储在服务器端mtmapping.xml文件中

<md name="md1">sys_user</md>

md1为前端试图层模型名称,sys_user为存储层数据库表名称

2.1.2.服务器基础配置

基础配置信息存储在server_conf.xml文件中,其详细配置如下

<?xml version="1.0" encoding="UTF-8"?> <conf> <pm name="port">80</pm> <pm name="dburl">jdbc:mysql://xxxxx:3306/smcms?characterEncoding=utf-8</pm> <pm name="dbdriver">com.mysql.jdbc.Driver</pm> <pm name="dbuser">root</pm> <pm name="dbpassword">xxxxxx</pm> <!--上传或提交内容的大小,单位K--> <pm name="csize">3024</pm> <!--数据库链接池配置--> <pm name="initialSize">10</pm> <pm name="maxActive">20</pm> <!--web配置--> <pm name="javadir">C:\develop-ym\dynamic</pm> <pm name="webRoot">C:\develop-ym\webroot</pm> <pm name="gnrtstatichtml">C:\develop-ym\webroot</pm> <pm name="uploaddir">C:\develop-ym\webroot</pm> <!--安全配置--> <pm name="keyPath">111</pm> <pm name="certPath">111</pm> <redirectss> <redirect> <path>/uploads</path> <rdct>http://www.baidu.com</rdct> </redirect> <redirect> <path>/test111</path> <rdct>189.12.12.3:90</rdct> </redirect> </redirectss> </conf>

pm为服务器常用参数,redirectss为301重定向配置,也可以作为代理服务器配置,用以完成重定向、多路转发、统一授权等。

2.1.2.1重定向配置

1.目录转发

将URL段(以跟目录始)转发到其他域的相同目录,参数不变

<redirect> <path>/uploads</path> <rdct>http://www.baidu.com</rdct> </redirect>

意为将当前域的http://127.0.0.1/uploads/xx/xx重定向为http://www.baidu.com/uploads/xx/xx

2.3服务端部署

2.4高阶API开发

2.4.1HoContext说明

Hocontext是microbee-http高阶api的上下文对象,包含了http上下文操作的重要分装对象,包括HttpRequestWrapper(目前仅支持http1.0),Session操作,Actions数据源操作等。

2.4.2 JAVA高阶API开发方法

  • 新建任意maven项目(不选择任何依赖)
  • 以microbee-httpdev为父项目,引入microbee-httpdev核心开发包,该包存放在私有仓库中
    父项目配置 <parent> <groupId>microbee-httpdev</groupId> <artifactId>microbee-httpdev</artifactId> <version>1.2-SNAPSHOT</version> </parent> 加入依赖 <dependency> <groupId>microbee-httpdev</groupId> <artifactId>microbee-httpdev</artifactId> <version>1.2-SNAPSHOT</version> </dependency>
  • 创建main方法,加入如下代码
    HttpCore httpCore = new HttpCore(); httpCore.start();
  • 在项目跟目录下新建dynamic包(文件夹)
  • 本地编写需要的模块,dynamic摸编写要求如下
    class类名称 遵循java命名规范,不可重复,否则编译环节会出错,类的报名必须为dynamic
    方法 返回值必须为String类型,有且只有一个参数HoContext,方法返回值即为返回给前端的数据
  • 在resources/config 目录下创建server_conf.xml文件,可从服务器下载,并修改配置,开发环境只需修改数据源相关配置即可。
  • 将编写完的模块(.java文件,非.class)文件复制到服务的dynamic目录中
    注意:以上内容也可以直接在服务器的dynamic目录下创建并编辑
  • Java开发实例
    实例1. package dynamic; import microbee.http.utills.dynamic.HoContext; import java.util.ArrayList; import java.util.List; public class Test { public String te(HoContext hoContext){ List<String> datas = new ArrayList<>(); datas.add("1000"); String res = hoContext.actions.connActionQuery("select * from vun_system_log where id>? ",datas,true); System.out.println(res); return res; } } 该模块的访问路径为:Test/te

2.4.3 数据库操作指引

dataActions对象封装了后端数据库操作的所有方法,方法传入参数有两种类型,其一为json字符串,该方式主要是为了前端直接操作数据库;其二为传入参数为java对象list,map,实体bean等,供后台开发人员开发模块时使用,condition和sequence的定义参考3.1.4和3.1.2

1.查询返回多条数据 List<ConditionPJ> conditionPJList = new ArrayList<>(); ConditionPJ conditionPJ = new ConditionPJ(); conditionPJ.setLgc(1); conditionPJ.setKy("rname"); conditionPJ.setOprt("mcb_vgeq"); conditionPJ.setVl("系统"); conditionPJList.add(conditionPJ); Sequence sequence = new Sequence(); sequence.setSort(1); sequence.setOrderby("id"); List<Map<String,Object>> lists = hoContext.dataActions.gatAll("sys_role",conditionPJList,1,sequence); 2.查询返回一条数据 List<ConditionPJ> conditions1 = new ArrayList<>(); ConditionPJ conditionPJ1 = new ConditionPJ(); conditionPJ1.setLgc(1); conditionPJ1.setKy("id"); conditionPJ1.setOprt("mcb_eq"); conditionPJ1.setVl("57"); conditions1.add(conditionPJ1); Map<String,Object> mp = hoContext.dataActions.gainOne("sys_role",conditions1); System.out.println("=======getOne========="+mp.get("rname")); 3.查询获取总记录数 List<ConditionPJ> conditions2 = new ArrayList<>(); ConditionPJ conditionPJ2 = new ConditionPJ(); conditionPJ2.setLgc(1); conditionPJ2.setKy("id"); conditionPJ2.setOprt("mcb_eq"); conditionPJ2.setVl("57"); conditions2.add(conditionPJ2); Map<String,Object> mp1 = hoContext.dataActions.gainCount("sys_role",conditions2); System.out.println(mp1); System.out.println("=======getcount========="+mp1.get("total")); 4.求和 List<ConditionPJ> conditions3 = new ArrayList<>(); ConditionPJ conditionPJ3 = new ConditionPJ(); conditionPJ3.setLgc(1); conditionPJ3.setKy("id"); conditionPJ3.setOprt("mcb_eq"); conditionPJ3.setVl("57"); conditions3.add(conditionPJ2); Map<String,Object> mp2 = hoContext.dataActions.gainSum("sys_role",conditions3,"id"); System.out.println(mp2); System.out.println("=======getsum========="+mp2.get("sum_id")); 5.根据id删除
  • Service名称需要按照数据库(table)表明命名,必须继承BaseModel
  • 控制器中引入@ModelResources 然后注入对应的service。

    在service中获取deleteById方法,根据id删除传入id的对应值。返回boolean类型的值,true表示删除成功,false表示删除失败。

6.根据id查询
  • Service名称需要按照数据库(table)表明命名,必须继承BaseModel
  • 控制器中引入@ModelResources 然后注入对应的service

    在service中获取gainOneById方法,根据id查询对应id的所有值。返回Map其中key表示字段名称,value表示对应值。

7.根据id更新
  • Service名称需要按照数据库(table)表明命名,必须继承BaseModel
  • 控制器中引入@ModelResources 然后注入对应的service

    在service中获取对应updateById方法;根据id修改传入map值 。返回一个string字符串判断更新是否成功。

8.删除对应传值数据
  • Service名称需要按照数据库(table)表明命名,必须继承BaseModel
  • 控制器中引入@ModelResources 然后注入对应的service

    在service中获取对应delete方法。传入需要修改List值,得到一个boolean类型的返回值,true表示成功,false表示失败。

9.批量插入数据
  • Service名称需要按照数据库(table)表明命名,必须继承BaseModel
  • 控制器中引入@ModelResources 然后注入对应的service

    在service中获取对应batchInsert方法。传入需要插入的List>值,得到一个int[]数组,其中1表示插入成功0表示插入失败。

2.4.4 特殊的输出

1.输出文件或图片

File file = new File("F:\\fzxm\\1.jpg");

hoContext.httpResponse.resFilePrint(file,0,file.length());

2.bufferedImage输出

BufferedImage image = createImage(); hoContext.httpResponse.printImage((BufferedImage)image);

3.字节输出

byte[] a= null; hoContext.httpResponse.printBytes(a);

4.长连接输出

前后台建立连接后保持连接,可双向收发消息,用来做后台长时间任务处理时向前端发送任务完成进度消息(前端实现进度条显示),即时通信等,使用方式如下

  • 创建模块和项目(参照2.4.2 JAVA高阶API开发方法)
  • 模块类形参设置为WsContext()
  • WsContext定义如下表所示
    datas 成员变量/map结构 前端传递的数据
    DataActions 成员变量 数据库操作对象
    resPrint(String res) 成员方法 用来输出数据到浏览器
    用例
    package dynamic;
    import microbee.http.apps.dynamic.WsContext;
    import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;
    public class Testws {
    public void test (WsContext wsContext){
    String name = (String)wsContext.datas.get("name");
    wsContext.resPrint("1");
    try {
    Thread.sleep(5000);
    } catch (InterruptedException e) {
    e.printStackTrace();
    }
    wsContext.resPrint("2");
    try {
    Thread.sleep(1000);
    } catch (InterruptedException e) {
    e.printStackTrace();
    }
    wsContext.resPrint("3");
    }
    }
  • API测试方法:浏览器访问/wc.html进行测试
  • 特别说明:该方法实现的接口不能通过http协议访问,只能通过wc协议访问,且定义url不能与http接口冲突。

2.4.5 Python高阶API开发方法

待续……..

2.4.6开启分布式模式


2.5定时任务

2.5.1注解调用

  • 开启定时任务步骤
  • 在dynamic新增模块(类)
  • 使用@Schedules注解该类
  • 在该类中创建任意方法(方法必须有形参DataActions dataActions
  • 使用Frequency(value=5)注解类中方法(value为执行频率,单位为秒)

2.5.2行内调用

  • 行内调用方式
ScheduledTasks.startScheduled(1, new ScheduleStart() { @Override public void run() { // 代码结构 } });

2.6持久层开发

2.6.1使用步骤

  • 在dynamic下创建model包
  • 新建接口,接口名称与对应的数据库表名一直,不区分大小写,如下
  • package dynamic.model; import microbee.http.annotation.Model; import microbee.http.annotation.Select; import microbee.http.apps.dbnet.BaseModel; import java.util.List; import java.util.Map; @Model public interface Sm_Archives extends BaseModel { @Select("select * from ${this} where id=${id}") public List<Map<String,Object>> test(Map<String,Object> data); }
  • 在模块/控制器,定时任务中使用@ModelResources注解注入
  • package dynamic; import dynamic.model.Sm_Archives; import microbee.http.annotation.Frequency; import microbee.http.annotation.ModelResources; import microbee.http.annotation.Schedules; import java.util.HashMap; import java.util.List; import java.util.Map; @Schedules public class testSc { @ModelResources public Sm_Archives sm_archives; @Frequency(value=3) public void test(){ System.out.println("定时任务开始执行1"); Map map = new HashMap<String,Object>(){{ put("id",123); }}; List<Map<String,Object>> m = sm_archives.test(map); System.out.println("=========="+m.get(0).get("title")); } }

2.6.2持久层编写语法规范和注意事项

接口示例:

@Model public interface Sm_Archives extends BaseModel { @Select("select * from ${this} where id=#{id} <if test='name==${name} and age==${age}'> and id in(1,2,3) </if> order by id desc") public List<Map<String,Object>> test(Map<String,Object> data); }

控制器示例:

public class testSc { @ModelResources public Sm_Archives sm_archives; public void test(Hocontext hocontext){ Map map = new HashMap<String,Object>(){{ put("id",123); }}; List<Map<String,Object>> m = sm_archives.test(map); System.out.println("=========="+m.get(0).get("title")); } }

接口规范:

  • 在接口文件中首先引入@Model标签;
  • 接口名称与对应的数据库表名保持一致。
  • 接口需要继承BaseModel类,该类中有基础sql便于对基础CRUD操作。

  • 自定义查询sql中引入@Select 注解;注解中填写自己编写的sql语句。
  • ${this}表示当前模型对应的数据库表,关联查询时除当前表必须用${this}表示外,其他表可直接写表全名。
  • 在判断时使用块来判定if中的语句是否执行。
  • 判断句if规则:if中必须带有test=' '(把需要判断的字段以及值传入 test=' ' 中;且test中判断语句只决定示例中红色内容是否执行,且多判断语句用 and/or连接 );多个if判断只需在语句中添加多个if块。

控制器规范:

  • 在控制器中调用指定接口文件时,首先引入@ModelResources标签然后在声明引入接口名称(public Sm_Archives sm_archives);
  • 控制器中的返回类型必须和接口中返回类型保持一致。
  • Map使用规则:map中key,value使用结构; map中的key值需要和sql中对应。

注意事项:

  • if判断中只能用 "${}"不能使用预处理 "#{}"。
  • 传值map 中”数值类型”不能用”字符串类型”。
  • if判断中不能使用 "===" 恒等符号。
  • if判断中不能带有 ":"," \' ","`" , "\"" , "#this", "#root" , "#", "[", "{", "not", "+", "-", "~", "@", "new" 等特殊符号或保留字段。

2.7使用缓存

模块方法中使用缓存:

使用@Cached注解标注模块方法,第一次调用时产生缓存直到缓存被删除,代码如下

public class Testc { @Cached public String test(HoContext hoContext){ return ""; } }

行内使用:

GlobalData.beeCache.setCache("test",1); //缓存 GlobalData.beeCache.getCache("test"); //获取

2.8网络通信

2.8.1HTTP请求

microbee.http.utills.http.Httpclient
sendGet:发送get请求
doPostJson:发送post请求,参数为json数据
sendPost:发送post请求,参数为键值对

2.8.2TCP链接

  • 新建TCP返回数据处理类并集成ClientHandler,如下所示

  • 获取客户端链接

    String host = "101.22.12.12";
    int port = 8888;
    SocketClient socketClient = SocketClient.getSocketClient(host,port,new TestHandler());

  • 向服务端发送数据

    socketClient.sendData("dddddd");

2.9初始化操作

在项目启动时执行的业务操作通过实现InitLoad接口来实现,具体使用分两步:

第一步编写java类实现InitLoad接口,如需要可注入模型层,方法见2.4.3@ModelResources

第二步.在server_conf.xml中加入配置(只配置类名称即可)

前端使用手册


McrbHttpClient是前端数据调取操作对象,成员对象有两部分,其一是conf数据对象,用来配置服务端即Microbee-Http-Server的IP/域名地址(默认IP地址为127.0.0.1),端口号(默认端口为80)等;其二是Function对象,用来操作Microbee-Http-Server获取数据,同步数据,与高阶API交互等。

前端使用说明:
1.需先引入配置文件https://mhc.ixiera.com/mhc/main_min.js;
2.新建config.js文件,添加如下代码,然后将config.js引入到HTML文件;
if(McrbHttpClient.commfn.checkdomain()){
  McrbHttpClient.conf.host = 'http://www.xxxxx.com'; // 域名设置
}else{
  McrbHttpClient.conf.host = 'http://127.0.0.1'; // 服务器ip设置
}
McrbHttpClient.conf.port = '8088'; // 端口号设置
McrbHttpClient.conf.wshost = "ws://127.0.0.1:8088/wwwsss"; // 长连接服务器ip设置

3.1基础API使用

3.1.1查看模型与数据库表对照关系

MICROBEE-HTTP MANAGEMENT开发人员运维和管理系统运行的工具,可查看模型或数据表设计,通过可视化界面操作系统的启停,设置配置,查看日志等

  • 登录MICROBEE-HTTP MANAGEMENT系统
  • 地 址:http://host:port/mdlst/?act=login 用户名:admin 密 码:项目中server_conf.xml的authorize值(可进行自定义配置授权码)
  • 登录成功后显示项目所属数据库内所有表信息(固化表及自定义模型表),点击查看按钮进行查看相应数据库表详细信息。

3.1.2 oprt运算符取值对照表

= mcb_eq 等于
>= mcb_geq 大于等于
<=< /td> mcb_leq 小于等于
like mcb_vgeq 模糊查询
<> mcb_neq 不等于

排序参数对照表

desc 1
asc 0

3.1.3 操作类型说明(actype)

actype=1 查询
actype=2 插入
actype=3 更新
actype=4 某字段求和
actype=5 查询一条记录
actype=6 查询总记录数
actype=10 高阶API处理

3.1.4 condition编写说明

lgc 逻辑单元,1表示逻辑与即and,0表示逻辑或即or,不能为空
ky 为字段名称
oprt 为运算符参照3.1.2表
vl 为ky字段取值
举例:and id>=1 =>
[{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}];

3.1.5 搜索/模糊查询(可分页)

方法名 searchlst
参数 func:回调方法
md:模型名称
sumby:求和字段名称
condition: 条件(参考condition与sql语言关键词参照表)
sequence:排序,默认为{}空,可选参数,其形式为{排序字段:排序方式},排序方式请参考3.1.2之排序参数对照表
用例
//查询列表(可分页)
var md = "md72";//模型名称
var page = 0 //页码
var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222},{lgc:1,ky:'rid',oprt:'mcb_geq',vl:55}];
var sequence = {id:0};
McrbHttpClient.searchlst(lst,md,page,condition,sequence);
function lst(e){
console.log(e)
}

3.1.6 求和

方法名 sum
参数 func:回调方法
md:模型名称
sumby:求和字段名称
condition: 条件(参考condition与sql语言关键词参照表)
用例
//求和
var md = "md73";//模型名称
var sumby = "id" //求和的字段
var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}];
McrbHttpClient.sum(funcsum,md,sumby,condition);
function funcsum(e){
console.log(e)
}

3.1.7查询总记录数

方法名 getcount
参数 func:回调方法
md:模型名称
condition: 条件(参考condition与sql语言关键词参照表)
用例
//查询总记录数
var md = "md73";//模型名称
var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}];
McrbHttpClient.getcount(funccount,md,condition);
function funccount(e){
console.log(e)
}

3.1.8查询一条记录

方法名 gainOne
参数 func:回调方法
md:模型名称
condition: 条件(参考condition与sql语言关键词参照表)
用例
//查询符合条件的一条记录
var md = "md73";//模型名称
var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}];
McrbHttpClient.gainOne(funcOne,md,condition);
function funcOne(e){
console.log(e)
}

3.1.9插入数据(非批量)

方法名 save
参数 func:回调方法
md:模型名称
sets:插入的字段与数据的映射关系:{uname:"张三",oid:2,rtime:"1441784199"}
用例
//插入数据
var md = "md72";//模型名称
var sets = {uname:"张三",oid:2,rtime:"1441784199"};
McrbHttpClient.save(ins,md,sets);
function ins(e){
console.log(e)
}

3.1.10更新数据

方法名 renew
参数 func:回调方法
md:模型名称
sets:更新的字段与数据的映射关系:{uname:"张三",oid:2,rtime:"1441784199"}
condition:更新条件(参照3.1.4)
用例
//更新
var md = "md72";//模型名称
var sets = {uname:"张三11",oid:999,rtime:"1441784199"};
var condition = [{lgc:1,ky:'id',oprt:'mcb_eq',vl:243}];
McrbHttpClient.renew(update,md,sets,condition);
function update(e){
console.log(e)
}

3.1.11根据id更新一条数据

方法名 renewbyid
参数 func:回调方法
md:模型名称
sets:更新的字段与数据的映射关系:{uname:"张三",oid:2,rtime:"1441784199"}
id:id对应值
用例
var md = "md72";//模型名称
var sets = {uname:"张三11",oid:999,rtime:"1441784199"};
var id = 243;
McrbHttpClient.renewbyid(update,md,sets,id);
function update(e){
console.log(e)
}
返回值:res = 1 表示成功;

3.1.12根据id查询一条数据

方法名 gainOneById
参数 func:回调方法
md:模型名称
id:id对应值
用例
var md = "md72";//模型名称
var id= 243;
McrbHttpClient.gainOneById(funcOne,md,id);
function funcOne(e){
console.log(e)
}

3.1.13根据id删除一条数据(物理删除)

方法名 removeById
参数 func:回调方法
md:模型名称
id:id对应值
用例
var md = "md72";//模型名称
var id= 243;
McrbHttpClient.removeById(delete,md,id);
function delete(e){
console.log(e)
}
返回值:status = 1 表示成功;

3.1.14删除对应传值数据

方法名 delete
参数 func:回调方法
md:模型名称
sets:更新的字段与数据的映射关系:{uname:"张三",oid:2,rtime:"1441784199"}
用例
//更新
var md = "md72";//模型名称
var sets = {uname:"张三",oid:2,rtime:"1441784199"}
McrbHttpClient.del(delete,md,sets);
function delete(e){
console.log(e)
}

3.1.15批量插入数据

方法名 batchInsert
参数 func:回调方法
md:模型名称
listmap:添加的字段与数据的映射关系:[{uname:"张三",oid:2,rtime:"1441784199"},{uname:"张三",oid:2,rtime:"1441784199"}]
用例
//更新
var md = "md72";//模型名称
var listmap = [{uname:"张三",oid:2,rtime:"1441784199"},{uname:"张三",oid:2,rtime:"1441784199"}]
McrbHttpClient.renew(ins,md,listmap);
function ins(e){
console.log(e)
}

3.2高阶API使用

高阶api由后端开发人员开发接口,编写具体输入输出参数说明文档后交付前端开发人员使用

方法名 ho
参数 honame:api名称/路径,由后端开发人员定义
data:传递的后端程序的参数列表
用例
//高阶api调用
var data = {name:"张三",age:2};
McrbHttpClient.ho(funcho,"Test/te",data);
function funcho(e){
console.log(e)
}

3.3长连接接口使用

前后台建立连接后保持连接,可双向收发消息,用来做后台长时间任务处理时向前端发送任务完成进度消息(前端实现进度条显示),即时通信等,此接口使用ws协议,不能使用http协议访问

  • 使用步骤:1创建长连接,2.发送数据
  • 创建长连接:每个document对象中只创建一次
    配置url McrbHttpClient.conf. wshost
    createlCnct方法参数 refunc:请求返回时调用的方法
    用例
    McrbHttpClient.lCnct.createlCnct(resp);
    function resp(response){
    alert(response)
    }
  • 发送数据
    sendlCnct(url,data) 发送数据
    参数 url:接口url,由后台开发人员提供,
    eg:Test/test
    data:传递给后台的数据,json格式,
    eg: {"id":1,"name":"李四"}
    用例
    var datas = {"id":1,"name":"李四"};
    McrbHttpClient.lCnct.sendlCnct("Testws/test",datas);

后台返回数据后会调用createlCnct绑定的resfunc方法,前端在此方法中处理业务逻辑。

3.4框架工具组件

该框架中的工具组件使用须引入mhc.js文件,组件方法封装在此js文件,工具组件对应的样式在ctools.css文件;

3.4.1加载动画

加载数据时显示动效。使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的ctools.css文件中。

// 使用方法:在封装接口请求的方法中添加 // 请求开始回调函数 xhr.addEventListener('loadstart', e => { // console.log('请求开始') n++; var loadingdiv = document.getElementById('loading_ing'); if (loadingdiv == null) {this.loadfn.addLoading();} }) // 请求结束 xhr.addEventListener('loadend', e => { // console.log(' 请求结束') n--; if( n == 0){this.loadfn.removeLoading();} });

3.4.2弹窗

McrbHttpClient.popup.msg()提示弹窗

常用于主动操作后的反馈提示。

基础用法:

从中间出现,2 秒后自动消失。

不同状态:用来显示「成功、失败、提示」类的操作反馈。

设置icon字段可以定义不同的状态,默认为null。

(1:成功提示信息,2:错误或警告提示信息,3:蓝色提示信息,4:橙色提示信息,5:绿色提示信息)

McrbHttpClient.popup.msg(content,{icon:1});

参数说明:

参数 说明 类型 可选值
content 消息文字 string 文字内容
icon 图标 Number 1:成功提示,2:错误或警告提示,3:蓝色提示,4:橙色提示,5:绿色提示

应用实例:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.msg('操作中断!') McrbHttpClient.popup.msg('操作成功!',{icon:1}) McrbHttpClient.popup.msg('操作失败!',{icon:2}) McrbHttpClient.popup.msg('操作成功!',{icon:3}) McrbHttpClient.popup.msg('操作失败!',{icon:4}) McrbHttpClient.popup.msg('操作成功!',{icon:5})

效果展示:

McrbHttpClient.popup.confirm()询问弹窗

提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。

基础用法:

居中显示,提示询问是否进行操作“确定”或者“取消”。

仅传入文字提示,如实例1;

传入options作为第一个参数,它是一个字面量对象。icon字段表明消息类型,可以为1:成功提示,2:错误或警告提示,3:蓝色提示,4:橙色提示,5:绿色提示。参数title必须定义为String类型,如实例2;

如需设置两个默认按钮的文字显示,则可添加第二个参数设置(若未设置则显示默认),或需设置点击两个按钮后的后续响应,如实例3;

McrbHttpClient.popup.confirm(options1,options2,cb1,cb2)

参数说明:

参数 说明 类型 可选值
options1.title 标题 string ——
options1.content 消息文字 string ——
options1.icon 图标 Number 1:成功提示,2:错误或警告提示,3:蓝色提示,4:橙色提示,5:绿色提示
options2.btn 按钮文字 array 设置两个按钮的文字提示
cb1 回调函数 Function 点击第一个按钮后回调函数
cb2 回调函数 Function 点击第二个按钮后回调函数

实例1:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm('确定要删除吗?');

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm({ title: '提示语', content: '确定要删除吗?', icon:2 })

实例3:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm({ title: '提示', content: '请问确定要删除吗?', icon:2 },{ btn: ['删除' ,'取消'] },function(){ alert('ok') },function(){ alert('no') } )

McrbHttpClient.popup.prompt()输入框弹窗

当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框。

基础用法:

居中显示,提示用户进行输入操作然后提交。

参数1输入内容的文字提示,参数2设置输入框input的name值,如实例1;

如需设置输入操作后点击‘提交’后的后续响应事件,设置第三个参数回调函数,如实例2;

如需设置输入操作后点击‘取消’后的后续响应事件,设置第四个参数回调函数,如实例3;

McrbHttpClient.popup.prompt(text,keyname,cb1,cb2)

参数说明:

参数 说明 类型 可选值
text 输入内容文字提示 string 必填
keyname 输入框input的name值 string 必填
cb1 点击“提交”后回调函数 Function 非必填
cb2 点击“取消”后回调函数 Function 非必填

实例1:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd")

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd",function(e){ // console.log(e) McrbHttpClient.popup.msg('您提交的数据:'+e) })

实例3:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd",function(e){ // console.log(e) McrbHttpClient.popup.msg('您提交的数据:'+e) },function(e){ // console.log(e) McrbHttpClient.popup.msg('您未完成提交') })

McrbHttpClient.popup.alert()确认语弹窗

当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭。

基础用法:McrbHttpClient.popup.alert(options)

居中显示,中断用户操作,直到用户确认关闭。

可只设置提示文字,如下:

// 实例1 - 使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert('操作成功')

如传入参数为options对象,title为标题string类型,icon为图标对应的值为int类型(1:成功提示,2:错误或警告提示,3:蓝色提示,4:橙色提示,5:绿色提示),content为描述内容;如实例2或实例3;callback回调函数

参数说明:

参数 说明 类型 可选值
title 标题 string ——
content 消息文字 string ——
icon 图标 Number 1:成功提示,2:错误或警告提示,3:蓝色提示,4:橙色提示,5:绿色提示
callback 回调函数 function ——

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert({ title: '敬请期待!', icon:3 }) <!-- --> McrbHttpClient.popup.alert({ title: '敬请期待!', icon:3, callback:function(){ console.log('pppp'); } })

实例3:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert({ title: '审核通过!', content: '您申请的信息已通过审核!', icon:1 }) McrbHttpClient.popup.alert({ title: '审核未通过!', content: '您申请的信息未通过审核!', icon:2 })

McrbHttpClient.popup.open()打开自定义html窗体

当用户进行操作时会被触发,中断用户操作,弹出自定义html内容。

基础用法:

默认居中显示,中断用户操作,弹出自定义html内容,知道用户触发相应事件触发关闭。

设置content自定义html的dom元素;

设置标题title显示自定义标题内容,如实例1;

如需多层弹出,必须设置id参数,如实例2;

options选填,如需特殊设置可使用;

McrbHttpClient.popup.open(content,title,id,options)

参数说明:

参数 说明 类型 可选值
content 自定义html内容 —— 自定义内容的dom元素
title 标题 string 必填
id 弹窗id string 必填
options.position 弹出初始位置 String 选填(默认center)center居中,left-top左上角,left-bottom左下角,right-top右上角,right-bottom右下角
options.isdrag 是否可拖拽 String 选填(默认0)0:不可拖动,1:可拖动

实例1:

//使用方法:可在当前页面的js中使用下面的方法 // 自定义html窗体内容 <table id="opendiv"> <tr> <td>参数</td> <td>说明</td> <td>类型</td> <td>可选值</td> </tr> <tr> <td>title</td> <td>标题</td> <td>string</td> <td>非必填</td> </tr> <tr> <td>content</td> <td>自定义html内容</td> <td>——</td> <td>自定义内容的dom元素</td> </tr> </table> // 打开自定义html窗体 var title = "标题"; var content = document.getElementById('opendiv'); var options = { position:'right-bottom' , isdrag:1, } McrbHttpClient.popup.open(content,title,'msid',options);

实例2:

//使用方法:可在当前页面的js中使用下面的方法 // 自定义html窗体内容 <table id="opendiv"> <tr> <td>参数</td> <td>说明</td> <td>类型</td> <td>可选值</td> </tr> <tr> <td>title</td> <td>标题</td> <td>string</td> <td>非必填</td> </tr> <tr> <td>content</td> <td>自定义html内容</td> <td>——</td> <td>自定义内容的dom元素</td> </tr> </table> // 打开自定义html窗体 var title = "标题"; var content = document.getElementById('opendiv'); McrbHttpClient.popup.open(content,title,'ccid'); $('#opendiv').click(function(){ var content2 = document.createElement('div'); content2.innerText = '222222'; content2.onclick = function(e){ var content3 = document.createElement('div'); content3.innerText = '333333'; content3.onclick = function(e){ McrbHttpClient.popup.alert('tttttt'); } McrbHttpClient.popup.open(content3, 'ee','ccid3'); } McrbHttpClient.popup.open(content2,'','ccid2'); });

McrbHttpClient.popup.ifream()打开ifream 嵌套页面窗体

基础用法:McrbHttpClient.popup.ifream(url, t, w, h)

url 嵌套路径;t 设置窗体标题;w 设置窗体宽度;h 设置窗体高度

var url = 'http://manager.ixiera.com/issue/main?sys_filter=assignee_mine'; McrbHttpClient.popup.ifream(url, 'ifream标题', '500px', '500px')

McrbHttpClient.popup.notice()打开通知提醒窗体

基础用法:McrbHttpClient.popup.notice(type, icon, w, d)

type(1:成功消息,2:错误消息,3:提示消息,4:警告消息);icon(true显示,false不显示);t 标题;d 描述

McrbHttpClient.popup.notice(1, true, '通知提醒', '描述描内容') McrbHttpClient.popup.notice(2, true, '通知提醒') McrbHttpClient.popup.notice(3, false, '通知提醒', '描述描内容') McrbHttpClient.popup.notice(4, false, '通知提醒')

3.4.3上传文件

使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的ctools.css文件中。

功能描述:可以上传1.图片文件;2.所有类型的文件

init方法:初始化上传组件

var upload_obj = McrbHttpClient.upload.init('container_id', options, callback)

参数说明:

参数 说明
{String} id 挂载容器的id
{Object} options 上传组件的配置参数:
1.{Boolean} isImgUploader 是否为图片上传组件;默认值:true
2.{String|Array[String]} fileType 上传对话框文件类型过滤器;默认值:*
3.{Number} maxSize 上传文件的最大尺寸;默认值:5
4.{String} btnText 上传按钮的文字;默认值:上传
5.{Boolean} isMulti 是否为多图片/多文件上传器.默认值:false
返回值 upload对象 包含文件url数据,配置参数options,上传容器dom。

使用方法

1.首先在html文件中加入div标签,id自定义。

2.然后在script标签或js文件中调用函数McrbHttpClient.upload.init(id, isImgUploader)。

实例:

<div id="upload"></div> <script> let upload_img_options = { isImgUploader: true, maxSize: 10, fileType: "image/*", isMulti: true, }; McrbHttpClient.upload.init("upload", upload_img_options, function (data) { console.log(data); }); let upload_file_options = { isImgUploader: false, maxSize: 8, fileType: "*.pdf", isMulti: true, }; McrbHttpClient.upload.init("upload", upload_file_options, function (data) { console.log(data); }); </script>

setValue方法:给上传组件赋值,用于回显。参数为字符串或字符串数组

upload_obj.setValue('url')

getValue方法:获取上传组件的数据。

upload_obj.getValue()

效果展示:

3.4.4流加载

该模块包含信息流加载和图片懒加载两大核心组成,其对服务端和前端体验有非常大的性能帮助。

信息流 - 滚动加载/手动点击加载

信息流即异步逐页渲染列表元素。

如页面初始时只显示了6个,想通过加载更多来显示余下列表,只需要执行下列方法即可。

参数说明:

参数 说明
id string,绑定挂载元素的id
type 触发类型:scroll滚动到底部触发,click点击触发
icon 加载动画样式1-8,共8种样式
text 设置提示文字
function 触发事件后执行函数

实例:

//使用方法:可在当前页面html的js中使用下面的方法 // 信息流 - 手动点击加载 McrbHttpClient.loadfn.lazyload({ id:'lazy', type:'click', icon:2, text:'LOADING...' },function(){ console.log('您触发了click事件') }); // 信息流 - 滚动加载 McrbHttpClient.loadfn.lazyload({ id:'lazy', type:'scroll', icon:3, text:'LOADING...' },function(){ console.log('您触发了scroll事件') });

效果展示:

图片懒加载

该模块是一个用于加载当前屏图片的高性能方式,对网站因为图片可能带来的压力,可做出优化效果。(只会针对img元素有效)

参数说明:

参数 说明
第一个参数 Array图片路径集合
第二个参数 string,绑定挂载元素的id

实例:

//使用方法:可在当前页面html的js中使用下面的方法 // 图片懒加载 var imgs = [ 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'https://pic1.zhimg.com/v2-9efbeaa8877dcd5f04974a53ceba2878_r.jpg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', ] McrbHttpClient.loadfn.lazyimg(imgs,'container');

效果展示:

3.4.5日期格式化

功能介绍:

日期转换为指定的格式:比如转换成 yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd

McrbHttpClient.datefn.patternTime(data, fn)

参数说明:

参数 说明
data 日期时间
fn 格式表达式

格式表达式说明:

名称 表达式
{y}
{m}
{d}
{h}
{i}
{s}
星期 {a}

使用方法:

实例方法 结果
McrbHttpClient.datefn.patternTime('2000/02/02 14:01:31', '{y}-{m}-{d} {h}:{i}:{s}') 2000-02-02 14:01:31
McrbHttpClient.datefn.patternTime(new Date(), '{y}年{m}月{d}日{h}:{i}:{s}') 2022年10月09日17:11:43
McrbHttpClient.datefn.patternTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}') 2022/10/09 17:11:43
McrbHttpClient.datefn.patternTime(new Date(), '{y}/{m}/{d}') 2022/10/09
McrbHttpClient.datefn.patternTime(new Date(), '{h}:{i}:{s}') 17:11:43
McrbHttpClient.datefn.patternTime(new Date(), '星期{a}') 星期日

3.4.6日期与时间选择器

功能介绍:

通过绑定某id元素渲染日期选择器组件;

有两种风格选择style:1或2;

回调函数,返回选中的日期时间;

McrbHttpClient.datefn.calendarDom(id,style,callback)

参数说明:

参数 说明
id string,绑定元素的id
style int,时间选择器风格:1或者2
callback 回调函数:返回选择的日期时间

赋值方法:

McrbHttpClient.datefn.calendarSetVal(dom,date)

参数说明:

参数 说明
dom 绑定元素
date 赋值时间(格式:中国标准时间)

实例:

<!-- html --> <div id="data_box" class=""></div> <div id="data_box2" class=""></div> <!-- 渲染 --> McrbHttpClient.datefn.calendarDom('data_box', 1, function(e){console.log('选择的结果:'+e)}) // 输出结果:选择的结果:2022-10-13 00:00:00 <!-- 赋值 --> var data_box2 = document.getElementById('data_box2'); var ss_date = new Date('2023-08-06 12:12:12'); McrbHttpClient.datefn.calendarSetVal(data_box2, ss_date);

效果展示:

3.4.7下拉菜单

功能介绍:

通过绑定某id元素渲染下拉菜单组件;

可设置组件宽、是否圆角、提示语、以及下拉菜单中的值;

选中后返回选中的值;

McrbHttpClient.searchfn.selectfn({id,width,isradius,placeholder},optData, callback);

参数说明:

参数 说明
id 挂载元素id
width 设置元素宽,默认值100px
isradius True/false,是否设置圆角,默认false
placeholder 设置提示语,默认“请选择”
optData Array下来列表值的集合
如:var optData = [ { name:'项目aa', value:1, children:[ { name:'项目a1', value:10, }, { name:'项目a2', value:11, }, { name:'项目a3', value:12, } ] },{ name:'项目bb', value:2, children:[] } ]
callback 回调函数:返回选中值

实例:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.searchfn.selectfn({ id:'selectdemo', width:'150px', isradius:false, placeholder:'请选择项目' }, optData, function(e){ console.log(e) }) McrbHttpClient.searchfn.selectfn({ id:'selectdemo2', width:'150px', isradius:true, placeholder:'请选择项目名称' }, optData, function(e){ console.log(e) })

效果展示:

3.4.8表单及校验

使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的style/ctools.css文件中。

功能描述:input, select, button等表单元素的实现,表单提交、表单重置的接口实现。

使用方法:

1.首先在html文件中加入form标签,id自定义。

2.然后在script标签或js文件中调用函数McrbHttpClient.form(id),返回form实例。

参数:id(String): 容器的id; 返回值form实例。

3.调用form实例方法 form.render(options)。实现对form表单的渲染

4.form实例方法

获取某一字段的值:form.getValue(name)

获取所有表单项的值:form.allValues()

对某一字段进行赋值:form.setValue(name)

批量赋值:form.setValues(obj), obj={name1:value1, name2:value2...}

参数:options(Array),配置项option的数组,每一个配置项对应一个表单元素

目前支持种表单元素,如下:

1.input

配置参数如下:

type(String) input
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
verify (Array[String]) 字符串数组,表单验证参数。目前可以取值:phone, email, url, number, date, identity
placeholder (String) 其placeholder属性对应值
unit (String) 单位。如m,kg等
custom (String | Dom) 自定义区块,添加在input后,class名称“mcb-input-custom”

2.textarea

type(String) textarea
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
placeholder (String) 其placeholder属性对应值

3.select(废弃)

type(String) select
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
opts (Object) 例:opts: {'请选择颜色': '','红色': 1,'绿色': 2}Key为选项显示的值,value为表单提交时的值,空串代表默认项。

4.selectInput

type(String) selectInput
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
opts (Array[Object]) 例:opts: [{value: '', text: '请选择', selected: true}, {value: 1, text: '红色'}, {value: 2, text: '绿色'}, {value: 3, text: '黄色'}]

5.radio

type(String) radio
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
radioList(Object[]) 每个单元按钮选项的配置

raidoList中每个Objcet字段及代表的含义如下:

id(String) Radio按钮的及其label(for属性)对应的id
value(String/Number) 该radio对应的值(提交表单时提交的值)
label (String) 该radio对应的label,自定义。
checked(Boolean) 是否被默认选中
showIcon(Boolean) 是否为图标+文字形式的radio
iconPath(String) 图标的路径

6.checkbox

type(String) checkbox
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
checkboxList Object[]) 每个单元按钮选项的配置

checkboxList中每个Objcet字段及代表的含义如下:

id(String) Checkbox按钮的及其label(for属性)对应的id
value(String/Number) 该Checkbox对应的值(提交表单时提交的值)
text (String) 该Checkbox对应的label,自定义。
checked(Boolean) 是否被默认选中
showIcon(Boolean) 是否为图标+文字形式的checkbox
iconPath(String) 图标的路径

7.upload

type(String) upload
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
maxSize(Number) 上传文件的最大大小,单位Mb
btnText(String) 上传按钮显示的文字
isImg(Boolean) 是否只上传图片,且有缩略图
isMulti(Boolean) 是否支持多文件/图片上传
fileType(String或Array[String]) isImg为真时无效。input的accept属性值。例:image/*, audio/*, video/*, .pdf, .doc, .xls, .mp4, .png等。默认值:所有类型文件。
callback 上传之后的回调函数

8.button

type(String) button
name (Array[String]) 按钮组显示的名字。
event (Array[String]) 字符串数组,可取值:submit, reset, cancel。表示按钮对应的事件
callback (Array[Function]) 函数数组,表示按钮事件对应的回调函数。
beforeSumbit (Function) 表单提交前的回调函数,用于处理特殊校验等。返回一个布尔类型的值,返回true时,表单正常进入提交流程,返回false时,提交终止。

9.edittext

type(String) edittext
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
setdata(Object) 编辑器参数项设置:
Id编辑器绑定元素的id;
width编辑器宽;
height编辑器高;
filePostName上传图片接口中file参数名;
uploadJson上传图片接口地址;

10.video

type(String) video
label (String) 元素label,自定义。
name (String) 元素的name属性。
maxSize (Number) 视频文件最大多少MB
required (Boolean) 是否为必填项

11.switch (开关)

type (String) switch
label (String) 元素label,自定义。
name (String) 元素的name属性。
active (Boolean) 开关是否打开
required (Boolean) 是否为必填项

12.map(拾点器)

注意事项:使用map组件时,需要设置高德地图的key、securityJsCode及version(默认值为1.4.15, 可选2.0)

type (String) map
label (String) 元素label,自定义。
name (String) 元素的name属性。
width(String) 地图宽度(可选,默认值为100%)
height(String) 地图高度(可选,默认值为400px)
layers(Array) 地图图层(非必填),satellite卫星图,roadNet路网图

实例:

<form id="test"></form> <script type="text/javascript"> McrbHttpClient.mapConfig = { key: '你申请的key', securityJsCode: '你申请的securityJsCode', version: '1.4.15' } let testForm = McrbHttpClient.form('test'); let options = [ { type: "input", name: "phone", required: true, verify: ['phone'], label: "手机号", placeholder: "请输入手机号", },{ type: "selectInput", name: "color", required: true, label: "颜色", opts: [ {value: '', text: '请选择颜色',selected: true}, {value: 1, text: '红色'}, {value: 2, text: '绿色'} ] },{ type: "radio", label: "类别", name: "type", required: true, radioList: [ { id: "annimal", value: 1, label: "动物", checked: true },{ id: "plant", value: 2, label: "植物" }, ], },{ type: "checkbox", label: "技能", name: "skill", checkboxList: [ {id: "1", value: 1, text: "射击", checked: true}, {id: "2", value: 2, text: "游泳"}, {id: "3", value: 3, text: "骑马"}, ] },{ type: 'datePicker', label: '时间', name: 'ctime', required: false, // readOnly: true },{ type: "upload", label: "图片上传", name: "img", required: true, maxSize: 5, btnText: "上传图片", isImg: true, callback: function(data){ console.log(data); }, },{ type: "textarea", label: "描述", name: "description", required: false, placeholder: "请简要描述…", },{ type: "edittext", // label: "编辑器", name: "content_body", required: false, setdata:{ id:'column_content', width:'700px', height:'440px', filePostName:'ggggggg', uploadJson:'XXXXX/XXXXX/upload?actype=10', } },{ type: "video", name: "svideo", label: '小视频' },{ type: 'switch', name: 'testswitch', label: '开关测试', active: true }, { type: 'map', label: 'map测试', name: 'maptest', width: '100%', height: '500px', layers: ['satellite'] }, { type: "button", event: ["submit"], callback: [onSubmit], name: ["确定"], }, ]; function onSubmit(){ let data = testForm.getValue('color'); console.log(data); } testForm.render(options); </script>

效果展示:

3.4.9表格table

功能介绍:

width值控制表格宽度;

columns与dataSource中的数据相对应,没有对应数据的地方显示为空;

columns中width设置列宽,columns中align值控制内容在表格中所处的位置;

columns中的render函数方法,可对当前数据进行处理后显示,如实例1;

columns中的render函数方法,也可设置为数据操作(编辑、查看、删除),如实例2;

McrbHttpClient.tableDom.common({columns,dataSource,width:,ischeck,},'tableid');

获取勾选数据方法:

参数id为绑定的table的id;

McrbHttpClient.tableDom.getchecked(tableid);

参数说明:

参数名 说明 类型 可选值
columns table表格‘列’属性内容设置 array 必填项;(包含的属性有Key、title、align、width、isAll)
columns中Key 显示数据的字段名 String ——
columns中title 设置列-标题名称 String ——
columns中align 单元格中文字对其方式 String ——
columns中width 设置列宽 String ——
columns中isAll 单元格鼠标悬浮(悬浮显示全部信息) Boolean 默认false;(开启true)
dataSource table数据 array 必填
width 控制表格宽度 String 默认宽800px
ischeck true/false是否全选 Boolean 默认false
tableid 挂载元素的ID String 必填

实例1:

<a id='getDataBtn' style="padding: 4px 10px; background-color: #fff;border: 1px solid #ddd;border-radius: 4px;margin: 10px 0;">获取选中数据</a> <div id="tableDOM"></div> // table表格参数 const columns1 = [ {key: 'name',title: '姓名', align: 'center',}, {key: 'age',title: '年龄',align: 'center',}, {key: 'job',title: '工作',align: 'center',render:function (text, data){ return '<span style="color:red;">'+text+'</span>' } }, ]; // 表格数据 const dataSource1 = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, ] // 渲染table McrbHttpClient.tableDom.common({ columns:columns1, dataSource:dataSource1, width:'100%', ischeck:true, },'tableDOM'); // 获取选中数据 var dataBtn = document.getElementById('getDataBtn'); dataBtn.onclick = function(){ console.log('获取选中数据') var ff = McrbHttpClient.tableDom.getchecked('tableDOM'); console.log(ff) }

效果展示:

1获取选中数据

实例2:(单元格一行溢出省略,鼠标悬浮查看全部内容)

如需单元格一行溢出省略显示,鼠标悬浮时则可查看全部信息,则需设置isAll为true且设置width。

<a id='getDataBtn2' style="padding: 4px 10px; background-color: #fff;border: 1px solid #ddd;border-radius: 4px;margin: 10px 0;">获取选中数据</a> <div id="tableDOM2"></div> // table表格参数 const columns2 = [ {key: 'name',title: '姓名', align: 'center',isAll:true, width:'100px'}, {key: 'age',title: '年龄',align: 'center',isAll:true, width:'60px'}, {key: 'job',title: '工作',align: 'center',render:function (text, data){ return '<span style="color:red;">'+text+'</span>' } }, { key: 'action', title: '操作', align: 'center', render:function (text, data){ return McrbHttpClient.tableDom.createTool([{ type:'del', text:'删除', classname:'delBtn' },{ type:'edit', text:'修改', classname:'editBtn' },{ type:'look', text:'查看', classname:'lookBtn' },{ type: 'switch', text: '开关', }],data,function(e,type, flag){ // e:点击行数据 // type:点击事件执行类型--删除、修改、查看 if(type == 'del'){ console.log('删除数据:') console.log(e) }else if(type == 'edit'){ console.log('修改数据:') console.log(e) }else if(type == 'look'){ console.log('查看数据:') console.log(e) } else if(type == 'switch') { if (flag) { console.log('开关on'); console.log(e); } else { console.log('开关off'); console.log(e); } } }) } }, ]; // 表格数据 const dataSource2 = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, ] // 渲染table McrbHttpClient.tableDom.common({ columns:columns2, dataSource:dataSource2, width:'100%', ischeck:true, },'tableDOM2'); // 获取选中数据 var dataBtn2 = document.getElementById('getDataBtn2'); dataBtn2.onclick = function(){ console.log('获取选中数据') var ff = McrbHttpClient.tableDom.getchecked('tableDOM2'); console.log(ff) }

效果展示:

2获取选中数据


3.4.10page分页

功能介绍:

可自行设置设置每页显示数据条数(pageSize),数据总条数(totalCount),当前页数(curPage),显示多少个页码(nav_count),点击分页后的回调函数(callback);

McrbHttpClient.loadPage.init({el,pageSize,totalCount,curPage,nav_count,callback);

参数说明:

参数名 说明 类型 可选值
el 挂载元素的id String 必填
pageSize 每页显示条数 Int 必填
totalCount 总记录数 Int 必填
curPage 当前页数 Int 不设置则默认1
nav_count 显示多少个导航 Int 必填
callback (Array[Function]) 点击分页后的回调函数 —— ——

实例1:

// table表格参数 const columns3 = [ {key: 'name',title: '姓名', align: 'center',}, {key: 'age',title: '年龄',align: 'center',}, {key: 'job',title: '工作',align: 'center',}, {key: 'action',title: '操作',align: 'center',render:function (text, data){ return McrbHttpClient.tableDom.createTool([{ type:'del',text:'删除',classname:'delBtn'},{ type:'edit',text:'修改',classname:'editBtn'},{ type:'look',text:'查看',classname:'lookBtn'}],data,function(e,type){ // e:点击行数据 // type:点击事件执行类型--删除、修改、查看 if(type == 'del'){ console.log('删除数据:') console.log(e) }else if(type == 'edit'){ console.log('修改数据:') console.log(e) }else if(type == 'look'){ console.log('查看数据:') console.log(e) } }) } }, ]; // table表格数据 const data3 = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '郑六',age: '23', job: '职员'}, {name: '郑1',age: '23', job: '职员'}, {name: '郑2',age: '23', job: '职员'}, {name: '郑3',age: '23', job: '职员'}, {name: '郑4',age: '23', job: '职员'}, {name: '郑5',age: '23', job: '职员'}, {name: '郑6',age: '23', job: '职员'}, {name: '郑7',age: '23', job: '职员'}, {name: '郑8',age: '23', job: '职员'}, {name: '郑9',age: '23', job: '职员'}, {name: '郑11',age: '23', job: '职员'}, {name: '郑12',age: '23', job: '职员'}, {name: '郑13',age: '23', job: '职员'}, {name: '郑14',age: '23', job: '职员'}, {name: '郑15',age: '23', job: '职员'}, ] // 渲染 page+table McrbHttpClient.loadPage.init({ el:'#table_page', pageSize:5,//每页显示条数 totalCount:data3.length,//总记录数 curPage:1,//当前页数,不设置则默认1 nav_count:5,//显示多少个导航 callback:function(curPage,start,end){//点击翻页后的回调函数 console.log("正在加载第("+curPage+")页的数据,请稍后......."); var dataSource = []; for( var i = start; i < end; i++){ dataSource.push(data3[i]); if(i == (end - 1)){ McrbHttpClient.tableDom.common({columns:columns3, dataSource:dataSource,},'tableDOM3'); } } } });

效果展示:

3获取选中数据

组合:列表 + 分页

参数说明:

参数名 说明 类型 可选值
options1 配置列表参数(参考3.4.9) object 必填
options2 配置分页参数(参考3.4.10) object 必填
callback (Array[Function]) 点击分页后的回调函数 —— ——

分页切换时回调函数callback中返回curPage, start, end, listObj, pageObj

curPage 当前页码,start 开始,end 结束,listObj 列表对象,pageObj 分页对象

分页切换 - 重新赋值数据 + 渲染
listObj.options.dataSource = dataSource;
listObj.render(listObj.options);

如果初始化渲染第2页,只需浏览器地址中拼上参数curPage=2即可

// 实例如下: <div id="tabledom"></div> const cols = [ {key: 'name',title: '姓名', align: 'center',}, {key: 'age',title: '年龄',align: 'center',}, {key: 'job',title: '工作',align: 'center',render:function (text, data){ return '<span style="color:red;">'+text+'</span>' } }, ]; // 表格数据 const data = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, ] // 配置列表参数(参考3.4.9) var options1 = { columns: cols, dataSource: data, width: '100%', ischeck: true, } // options2 配置分页参数(参考3.4.10) var options2 = { pageSize:5,//每页显示条数 totalCount:data.length,//总记录数 curPage:1,//当前页数,不设置则默认1 nav_count:5,//显示多少个导航 } // callback 分页切换回调函数 var callback = function(curPage, start, end, listObj, pageObj){ console.log("正在加载第("+curPage+")页的数据,从"+start+"到"+end+"请稍后......."); console.log(listObj) console.log(pageObj) var dataSource = []; for( var i = start; i < end; i++){ dataSource.push(data[i]); if(i == (end - 1)){ // 重新赋值 + 渲染 listObj.options.dataSource = dataSource; listObj.render(listObj.options); } } } /**创建实例对象 * id 装载容器ID */ var list = McrbHttpClient.listPage('tabledom'); /**渲染 * options1 配置列表参数(参考3.4.9) * options2 配置分页参数(参考3.4.10) * callback 分页切换回调函数 */ list.render(options1, options2, callback);

3.4.11编辑器

具体功能有:

字体加粗、倾斜、下划线、删除线、p标签、h1标签、h2标签、h3标签、字体颜色、背景颜色、字体大小、图片、列表、居左、居右、居中等;

点击"确定"返回编辑器内容;

点击"取消"清空编辑器内容;

参数说明:

参数名 说明 类型 可选值
el 挂载元素的id String 必填
callback 回调函数 —— ——

实例:

<div id='edit-cont'></div> // 编辑器 McrbHttpClient.editor.creatEditor('edit-cont',function(e){ // 返回编辑器内容 console.log(e) });

效果展示:

3.4.12Tab选项卡

基本用法:McrbHttpClient.tabfn.init(options, callback);

参数说明:

参数 说明 类型 可选值
eleid 挂载元素的id String 必填
trigger 设置如何触发事件,点击触发:click鼠标滑过触发:hover String 默认值click
btncolor 选中状态颜色设置 String 默认值orange
callback 切换触发回调函数 function 返回值:当前点击的元素,如需带参可给点击tab项设置属性data-value,如果存在此属性回调函数会返回

用法实例:

//使用方法: <div id="mytab" class="components_tab"> <ul class="tabbtns"> <li data-value="aaa" class="on">大橘</li> <li data-value="bbb">汪汪</li> <li data-value="ccc">库库</li> <li data-value="ddd">斑点</li> </ul> <div class="tabboxs"> <div class="box on">111</div> <div class="box">222</div> <div class="box">333</div> <div class="box">444</div> </div> </div> // tab选项卡 McrbHttpClient.tabfn.init({ eleid:'mytab', trigger:'hover', // click + hover btncolor:'#0078FF' }, function(e, val){ console.log(e); // 输出点击的元素 console.log(val); // 输出点击元素的data-value属性值 });

效果展示:

  • 大橘
  • 汪汪
  • 库库
  • 斑点
111
222
333
444

动态操作tab:McrbHttpClient.tabfunc.init(options);

参数说明:

参数 说明 类型 可选值
eleid 挂载元素的id String 必填
btncolor 选中状态颜色设置 String 默认值orange
dynamics 是否开启动态操作:true开启,false不开启 boolean 默认值false
addfun 设置添加项参数 —— ——
title 新增项标题 String ——
content 新增项内容 String ——
callback 添加成功回调函数 —— ——

用法实例:

//使用方法: <div id="mytab2" class="components_tab"> <ul class="tabbtns"> <li class="on">大橘</li> <li>汪汪</li> <li>库库</li> <li>斑点</li> </ul> <div class="tabboxs"> <div class="box on">111</div> <div class="box">222</div> <div class="box">333</div> <div class="box">444</div> </div> </div> // tab选项卡 动态操作 var content = document.getElementById('tableDOM'); McrbHttpClient.tabfunc.init({ eleid:'mytab2', btncolor:'#0078FF', dynamics:true, addfun:{ title:'8989', content:content, callback:function(e){ console.log(e) } } });

效果展示:

  • 大橘大
  • 汪汪
  • 库库
  • 斑点
111
222
333
444

3.4.13进度条

参数说明:

参数 说明 类型 可选值
ele_id 挂载元素的id String 必填
bgcolor 进度条背景色 String 默认值#f57e00
istext 是否显示文字百分比:true显示,false不显示 boolean 默认值false
fontsize 设置文字大小 String 默认值14px
fontcolor 设置文字颜色 String 默认值#333
position 设置文字显示位置:可选centertop,bottom,left,right String 默认值center
percent 设置百分比 Int 默认值100
size 设置进度条的高度 String 默认值20px

动态修改百分比方法:

参数 说明 类型 可选值
ele_id 挂载元素的id String 必填
percent 设置百分比 Int ——
// percent动态修改的百分比 McrbHttpClient.progress.change({ ele_id:'progress_bar', percent: percent, },function(e){ // console.log('当前进度是'+e); });

用法实例:

<div id="progress_bar"></div> // 进度条 McrbHttpClient.progress.init({ ele_id:'progress_bar', bgcolor:'#f57e00', istext:true, fontsize:'12px', fontcolor:'#0069ff', position:'right', percent: 0, size:'20px', }); var percent = 0; var timer = setInterval(function(){ // 这里采用随机的两位数来模拟 var a = Math.floor(Math.round(Math.random()*(100-10)+10)/10); percent = percent+a; // console.log(percent) if(percent>100){ percent = 100; clearInterval(timer); } McrbHttpClient.progress.change({ ele_id:'progress_bar', percent: percent, },function(e){ // console.log('当前进度是'+e); }); },1000);

效果展示:

3.4.14面包屑

参数说明:

参数 说明 类型 可选值
ele_id 挂载元素的id String 必填
fontsize 设置字体大小 String 默认值14px
fontcolor 设置字体颜色 String 默认值#999
split_line 设置分割线 String 默认值“ / ”
lastcolor 最后一项字体颜色 String 默认值#333
islasturl 最后一项是否存在链接:true存在,false不存在 boolean 默认值false
data 数据;
data = [
{name:'页面1',url:'javascript:;',},
{name:'页面2',url:'javascript:;',},
];
Array 必填

用法实例:

<div id="breadcrumb"></div> <div id="breadcrumb1"></div> // 面包屑breadcrumb var breadcrumb_data = [ { name:'页面1', url:'javascript:;', },{ name:'页面2', url:'javascript:;', },{ name:'页面3', url:'javascript:;', },{ name:'页面4', url:'javascript:;', }, ]; McrbHttpClient.breadcrumb.init({ ele_id:'breadcrumb', fontsize:'16px', fontcolor:'#0069ff', split_line:'/', lastcolor:'#0069ff', islasturl:true, data:breadcrumb_data, }); McrbHttpClient.breadcrumb.init({ ele_id:'breadcrumb1', fontsize:'16px', fontcolor:'#0069ff', split_line:'-', lastcolor:'#999', data:breadcrumb_data, });

效果展示:

3.4.15搜索框

参数说明:

参数 说明 类型 可选值
ele_id 挂载元素的id String 必填
data 数据集合;
Type:类型;(input输入框,select下拉选择,date时间选择,button搜索按钮,submit自定义名称的搜索按钮,reset重置按钮)
Key:关键字,对应的字段名设置;
prompt:提示语;options是select的选项内容;
var zuhedata = [
{type:'input',key:'keyname',prompt:'请输入关键字',},
{type:'select',key:'keytype',prompt:'请选择类型',
options:[{ name:'项目aa', value:1, },{ name:'项目bb', value:2, },],
},
{type:'date',key:'start_date',prompt:'开始时间',},
{type:'date',key:'end_date',prompt:'结束时间',},
{type:'button',key:'subbtn',prompt:'搜索',}
];
Array 必填
callback 成功回调函数 —— ——

用法实例:

<div id="searchpupo"></div> // 搜索框 var zuhedata = [ { type: "input", key: "keyname", prompt: "请输入关键字", }, { type: "select", key: "keytype", prompt: "请选择类型", options: [ { name: "项目aa", value: 1 }, { name: "项目bb", value: 2 }, ], }, { type: "date", key: "start_date", prompt: "开始时间", }, { type: "date", key: "end_date", prompt: "结束时间", }, { type: "button", key: "subbtn", prompt: "搜索", }, { type: "reset", key: "subbtn2", prompt: "重置2", }, ]; McrbHttpClient.searchfn.compopu({ ele_id: "searchpupo", data: zuhedata, callback: function (e) { console.log(e); }, });

效果展示:

3.4.16导航菜单

使用说明:

html文件中定义div容器,定义导航菜单配置项navOptions(参数见下方说明),调用导航菜单初始化方法McrbHttpClient.navMenu.init(navOptions)。

参数说明:

参数 说明
id 导航菜单容器id
fontColor 字体颜色(非必填,默认为#aaa)
fontSize 字体大小(非必填,默认为16px)
backgroundColor 背景色(非必填,默认为#2F4056)
activeIndex 初始状态时被激活的栏目的序号(非必填)
activeFontColor 被激活栏目的字体颜色(非必填,默认为#fff)
activeBackgroundColor 被激活栏目的背景色(非必填,默认为#396ae7)
openBtn 展开按钮的url地址(非必填)
closeBtn 收起按钮的url地址(非必填)
group (Array) 导航菜单栏目group

group为数组类型,内部包含一个或多个导航菜单的栏目对象,导航菜单的栏目对象的参数如下

参数 说明
index 栏目的index
title 栏目的标题
icon 栏目图标(非必填)
activeIcon 激活栏目的图标(非必填)
href 点击该栏目跳转的url(非必填)
callback 点击该栏目后的回调(非必填)
children 该栏目的子栏目,为数组类型,包含一个或多个导航菜单的栏目对象

用法实例:

<div id="testmenu"></div> <script type="text/javascript"> let menuOptions = { id: "testmenu", activeIndex: "1-1", fontSize: "20px", group: [ { index: "0", title: "首页", href: "", icon: './img/tip_icon1_2.png', activeIcon: './img/tip_icon1_1.png', }, { index: "1", title: "栏目一", icon: './img/tip_icon2_2.png', activeIcon: './img/tip_icon2_1.png', children: [ { index: "1-1", title: "<span>子栏目一</span>", href: "", }, { index: "1-2", title: "子栏目二", children: [ { index: "1-2-1", title: "三级栏目一", href: "https://www.baidu.com", }, { index: "1-2-2", title: "三级栏目二", }, { index: "1-2-3", title: "三级栏目三", children: [ { index: "1-2-3-1", title: "四级栏目一", }, ], }, ], }, ], }, { index: "2", title: "栏目二", callback: alertCol, }, { index: "3", title: "栏目三", href: "", children: [ { index: "3-1", title: "二级栏目", href: "https://www.taobao.com", }, ], }, { index: "4", title: "栏目四", href: "", }, ], }; McrbHttpClient.navMenu.init(menuOptions); function alertCol(option) { alert(option.title); } </script>

效果展示:

3.4.17树状结构

基本用法:McrbHttpClient.treeModel.init(options,callback);

参数options说明:

参数 说明 类型 可选值
ele_id 挂载元素的id String 必填
style_type 类型:1基础类型,2列表多层级类型 int 默认值:1
width 设置容器宽度 String 默认值100%
themeColor 设置主题色 String 默认值#4C90FF
ischecked 是否开启复选框,仅style_type=1时可使用;
获取选中项数据方法:McrbHttpClient.treeModel.getChecked(id)
boolean 默认值false
toolsShow 是否开启节点操作; boolean 默认值false
toolsData 节点操作设置参数;仅当节点操作开启(toolsShow:true)时起作用;
如:[{{type:'look',text:'查看',className:'lookBtn'}}];
说明:type设置功能类型;text:设置按钮显示文字;className:设置按钮样式
Array 默认值[]
data 数据;var tree_data = [ { id : '100000', name_text : '廊坊银行总行', children : [ { id : '110000', name_text : '廊坊分行', children : [ { id : '111000', name_text : '廊坊银行金光道支行', }, { id : '112000', name_text : '廊坊银行解放道支行', children : [ { id : '112100', name_text : '廊坊银行广阳道支行', }, { id : '112200', name_text : '廊坊银行三大街支行', } ] }, { id : '113000', name_text : '廊坊银行开发区支行', } ] } ] }, { id: '200000', name_text: '邯郸银行总行', children: [ { id: '210000', name_text: '邯郸分行', children: [ { id: '213000', name_text: '邯郸银行开发区支行', }, { id: '212000', name_text: '邯郸银行解放道支行', children: [ { id: '212200', name_text: '邯郸银行三大街支行', }, { id: '212100', name_text: '邯郸银行广阳道支行', } ] }, { id: '211000', name_text: '邯郸银行金光道支行', } ] } ] } ] Array 必填

参数callback说明:

参数 说明 类型 可选值
callback 回调函数 —— 点击回调函数,返回点击项数据

开启复选框时获取选中的数据:

// treemodel3 挂载元素的id McrbHttpClient.treeModel.getChecked('treemodel3');

用法实例1:

<div id="treemodel1"></div> // 基本用法 var tree_data = [ { id : '100000', name_text : '廊坊银行总行', children : [ { id : '110000', name_text : '廊坊分行', children : [ { id : '111000', name_text : '廊坊银行金光道支行', }, { id : '112000', name_text : '廊坊银行解放道支行', children : [ { id : '112100', name_text : '廊坊银行广阳道支行', }, { id : '112200', name_text : '廊坊银行三大街支行', } ] }, { id : '113000', name_text : '廊坊银行开发区支行', } ] } ] }, { id: '200000', name_text: '邯郸银行总行', children: [ { id: '210000', name_text: '邯郸分行', children: [ { id: '213000', name_text: '邯郸银行开发区支行', }, { id: '212000', name_text: '邯郸银行解放道支行', children: [ { id: '212200', name_text: '邯郸银行三大街支行', }, { id: '212100', name_text: '邯郸银行广阳道支行', } ] }, { id: '211000', name_text: '邯郸银行金光道支行', } ] } ] } ] McrbHttpClient.treeModel.init({ ele_id:'treemodel1', style:1, width:'300px', themeColor:'#f57e00', data:tree_data, },function(e){ console.log(e); });

效果展示

用法实例2:

<div id="treemodel2"></div> // 列表多层级 var cdata = [ { id:'1', name_text:'栏目1', children:[ { id:'5', name_text:'栏目1-1', children:[] },{ id:'6', name_text:'栏目1-2', children:[ { id:'7', name_text:'栏目1-2-1', children:[] },{ id:'8', name_text:'栏目1-2-2', children:[ { id:'9', name_text:'栏目1-2-2-1', children:[] }, ] } ] } ] },{ id:'2', name_text:'栏目2', children:[ { id:'10', name_text:'栏目2-1', children:[] },{ id:'11', name_text:'栏目2-2', children:[] },{ id:'12', name_text:'栏目2-3', children:[ { id:'13', name_text:'栏目2-3-1', children:[] },{ id:'17', name_text:'栏目2-3-2', children:[] }, ] }, ] },{ id:'3', name_text:'栏目3', children:[ { id:'14', name_text:'栏目3-1', children:[] },{ id:'15', name_text:'栏目3-2', children:[ { id:'16', name_text:'栏目3-2-1', children:[] }, ] }, ] },{ id:'4', name_text:'栏目4', children:[] }, ]; McrbHttpClient.treeModel.init({ ele_id:'treemodel2', style:2, width:'500px', themeColor:'#2ecc71', toolsShow:true, isAddBtn:false, data:cdata },function(e){ console.log(e); });

效果展示

用法实例3:

<button style="background-color: transparent;padding: 5px 10px;border: 1px solid #ddd;border-radius: 4px;margin-bottom: 10px;" onclick="gettreedata()">获取选中数据</button> <div id="treemodel3"></div> // 基本用法 var tree_data = [ { id : '100000', name_text : '廊坊银行总行', children : [ { id : '110000', name_text : '廊坊分行', children : [ { id : '111000', name_text : '廊坊银行金光道支行', }, { id : '112000', name_text : '廊坊银行解放道支行', children : [ { id : '112100', name_text : '廊坊银行广阳道支行', }, { id : '112200', name_text : '廊坊银行三大街支行', } ] }, { id : '113000', name_text : '廊坊银行开发区支行', } ] } ] }, { id: '200000', name_text: '邯郸银行总行', children: [ { id: '210000', name_text: '邯郸分行', children: [ { id: '213000', name_text: '邯郸银行开发区支行', }, { id: '212000', name_text: '邯郸银行解放道支行', children: [ { id: '212200', name_text: '邯郸银行三大街支行', }, { id: '212100', name_text: '邯郸银行广阳道支行', } ] }, { id: '211000', name_text: '邯郸银行金光道支行', } ] } ] } ] // 开启复选框 McrbHttpClient.treeModel.init({ ele_id:'treemodel3', style:1, width:'400px', themeColor:'rgb(155,10,20)', ischecked:true, toolsShow:true, isAddBtn:false, data:tree_data, }); // 获取选中项数据 function gettreedata(){ console.log(McrbHttpClient.treeModel.getChecked('treemodel3')); }

效果展示

3.4.18轮播图

调用方法:McrbHttpClient.carousel.init(options);

1.参数表

id(String) 轮播图容器id
width(String) 轮播图宽度。例:"600px"
height(String) 轮播图高度。例:"300px"
arrow(String) 左右箭头显示模式。always:一直显示;hover:鼠标悬停在轮播图上时显示。
indicator(String) 轮播图下方图片指示器切换模式。click:点击切换。hover:悬停切换。
interval(String) 轮播图图片切换间隔。单位为ms。
imgs(Array[String]) 轮播图片Url数组。

2.demo

//使用方法: <div id="lunbotest"></div> <script> let options = { id: 'lunbotest', width: '600px', height: '300px', arrow: 'hover', indicator: 'hover', interval: '3000', imgs: [ './img/carousel1.png', './img/carousel2.png', './img/carousel3.png', './img/carousel4.png' ] } McrbHttpClient.carousel.init(options); </script>

3.效果展示

3.4.19自动化组件

具体使用方法说明:

  • (1)配置服务器参数;

    配置请参考如下:(如已配置请忽略)

    McrbHttpClient.conf.host = "http://127.0.0.1"

    McrbHttpClient.conf.port = "8081"

  • (2)自动化列表需配置列表操作功能按钮;

    var xxx = [btnName, btnType, fun]

    btnName按钮名称:string;btnType按钮类型:1跳转链接,0执行方法;fun执行操作;

    配置请参考如下(pc端):

    var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"];

    var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"];

    var item3 = ["删除",0,"delete({{id}})",];

    var item4 = ["说明",1,"https://smcms.ixiera.com/"];

    var options = new Array(item1,item2,item3,item4);

    配置请参考如下(移动端):

    var item1 = ["查看",1,"/auto/{{mark}}_m_view.html?id={{id}}"];

    var item2 = ["修改",1,"/auto/{{mark}}_m_edit.html?id={{id}}"];

    var item3 = ["删除",0,"delete({{id}})",];

    var item4 = ["说明",1,"https://smcms.ixiera.com/"];

    var options = new Array(item1,item2,item3,item4);

  • (3)创建自动化工具;

    请参考如下:

    let autoFormFactory = McrbHttpClient.autoFormFactory(containerId, moduleId, url)

    自动化列表:

    let autoFormFactory = McrbHttpClient.autoList(containerId, moduleId, url, options)

    参数:containerId(String):自动化表单工具容器id(统一写成autoFormContainer), moduleId(String):模型id(如图4-19所示), url(String):提交成功后跳转的url

    moduleid截图

    图4-19

  • (4)渲染表单或列表

    请参考如下:

    autoFormFactory.render(contId)

    参数contId渲染容器id

  • (5)配置面包屑

    配置面包屑内容说明:

    1.如浏览器地址中存在参数menuid=xxx,自动化工具函数会根据提供的menuid查询对应的菜单信息以及其父级信息显示;

    2.如浏览器地址中不存在参数menuid=xxx,自动化工具函数会查询当前模型信息显示;

1)、自动化表单:添加/编辑(autoFormFactory)

具体使用方法:

<!-- 配置服务器参数 --> McrbHttpClient.conf.host = "http://127.0.0.1; McrbHttpClient.conf.port = "8081"; <!-- 创建自动化表单工具 --> let autoFormFactory = McrbHttpClient.autoFormFactory(containerId, moduleId, url); <!-- 渲染表单 --> autoFormFactory.render(formId)

参数说明:

containerId(String):自动化表单工具容器id统一写成autoFormContainer;

moduleId(String):模型id(如图4-19所示);

url(String):提交成功后跳转的url;

formId:表单id;

应用实例如下:

//使用方法: <div id="autoform_container" style="width: 800px;"></div> <script> McrbHttpClient.conf.host = "http://127.0.0.1; McrbHttpClient.conf.port = "8081"; // 创建自动化工具 let autoFormFactory = McrbHttpClient.autoFormFactory('autoform_container', '60', 'index.html'); // 渲染 autoFormFactory.render('test') </script>

2)、自动化表单:数据展示(autoFormView)

具体使用方法:

<!-- 配置服务器参数 --> McrbHttpClient.conf.host = "http://127.0.0.1; McrbHttpClient.conf.port = "8081"; <!-- 创建自动化表单工具 --> let autoFormView = McrbHttpClient.autoFormView(containerId, moduleId, url); <!-- 渲染表单 --> autoFormView.render(viewId)

参数说明:

containerId(String):自动化表单工具容器id统一写成autoFormContainer;

moduleId(String):模型id(如图4-19所示);

url(String):提交成功后跳转的url;

viewId:信息显示容器id;

应用实例如下:

<div id="autoFormContainer"></div> <script> McrbHttpClient.conf.host = "http://127.0.0.1; McrbHttpClient.conf.port = "8081"; // 创建自动化工具 const autoFormView = McrbHttpClient.autoFormView('autoFormContainer',98 ,'https://mhc.ixiera.com/'); // 渲染 autoFormView.render('viewId'); </script>

3)、自动化列表(autoList/autoMobileList)

具体使用方法(pc端):

<!-- 配置服务器参数 --> McrbHttpClient.conf.host = "http://127.0.0.1; McrbHttpClient.conf.port = "8081"; <!-- 配置列表操作功能按钮 --> var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"]; var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"]; var item3 = ["删除",0,"delete({{id}})",]; var item4 = ["说明",1,"https://smcms.ixiera.com/"]; var options = new Array(item1,item2,item3,item4); <!-- 创建自动化表单工具 --> let autoList = McrbHttpClient.autoList(containerId, moduleId, url, options); <!-- 渲染表单 --> autoList.render(listId);

具体使用方法(移动端):

<!-- 配置服务器参数 --> McrbHttpClient.conf.host = "http://127.0.0.1; McrbHttpClient.conf.port = "8081"; <!-- 配置列表操作功能按钮 --> var item1 = ["查看",1,"/auto/{{mark}}_m_view.html?id={{id}}"]; var item2 = ["修改",1,"/auto/{{mark}}_m_edit.html?id={{id}}"]; var item3 = ["删除",0,"delete({{id}})",]; var item4 = ["说明",1,"https://smcms.ixiera.com/"]; var options = new Array(item1,item2,item3,item4); <!-- 创建自动化表单工具 --> let autoList = McrbHttpClient.autoMobileList(containerId, moduleId, url, options); <!-- 渲染表单 --> autoList.render(auto_mlist);

参数说明:

containerId(String):自动化表单工具容器id统一写成autoFormContainer;

moduleId(String):模型id(如图4-19所示);

url(String):提交成功后跳转的url;

options列表操作功能按钮;

listId:列表组件id;

注意:移动端搜索条件字段仅显示设置的第一个;列表显示字段仅显示设置的前两个;

应用实例如下:

<div id="autoFormContainer"></div> <script> McrbHttpClient.conf.host = "http://127.0.0.1"; McrbHttpClient.conf.port = "8081"; // var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"]; var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"]; var item3 = ["删除",0,"delete({{id}})",]; var item4 = ["说明",1,"https://smcms.ixiera.com/"]; var options = new Array(item1,item2,item3,item4); // 创建自动化工具 const autoList = McrbHttpClient.autoList('autoFormContainer',98 ,'https://mhc.ixiera.com/'); // 渲染 autoList.render('listId'); </script>

3.4.20自定义组件颜色

定义了一些css变量来控制组件颜色,这些颜色变量均有其默认值。如想在其他项目中自定义组件颜色, 只需要在该项目中建立projectname_color.css(文件名自定义)文件,在该文件中对这些颜色变量赋新值,覆盖原有的默认值即可。

注意:1. projectname_color.css中变量名必须与组件颜色变量名一致,否则无效;2. projectname_color.css需要在引用https://mhc.ixiera.com/mhc/main.js之后引用。

颜色变量表如下:

名称描述
--mcb-button-background 普通按钮背景色
--mcb-button-fontcolor 普通按钮文字颜色
--upload-btn-background 上传按钮背景色
--upload-btn-fontcolor 上传按钮文字颜色
--reset-btn-background 重置按钮背景色
--reset-btn-fontcolor 重置按钮文字颜色
--reset-btn-bordercolor 重置按钮边框颜色
--thumb-background 滚动条滑块颜色
--page-selected-background 页码按钮背景色(被选中)
--page-selected-fontcolor 页码按钮文字颜色(被选中)
--page-selected-hover-fontcolor 鼠标悬停时页码按钮文字颜色(被选中)
--page-unselected-background 页码按钮背景色(未选中)
--page-unselected-bordercolor 页码按钮边框颜色(未选中)
--page-disabled-bordercolor 页码禁用按钮边框颜色
--page-disabled-fontcolor 页码禁用按钮文字颜色
--table-bordercolor 表格边框颜色(包含内部线)
--table-thead-background 表头背景色
--table-thead-fontcolor 表头文字颜色

如果想要修改本系统的主题色,可通过修改css/cms_color.css文件中相对应的颜色值,可自定义主题色,以及按钮,列表等的颜色

3.4.21折叠面板

配置项options如下

name (String) 折叠面板item的name属性
title (String) 折叠面板item标题
content (String) 折叠面板item展开后显示的文字内容

使用实例:

const options = [ { name: 'item1', title: '测试标题一', content: '测试内容一测试内容一测试内容一测试内容一测试内容一测试内容一测试内容一测试内容一测试内容一' }, { name: 'item2', title: '测试标题二', content: '测试内容二测试内容二测试内容二测试内容二测试内容二测试内容二测试内容二测试内容二测试内容二' }, { name: 'item3', title: '测试标题三', content: '测试内容三测试内容三测试内容三测试内容三测试内容三测试内容三测试内容三测试内容三测试内容三' }, { name: 'item4', title: '测试标题四', content: '测试内容四测试内容四测试内容四测试内容四测试内容四测试内容四测试内容四测试内容四测试内容四' } ] const collapseTest = McrbHttpClient.collapse('collapseTest') collapseTest.render(options)

效果展示:

3.4.22Layout布局

使用方法:

mcb-row代表一行,mcb-col嵌套在mcb-row中。一行等分20份,mcb-span1代表占宽度的1/20,依次类推,mcb-col从左往右排列。当一行中mcb-span总数小于20时,并且在mcb-row中使用space-between类时,元素之间间隔等分。(兼容性:Edge 12, Firefox 20, Safari 9, Chrome 29, IE 11, Opera 12)

与Layout布局相关的css变量:

--layout-border-color mcb-col的边框颜色

--layout-border-width mcb-col的边框线宽度

--layout-padding mcb-col的内边距

使用实例:

<!-- 下方样式只做演示使用,可自行调整。 --> <style> .layout-container { height: 200px; width: 380px } .space-between-test { height: 100px; width: 380px; } </style> <div class="layout-container"> <div class="mcb-row" style="height: 20%;"> <div class="mcb-col mcb-span20">标题</div> </div> <div class="mcb-row" style="height: 80%;"> <div class="mcb-col mcb-span4">导航</div> <div class="mcb-col mcb-span16">内容</div> </div> </div> <p style="margin-top: 20px;">间隔等分:</p> <div class="space-between-test"> <div class="mcb-row space-between" style="height: 100%;"> <div class="mcb-col mcb-span4">1</div> <div class="mcb-col mcb-span4">2</div> <div class="mcb-col mcb-span4">3</div> <div class="mcb-col mcb-span4">4</div> </div> </div>

效果展示:

标题
导航
内容

间隔等分:

1
2
3
4

3.4.23多选下拉

基本用法:

创建实例: let multipleSelection = McrbHttpClient.multipleSelection(containerId);
containerId 装载容器的id
渲染: multipleSelection.render(options);
options.name string 字段名
options.data arrary 下来可选择数据
options.data中{key:文字,val:值}
获取 - 选中的值: multipleSelection.getValue();

<!-- 实例 --> <div id="multipleSelection_id"></div> let multipleSelection = McrbHttpClient.multipleSelection('multipleSelection_id') multipleSelection.render({ name: 'fctype', data: [ {key:'字段1', val: 1}, {key:'字段2', val: 2}, {key:'字段3', val: 3}, {key:'字段4', val: 4}, {key:'字段5', val: 5}, ] }); <!-- 打印 - 最终选中的值 --> console.log(multipleSelection.getValue());

展示:

3.4.24Steps步骤条

基本用法:

创建实例: let stepBar = McrbHttpClient.stepBar(containerId);
渲染: stepBar.render(options);
设置当前步骤数: stepBar.setCurrentVal(val);
获取当前步骤数: stepBar.getCurrentVal();
获取当前步骤 - 自定义数据: stepBar.getExtData();

参数说明:

名称类型描述
containerId string 装载容器的id
options object 步骤条配置参数

options参数说明:

名称类型描述
current number 当前步骤
waitColor string 默认颜色(未执行步骤颜色)
processColor string 当前步骤颜色
finishColor string 已完成步骤颜色
alignCenter boolean 是否居中对齐(默认false, true)
finishStatus string finish(默认,只改变颜色),success成功对勾样式
simple boolean 是否简洁版 (默认false, true时alignCenter、description失效)
iconType boolean 是否带图标(默认false, true时finishStatus失效)
direction string 显示方向(默认horizontal, vertical(纵向)/horizontal(水平);当direction=vertical时simple、alignCenter,description失效)
data arrary 步骤数据 (必填)

options.data参数说明:

名称类型描述
title string 名称(必填)
description string 描述(选填;当simple=true或direction=vertical时,description失效不显示)
icon string 默认图标(当iconType=true时必填,iconType=false时失效)
icon_process string 当前步骤图标(当iconType=true时必填,iconType=false时失效)
icon_finish string 已完成步骤图标(当iconType=true时必填,iconType=false时失效)
extData string/object/arrary 自定义数据(选填)

基础版:设置finishColor、processColor、waitColor颜色


let stepBar1 = McrbHttpClient.stepBar('steps_id1'); stepBar1.render({ current: 2, finishColor: '#59c04d', processColor: '#1afa29', waitColor: '#999999', data: [{title:'步骤1',},{title:'步骤2',},{title:'步骤3',},{title:'步骤4',},{title:'步骤5',},] }); // stepBar1.setCurrentVal(4); // console.log(stepBar1);

基础版:设置finishColor、processColor、waitColor颜色;finishStatus = 'success'


let stepBar2 = McrbHttpClient.stepBar('steps_id2'); stepBar2.render({ current: 3, finishColor: '#59c04d', processColor: '#1afa29', waitColor: '#999999', // success - finish(默认) finishStatus: 'success', data: [{title:'步骤1',},{title:'步骤2',},{title:'步骤3',},{title:'步骤4',},{title:'步骤5',},] });

基础版:设置finishColor、processColor、waitColor颜色;iconType = true带图标的步骤条


let stepBar3 = McrbHttpClient.stepBar('steps_id3'); stepBar3.render({ current: 4, finishColor: '#2ecc71', processColor: '#409eff', waitColor: '#999', iconType: true, // 带图标 data: [ {title:'步骤1', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤2', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤3', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤4', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤5', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, ] });

基础版:设置finishColor、processColor、waitColor颜色;居中对其alignCenter = true和描述description


let stepBar6 = McrbHttpClient.stepBar('steps_id6'); stepBar6.render({ current: 1, finishColor: '#2ecc71', processColor: '#409eff', waitColor: '#999', // success - finish(默认) finishStatus: 'success', alignCenter: true, data: [ {title:'步骤1', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'}, {title:'步骤2', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'}, {title:'步骤3', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'}, {title:'步骤4', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'}, {title:'步骤5', description:'几点开会艰苦环境和尽快几点开会艰苦环境和尽快几点开会艰苦环境和尽快'}, ] });

简洁版:设置finishColor、processColor、waitColor颜色;simple = true简洁版


let stepBar4 = McrbHttpClient.stepBar('steps_id4'); stepBar4.render({ current: 3, finishColor: '#59c04d', processColor: '#1afa29', waitColor: '#999999', simple: true, // finishStatus: 'success', data: [ {title:'步骤0001', description:'几点开会艰苦环境和尽快'}, {title:'步骤0002', description:'几点开会艰苦环境和尽快'}, {title:'步骤0003', description:'几点开会艰苦环境和尽快'}, {title:'步骤0004', description:'几点开会艰苦环境和尽快'}, {title:'步骤0005', description:'几点开会艰苦环境和尽快'}, ] });

简洁版:设置finishColor、processColor、waitColor颜色;simple = true简洁版;iconType = true带图标的步骤条


let stepBar5 = McrbHttpClient.stepBar('steps_id5'); stepBar5.render({ current: 2, finishColor: '#59c04d', processColor: '#1afa29', waitColor: '#999999', iconType: true, // 带图标 simple: true, data: [ {title:'步骤1', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤2', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤3', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤4', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, {title:'步骤5', icon:'wiait1.png', icon_process:'process1.png', icon_finish:'finish1.png'}, ] });

简洁版:设置finishColor、processColor、waitColor颜色;simple = true简洁版;iconType = true带图标的步骤条;extData自定义数据



简洁版:设置finishColor、processColor、waitColor颜色;direction = vertical纵向;


3.4.25VisualCharts可视化图表

基本用法:

创建实例: let visualCharts = McrbHttpClient.visualCharts(containerId);
渲染: visualCharts.render(options);
重绘赋值: visualCharts.setValue(data, xdata, ydata);

参数说明:

名称类型描述
containerId string 装载容器的id
type string 类型('pie'饼状图,'line'折线图,'bar'柱状图,默认pie)
options object 图表配置参数(选填,默认基础样式)
data arrary 数据集合(必填)
xdata arrary x轴数据集合(选填,类型type=line/bar时,有效)
ydata arrary y轴数据集合(选填,类型type=line/bar时,有效)

options参数说明:

请参考echarts可视化图表使用说明

options.data参数说明:

名称类型描述
name string 名称(必填)
data arrary 值(必填)

注释:ptions.data中也可自定义属性,自定义属性请参考echarts中option.series配置使用



饼状图 - 基础样式


let visualCharts = McrbHttpClient.visualCharts('visualCharts1'); visualCharts.render({ type: 'pie', data: [ { value: 600, name: '第一组' }, { value: 735, name: '第二组' }, { value: 580, name: '第三组' }, { value: 484, name: '第四组' }, { value: 300, name: '第五组' } ], }); <!-- 赋值 - 重绘 --> setTimeout(function(){ var setData1 = [ { value: 1, name: 'one组' }, { value: 3, name: 'two组' }, { value: 7, name: 'four组' }, { value: 9, name: 'five组' } ] visualCharts.setValue(setData1); },3000)

折线图 - 基础样式


let visualCharts2 = McrbHttpClient.visualCharts('visualCharts2'); visualCharts2.render({ type: 'line', xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: [ {name: 'Email', data:[120, 132, 101, 134, 90, 230, 210]}, {name: 'Union Ads', data:[220, 182, 191, 234, 290, 330, 310]}, {name: 'Video Ads', data:[150, 232, 201, 154, 190, 330, 410]}, {name: 'Direct', data:[320, 332, 301, 334, 390, 330, 320]}, {name: 'Search Engine', data:[820, 932, 901, 934, 1290, 1330, 1320]} ], }); <!-- 赋值 - 重绘 --> setTimeout(function(){ var setData2 = [ {name: '11', data:[220, 182, 191, 234, 290, 330, 310]}, {name: '22', data:[150, 232, 201, 154, 190, 330, 410]}, {name: '33', data:[320, 332, 301, 334, 390, 330, 320]}, {name: '44', data:[820, 932, 901, 934, 1290, 1330, 1320]} ] xdata2 = ['Mon2', 'Tue2', 'Wed2', 'Thu2', 'Fri2', 'Sat2', 'Sun2'], visualCharts2.setValue(setData2, xdata2); },5000)

柱状图 - 基础样式


let visualCharts3 = McrbHttpClient.visualCharts('visualCharts3'); visualCharts3.render({ type: 'bar', xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: [ {name: 'Email', data:[120, 200, 150, 80, 70, 110, 130]}, {name: 'Union Ads', data:[120, 200, 150, 80, 70, 110, 130]}, {name: 'Video Ads', data:[150, 232, 201, 154, 190, 330, 410]}, {name: 'Direct', data:[320, 332, 301, 334, 390, 330, 320]}, {name: 'Search Engine', data:[120, 200, 150, 80, 70, 110, 130]} ], }); <!-- 赋值 - 重绘 --> setTimeout(function(){ var setData3 = [ {name: '11', data:[120, 132, 101, 134, 90, 230, 210]}, {name: '22', data:[220, 182, 191, 234, 290, 330, 310]}, {name: '33', data:[150, 232, 201, 154, 190, 330, 410]} , {name: '55', data:[920, 832, 901, 934, 1290, 1330, 1320]} ] xdata3 = ['Mon3', 'Tue3', 'Wed3', 'Thu3', 'Fri3', 'Sat3', 'Sun3'], visualCharts3.setValue(setData3, xdata3); <!-- visualCharts3.setValue(setData3, null, ydata3); --> },5000)

3.4.26可调序列表

使用方法:

1. 创建可排序列表实例:

const sortlistTest = McrbHttpClient.sortList(containerId, cols)

其中containerId为sortlist容器的ID, cols为sortlist配置项

2. 渲染可调序列表

sortlistTest.render(dataSource)

dataSource为要渲染的数据

配置项cols的参数

key(String) 字段名称
title(String) 字段名称对应的标题

数据项dataSource格式见使用实例

使用实例:

<div id="testSortlist"></div> <script> const cols = [ { key: 'name', title: '名称', }, { key: 'age', title: '年龄', }, { key: 'type', title: '类型', }, ] const dataSource = [ { name: 'tom', age: 18, type: '学生' }, { name: 'jay', age: 28, type: '歌手' }, { name: 'jack', age: 48, type: '演员' } ] const sortlistTest = McrbHttpClient.sortList('test', cols) sortlistTest.render(dataSource) </script>

效果展示:

3.4.27常用样式说明

三角形

元素追加class样式依次为:triangle-inner-top-left, triangle-inner-top-right, triangle-inner-bottom-left, triangle-inner-bottom-right

可通过控制--triangle-background-color变量来修改三角形颜色,或自定义修改css来控制三角形的颜色




方向三角型追加class样式依次为:triangle-direction-left, triangle-direction-right, triangle-direction-top, triangle-direction-bottom

可通过控制--triangle-background-color变量来修改三角形颜色,或自定义修改css来控制三角形的颜色




外部三角型对话气泡追加class样式依次为:triangle-outside-left, triangle-outside-right, triangle-outside-top, triangle-outside-bottom

可通过控制--triangle-border-color变量来修改三角形边框颜色,或自定义修改css来控制三角形的边框颜色



默认内容外边距

通用布局内外边距:--default-padding-s,--default-padding-m,--default-padding-l,--default-margin-s,--default-margin-m,--default-margin-l

便于统一修改,以及统一界面间距的统一性



默认字体标题

通用默认字体标题:-title-font-level-first,title-font-level-two,itle-font-level-three,title-font-level-four,title-font-text

便于统一修改,以及统一界面字体大小

一级标题
二级标题
三级标题
四级标题
正文内容


默认内容显示/隐藏

通用class: 隐藏default-content-hide,显示default-content-show



默认多行溢出

通用class: 一行溢出default-one-line-overflow,两行溢出default-two-line-overflow,三行溢出default-three-line-overflow

一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出
两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出
三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出

3.4.28表单组formSet

1.使用说明:

实例化formsets对象,并进行渲染:

const formsetsIns = McrbHttpClient.formSets(containerId, options) formsetsIns.render()

实例方法:

获取表单组的所有值 formsetsIns.getValues()

getValues方法返回值结构如下:

{ code: Number, // 200: 成功 400: 必填项不能为空 500: 类型错误 data: Array, msg: String // 对应的验证信息 }

设置表单组的值 formsetsIns.setValues(data)

2.参数说明:

配置options:Array

input类型

type(string) input(必填)
name(string) 表单项name属性(必填)
label(string) 表单元素label(必填)
placeholder(string) input框placeholder属性(选填)

select类型

type(String) select(必填)
name(String) 表单项name属性(必填)
label(String) 表单元素label(必填)
placeholder(String) 下拉框未选择时,显示的提示(选填)
opts(Array) 下拉框选项对应的数据信息(必填)

opts参数

text(String) 选项显示的文字(必填)
value(String|Number) 选项的值(必填)
selected(Boolean) 改选项是否被选中(选填)

3.使用示例:

<div id="testFormsets"></div> const options = [ { type: 'input', name: 'uname', label: '用户名' }, { type: 'input', name: 'age', label: '年龄', }, { type: 'select', name: 'job', label: '职业', opts: [ {value: '', text: '请选择', selected: true}, {value: 1, text: '教师'}, {value: 2, text: '工程师'}, {value: 3, text: '医生'}, ] } ] const testFormsets = McrbHttpClient.formSets('testFormsets', options) testFormsets.render()

4.效果展示:





3.4.29列表组合

基本用法:

创建实例: let list = McrbHttpClient.listPage(containerId);
渲染: list.render(options, options2, data, callback);
分页切换触发callback回调 - 赋值更新: vlist.tableupdata(data);
设置初始化第N页,及当前页数据:list.initList(curPage, data);

参数说明:

参数名 说明 类型 可选值
options table配置列表参数(参考3.4.9) object 必填
options2 pages配置分页参数(参考3.4.10) object 必填
data 初始页数据 arrary 必填
callback (Array[Function]) 切换分页后的回调函数 Function 必填

分页切换时回调函数callback中返回curPage, start, end(curPage 当前页码,start 开始,end 结束)

分页切换 - 赋值data数据,更新table数据重新渲染list.tableupdata(data)

// 实例如下: <!-- <div id="tabledom"></div> --> // table配置列表参数(参考3.4.9) const table_op = [ { key: "name", title: "姓名", align: "center", 'width':'110px', className:'width_100', isAll:true,}, { key: "age", title: "年龄", align: "center" }, { key: "job", title: "工作", align: "center",}, { key: "action", title: "操作", align: "center", render: function (text, data) { return McrbHttpClient.tableDom.createTool( [ {type: "del", text: "删除", classname: "delBtn",}, {type: "edit",text: "修改", classname: "editBtn",}, {type: "look",text: "查看",classname: "lookBtn", }, ], data, function (e, type) { // e:点击行数据 // type:点击事件执行类型--删除、修改、查看 if (type == "del") { console.log("删除数据:"); console.log(e); } else if (type == "edit") { console.log("修改数据:"); console.log(e); } else if (type == "look") { console.log("查看数据:"); console.log(e); } } ); }, }, ]; // pages 配置分页参数(参考3.4.10) var pages_op = { pageSize: 3, //每页显示条数 totalCount: 66, //总记录数 curPage: 1, //当前页数,不设置则默认1 nav_count: 5, //显示多少个导航 } // 表格数据 const data = [ { name: "张三张三张三张三张三张三张三张三张三", age: "20", job: "经理" }, { name: "李四张三张三张三张三张三张三张三张三", age: "21", job: "总监" }, { name: "周五张三张三张三张三张三张三张三张三", age: "22", job: "实习生" }, ]; // 渲染列表整体table+pages var list = McrbHttpClient.listPage('tabledom'); list.render(table_op, pages_op, data, function(curPage, start, end){ <!-- 分页切换回调函数 --> console.log('curPage 当前页码,start 开始,end 结束'); var data= [ { name: (start+1)+"张三张三张三张三张三张三张三张三张三", age: "20", job: "经理" }, { name: (start+2)+"李四张三张三张三张三张三张三张三张三", age: "21", job: "总监" }, { name: (start+3)+"周五张三张三张三张三张三张三张三张三", age: "22", job: "实习生" }, ]; // 重新赋值 + 渲染 list.tableupdata(data) }) var ddccvv = [ { name: "1101张三张三张三张三张三张三张三张三张三", age: "20", job: "经理" }, { name: "1102李四张三张三张三张三张三张三张三张三", age: "21", job: "总监" }, { name: "1103周五张三张三张三张三张三张三张三张三", age: "22", job: "实习生" }, ] list.initList(2,ddccvv)

实例





本文档来自-microbee-http低代码软件开发平台
回到
顶部