首先作为一名老搬运师傅了 写道这种插件或者是组件分享那肯定是先上链接
https://fly.layui.com/extend/xmSelect/#download
本地数据动态赋值(不讲单选)
<body>
<div id="demo1" style="width: 218px;" class="xm-select-demo"></div>
</body>
<script src="${ctx}/assets/Plugins/xm-select.js"></script>
<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: [ //默认选中, selected: true 禁用, disabled: true
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
</script>页面效果：
远程数据动态赋值
<body>
<div id="demo2" style="width: 218px;" class="xm-select-demo"></div>
</body>
<script src="${ctx}/assets/Plugins/xm-select.js"></script>
<script src="${ctx}/assets/Plugins/axios.min.js"></script>
<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar: {show: true},
data: []
})
axios({
method: 'get',
url: '${ctx}/ShiftCorrelation/Campus',
}).then(response => {
var res = response.data;
demo2.update({
data: res,
autoRow: true,
})
});
</script>页面效果:
update 进行数据的重载 数据源可以通过自带的axios进行获取 同时也得下载axios对应的JS文件并引用 https://github.com/axios/axios/tree/v0.21.1
也可以通过ajax来获取数据源
$.ajax({
url: '${ctx}/ShiftCorrelation/Campus',
dataType: 'json',
type: 'post',
success: function (data) {
demo2.update({//update数据的重载 数据源可以通过ajax来获取或者是它本来自带的axios
data: data,
autoRow: true,//换行
})
}
});注意：xm-select赋值对数据格式是有要求的 比如:静态赋值中的{name: '张三', value: 1}和上面的远程数据动态赋值
也就是说从控制器传递的数据格式必须是{name,value}( name和value的位置前后并没有强制要求)
那么怎么样去规范传递的数据格式？？？
控制器：
@ResponseBody
@RequestMapping(value = "/Campus", produces = "application/json; charset=utf-8")
private List<CJ> Campus() {
ArrayList<CJ> arrayList = new ArrayList<CJ>();
List<CJ> selectvo = ShiftMapper.selCampus();
arrayList.addAll(selectvo);
return arrayList;
}查询数据：
<resultMap id="CampusMap" type="com.zh.util.CJ">
<result column="CampusID" jdbcType="INTEGER" property="value" />
<result column="CampusName" jdbcType="VARCHAR" property="name" />
</resultMap>
<select id="selCampus" resultMap="CampusMap">
SELECT
*
FROM
b_campus
</select>
实体类：
public class CJ {
private String name;
private Integer value;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getValue() {
return value;
}
public void setValue(Integer value) {
this.value = value;
}
@Override
public String toString() {
return "CJ [name=" + name + ", value=" + value + "]";
}
public CJ(String name, Integer value) {
super();
this.name = name;
this.value = value;
}
public CJ() {
super();
// TODO Auto-generated constructor stub
}
}用实体类来装载数据同时进行规范
同大多下拉框组件一样xm-select也提供了下拉框监听选择
监听代码：
var demo3 = xmSelect.render({
el: '#demo2',
toolbar: {show: true},
data: [],
//监听多选下拉框选择
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
console.log(arr);
}
})效果演示：
监听选择快捷拿到数据的同时，能更好的解决我们像数据提交数据获取这样的问题。
除了获取选中的值我们还可以判断此次操作是新增还是删除，或者获取此次变化的数据
var demo4 = xmSelect.render({
el: '#demo2',
toolbar: {show: true},
data: [],
//监听多选下拉框选择
on: function(data){
//arr: 当前多选已选中的数据
var arr = data.arr;
//change, 此次选择变化的数据,数组
var change = data.change;
//isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;
}
})上面是选择数据的获取，然后是数据的回填也就是赋值
<body>
<div id="demo1" style="width: 218px;" class="xm-select-demo"></div>
</body>
<script src="${ctx}/assets/Plugins/xm-select.js"></script>
<script>
var demo5 = xmSelect.render({
el: '#demo1',
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
document.getElementById('demo1-test1').onclick = function(){
demo5.setValue([ 1,3])
};
</script>代码运行结果:
注意：从上面那个小案例可以看出赋值的数据必须是数组的形式的，也就是说像我们做下拉框数据的回填时我们要注意以数组形式来进行赋值。 不是数组形式的数据进行赋值浏览器会提示
在组件的操作手册上有默认选中，禁用选项，修改提示。以及样式的修改…………
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
