mini-combobox 实现全选

原创已于 2023-02-01 09:02:30 修改 · 2.1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

不至于下

关注

标签

#css #html #前端

分类前端开发

于 2022-11-15 08:16:52 首次发布

本文详细解析了一个用于实现全选功能的迷你组合框（Mini ComboBox）的代码结构。关键属性包括multiSelect（允许多选）和textField、valueField（分别设置显示字段和值字段）。下拉数据采用JSONArray格式，可通过setData()方法设置。同时，介绍了如何通过CSS调整下拉项的行高。此外，还提供了示例代码展示了如何填充数据。

代码：

<div id="myid" class="mini-combobox" style="width:150px;" textField="text" valueField="id" 
    	 url=""   allowInput="true" multiSelect="true" >
     	<div property="columns" >
      		<div header="全选" field="text"></div>
     	</div>
</div>

解释：

实现全选的代码部分：

<div property="columns" >
	<div header="全选" field="text"></div>
</div>

效果就是增加了下图红圈里的内容
奇怪的图片
multiSelect=“true”：这个属性是加了左边的正方形多选框。
textField=“text”：这个属性是设置了显示内容字段。等号右边的字段名自己决定
valueField=“id”：这个属性设置内容对应的值字段。等号右边的字段名自己决定

下拉数据：

就是jsonarray格式。大概样子：

[{"id":1,"text":"wyf"},{"id":2,"text":"hww"}]

设置数据方式：1 调用setData()方法； 2 设置url,属性里放路径

var obj = mini.get("myid");  //自己的mini-combobox对象
var g1 = [{ id: 1, text: "男" }, { id: 2, text: "女"}];
var g2 = "[{ \"id\": 1, \"text\": \"男\" }, { \"id\": 2, \"text\": \"女\"}]";
var g3 = "[{ id: 1, text: \"男\" }, { id: 2, text: \"女\"}]";
obj.setData(g1); //g1或g2或g3都可以，结果一样
obj.setData(g2);
obj.setData(g3);

在这里插入图片描述

样式有关：

这个css样式能改变下拉项中的行高，其他可查看miniui.css文件。


		.mini-listbox td
		{
    		line-height:15px;
		}