xm-select 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
xm-select 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
xm-select 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
xm-select 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
xm-select 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 Apache
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Web框架
开源组织
地区 国产
提 交 者 MapleMei
适用人群 未知
收录时间 2019-11-26

软件简介

介绍


始于Layui, 下拉选择框的多选解决方案

前身formSelects, 由于渲染速度慢, 代码冗余, 被放弃了

`xm-select`使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展

文档地址

支持功能

国际化 - 中文/英文
多选
单选
重复选
分组
工具条
创建条目
显示模式
搜索模式 (本地数据过滤, 远程搜索)
分页模式
下拉树
下拉任意 - 可以自己写html


软件架构


1. 引入第三方preact库, 利用jsx渲染页面结构
2. 使用webpack进行打包


快读上手

直接使用

1. 引入 `dist/xm-select.js`
2. 写一个`<div id="demo1"></div>`
3. 渲染
    var demo1 = xmSelect.render({
        el: '#demo1', 
        data: [
            {name: '水果', value: 1, selected: true, disabled: true},
            {name: '蔬菜', value: 2, selected: true},
            {name: '桌子', value: 3, disabled: true},
            {name: '北京', value: 4},
        ],
   })

 

二次开发

1. git clone https://gitee.com/maplemei/xm-select.git
2. cd xm-select
3. yarn 或者 npm install

 

一个小栗子

<!-- 占位 -->
<div id="demo1"></div>


<!-- 引入插件 -->
<script src="../dist/xm-select.js" type="text/javascript" charset="utf-8"></script>
<!-- 渲染页面 -->
<script type="text/javascript">
    var demo1 = xmSelect.render({
        // 这里绑定css选择器
        el: '#demo1', 
        // 渲染的数据
        data: [
            {name: '水果', value: 1, selected: true, disabled: true},
            {name: '蔬菜', value: 2, selected: true},
            {name: '桌子', value: 3, disabled: true},
            {name: '北京', value: 4},
        ],
    })
    
    // 变量, demo1 可以通过API操作
    // 获取选中值, demo1.getValue();
    // 设置选中值, demo1.setValue([{ name: '动态值', value: 999 }])
    // ...
</script>

相关

支持IE吗

简单适配IE10以上的版本, 如有其它兼容性问题, 请加群反馈

为什么没有css文件

已经内置到js代码中了, 直接引入`xm-select.js`即可使用

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
01/19 16:32

xm-select v1.2.2 已经发布,多选解决方案

xm-select v1.2.2 已经发布,这是一个多选解决方案。 此版本更新内容包括: 新增 新增配置 model.type: fixed, 切换为fixed布局模式 体验传送门 新增实例方法calcPosition, fixed布局模式下重新计算位置 Bug fixes 修改直接设置父节点无法选中的问题 修改非严格模式下设置父节点, 子节点受影响 修复渲染失败页面监听错误的问题 修改数据重复时分组错乱的问题 详情查看:https://gitee.com/maplemei/xm-select/releases/v1.2.2...

1
4
发表了资讯
2020/11/27 19:22

xm-select v1.2.1 已经发布,多选解决方案

xm-select v1.2.1 已经发布,多选解决方案 此版本更新内容包括: 新增 新增配置enableKeyboard, 用于控制是否使用键盘操作, 用于取消因为键盘事件带来的性能影响 tree模式新增配置clickExpand, 是否点击节点即展开节点 tree模式新增配置clickCheck, 是否点击节点即选中节点 Bug fixes [紧急修复]tree模式下节点超过2层, 父节点半选状态异常 详情查看:https://gitee.com/maplemei/xm-select/releases/v1.2.1...

0
2
发表于大前端专区
2020/11/26 18:21

xm-select v1.2.0 已经发布,多选解决方案

xm-select v1.2.0 已经发布,这是一个多选解决方案,此版本更新内容包括: 新增 图标自定义 新增实例方法getTreeValue, 用于获取树结构下的父节点和半选节点 新增实例方法changeExpandedKeys, 用于操作树结构的节点展开状态 新增实例方法enable, disable, 动态操作选项的启用禁用 新增配置layReqText, 表单验证, 同layui的lay-reqText 新增全局方法arr2tree, 用于把列表数据转化为树状结构 Bug fixes 修复分页模式下的上一页下一...

1
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2020/11/25 17:24

layui xm-select 多选解决方案

分享一个layui select多选解决方案: https://maplemei.gitee.io/xm-select/#/component/install 官网扩展组件地址:

0
0
发表于DevOps专区
2014/05/05 14:43

xm list执行失败

现象: 机器启动以后,进程里有xend,但是执行xm list报错: Xen won't start after it had been working 执行xm log也一样,到/var/log/xen/xend.log下看日志,报: ERROR (SrvDaemon:347) Exception starting xend (no element found: line 1, column 0) 处理 备份/var/lib/xend/目录 删除/var/lib/xend/以及子目录下的所有xml文件,不删除目录,然后重启xend /etc/init.d/xend restart 再执行xm list不报错。...

0
0
发表了博客
2013/09/03 11:38

linux xm list State

Name ID Mem(MiB) VCPUs State Time(s) Domain-0 0 23312 8 r----- 321563.3 centos5u4_x86_64_xen_85.245_run 3 4095 2 -b---- 497182.0 centos5u4_x86_64_xen_85.246_run 18 4096 2 -b---- 122320.8 centos5u4_x86_64_xen_85.247_run 21 4096 2 r----- 526850.8 centos5u4_x86_64_xen_85.248_run 13 4096 2 -b---- 626534.4 centos5u4_x86_64_xen_85.249_run 23 4096 2 -b---- 61755.9 centos5u4_x86_64_xen_85.250_run 25 40...

0
0
发表了博客
2013/07/01 12:48

xen虚拟机管理工具xm与virsh用法

1. xm命令 可以使用xm 命令来启动停止虚拟机启动虚拟机命令如下: xm create vm1 #其中vm1 为虚拟机的配置文件,位于/etc/xen/vm/vm1 xm create -c vm1 #如果需要启动控制台,则可以运行命令 xm list #可以列出所有的虚拟机 xm console <domid> #可以显示某虚拟机的控制台 xm reboot <domid> #可以重起id 为domid 的虚拟机 xm shutdown <domid> #可以关闭id 为domid 的虚拟机 xm destroy <domid> #可以销毁id 为domid 的虚拟机 ...

0
0
发表于云计算专区
2015/01/27 16:38

xm创建xen精简小linux虚拟机

xen管理工具有xl 和xm xen版本是4.1以前使用xm/xend 以后使用xl 具体请看http://smilejay.com/2012/03/xl_or_xm/ xen虚拟机管理工具xm与virsh http://xen虚拟机管理工具xm与virsh用法 [root@kcw data]# dd if=/dev/zero of=vm02.img oflag=direct bs=1M seek=2048 count=1  #创建一个基于稀疏格式的磁盘镜像,大小2G 记录了1+0 的读入 记录了1+0 的写出 1048576字节(1.0 MB)已复制,0.00701008 秒,150 MB/秒 格...

0
0
发表了博客
2019/07/19 21:38

爬虫之突破xm-sign校验反爬

喜马拉雅 网页分析 - 打开我们要爬取的音乐专辑https://www.ximalaya.com/ertong/424529/ - F12打开开发者工具 - 点击XHR 随便点击一首歌曲会看到存储所有歌曲的地址【json格式】 - 正常情况下我们直接用requests请求上面的地址就可以直接获取歌曲的所有信息 - 我们拿着上面获取的地址向浏览器发起请求,发现没有返回任何信息 - 我们查看请求头中的信息发现有一个xm-sign参数,值为加密后的字符串,就是这个参数使我们获取不到...

0
0
发表了博客
2011/11/18 09:34

使用字符工具xm管理xen保存、停止和暂停

目的:通过xm命令方便管理xen虚拟机。 命令列表: xm list:所有已知的虚拟机列表 xm create:启动一个非托管的虚拟机 xm top:提供所有虚拟机的状态概貌 xm console:打开控制台管理虚拟机 xm new:添加虚拟机到Xenbase托管环境 xm start:从Xenbase托管环境启动虚拟机 xm destroy:像关掉电源那样关闭虚拟机 xm shutdown:正确地关掉虚拟机 xm reboot:重新启动虚拟机 xm pause:暂停虚拟机的活动而不释放使用的内存资源 xm u...

0
1
发表了博客
2019/12/24 16:45

List的Select 和Select().tolist()

List<Person> delp = new List<Person> { new Person{ Id=1,Name="小明1",Age=11,Sign=0 }, new Person{ Id=2,Name="小明2",Age=12 ,Sign=0}, }; delp.Select(u => { u.Sign = 1; return u; }); delp.Select(u => { u.Sign = 1; return u; }).ToList(); 只用select时 delp中元素sign的值并没有变,但是当tolist之后,sign的值变成了1;...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
16 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部