其实editor fields type 默认支持的输入类型就是w3c输入框类型。

text  
number  
password  
textarea  
select  
checkbox  
radio  
date  
time  
datetime  
readonly  
hidden  

当然这些类型远远不能满足我们的需求,我们可能需要展示部门组织架构、可能管理权限

这时我们需要展示树、需要多选,当我们需要添加很多用户自定扩展数据时又怎么办呢。editor 扩展性很高,我们完全可以自己动手。

用jstree做扩展 实现权限树

 用select2扩展实现多选

 用datatable扩展实现用户自定字段添加

实现步骤

1. 通过官方插件例子实现第一个插件。

2.根据需求实现自己的插件。

需要注意:

a. 元素定位

其他的都很简单,后续会记录我的权限树都实现。

datatables editor fields type的更多相关文章

  1. how to use datatables editor

    Basic initialisation Editor is a Create, Read, Update and Delete (CRUD) extension forDataTables that ...

  2. [Umbraco] 自定义DataType中Data Editor Setting Type

    上一篇介绍了在定义Document Type中的属性时用到的Data Type,当使用dropdown list如何调用外部数据源,可以根据提供的数据连接字符串,sql语句就能实现你想要显示的数据. ...

  3. SQL Server get SP parameters and get output fields type information

    Summary 本文主要介绍一下,SQL里面的两个很实用的两个操作: 获取存储过程的参数信息 SELECT * FROM INFORMATION_SCHEMA.PARAMETERS WHERE SPE ...

  4. JSON Editor 中文文档

    JSON Editor JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑.它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行 ...

  5. jquery Datatables 行数据删除、行上升、行下降功能演示

    Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...

  6. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  7. DataTables 入门使用

    前言简述 DataTables是一个JavaScript类库,它操作HTML表格,改变表格CSS样式,增强表格功能使其更具有交互性. DataTables依赖于JQuery类库. 入门示例 环境:Da ...

  8. [转]OBOUT ASP.NET HTML Editor - Insert HTML

    本文转自:http://www.obout.com/editor_new/sample_InsertHTML.aspx Example demonstrates how to access HTML ...

  9. jQuery DataTables 插件使用笔记

    初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...

随机推荐

  1. SYN5605型 多通道时间间隔测量仪

      SYN5605型 多通道时间间隔测量仪 时间间隔测量设备多通道时间间隔测量32路时间间隔测量仪使用说明视频链接; http://www.syn029.com/h-pd-80-0_310_6_-1. ...

  2. 布隆过滤器 - 如何在100个亿URL中快速判断某URL是否存在?

    题目描述 一个网站有 100 亿 url 存在一个黑名单中,每条 url 平均 64 字节.这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单中? 题目解析 这 ...

  3. 上手更快的网络文件系统 —— oxfs

    什么时候需要网络文件系统? 做嵌入式的同学经常会使用 NFS 讲 host 上的某个目录挂载到开发板上,方便 host 上编译构建后能直接在板子上运行,减少手工拷贝操作. 网站开发时,在 host 上 ...

  4. ZooKeeper 系列(二)—— Zookeeper单机环境和集群环境搭建

    一.单机环境搭建         1.1 下载         1.2 解压         1.3 配置环境变量         1.4 修改配置         1.5 启动         1. ...

  5. spring 5.x 系列第10篇 —— 整合mongodb (代码配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 配置文件位于com.heibaiying. ...

  6. 【React】遍历的两种方式

    1.foreach(推荐) list.forEach((item)=>{ }); eg: dataSource.forEach((item) => { const est = item.e ...

  7. 【设计模式】结构型02装饰模式(Decorator Pattern)

    装饰模式(Decorator Pattern) 意图:动态地给一个对象添加一些额外的职责.就增加功能来说,装饰器模式相比生成子类更为灵活. 主要解决:一般的,我们为了扩展一个类经常使用继承方式实现,由 ...

  8. PATB 1004 成绩排名 (20)

    1004. 成绩排名 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 读入n名学生的姓名.学号.成绩,分 ...

  9. easyui close的最大化的dialog 切换 tab 再次出现

    今天发现一个神奇的bug,easyui中的dialog在经历了d.panel('close');之后,当前的tab仍然未关闭,切换了另一tab,然后回去刚才的tab,发现已经close的dialog又 ...

  10. Git小技巧之使用Rebase命令合并提交

    想要获取更多文章可以访问我的博客 - 代码无止境. 在日常的开发过程中,我们一个功能可能会有很多次提交.而且我们公司的开发是不允许直接往公司仓库提交代码,所以需要fork到自己的仓库然后merge过去 ...