easyui combobox复选框多选完整功能实现
2018-12-21 本文已影响0人
帅气滴糟老头
前言：前端项目用的easyui，要实现下拉框多选，带有复选框全选全不选功能，可奈何easyui combobox原来就没有复选框Σ( ° △ °|||)︴，百度一堆文章实现的也都缺胳膊少腿的，用到的方法如getEl(target, value)，在我这项目里也不能用，然后就有了这篇文章，是通用实现，而且功能实现的相对完整。
先放效果图：
当选中全选的时候勾选所有选项，取消选中全选的时候则取消勾选所有选项，而且实现了选项1到选项6只要有一个是非选中状态，那全选就不会是选中状态。
下面是具体实现代码：
页面代码
<input id="ttt" name="ttt" class="easyui-combobox">
下面实现复选框功能的js代码
/**
* 带有复选框的easyui下拉框工具方法
* @param _id input标签的id
* @param optionsJson json字符串，定义选项的内容，
* 例子：
* [
* {id: '对应于option标签的value', text: '页面显示文本'}
* ]
* @param hight 下拉框高度
*/
function combobox_checkbox(_id, optionsJson, hight) {
$('#'+_id).combobox({
data: optionsJson,
valueField: 'id',
textField: 'text',
panelHeight: hight,
multiple: true,
editable: false,
formatter: function (row) { // formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
var opts = $(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onLoadSuccess: function () { // 下拉框数据加载成功调用
// 正常情况下是默认选中“所有”，但我想实现点击所有全选功能，这这样会冲突，暂时默认都不选
$("#"+_id).combobox('clear'); //清空
// var opts = $(this).combobox('options');
// var values = $('#'+_id).combobox('getValues');
// $.map(opts.data, function (opt) {
// if (opt.id === '') { // 将"所有"的复选框勾选
// $('#'+opt.domId + ' input[type="checkbox"]').prop("checked", true);
// }
// });
},
onSelect: function (row) { // 选中一个选项时调用
var opts = $(this).combobox('options');
//当点击所有时，则勾中所有的选项
if (row.text === "全选") {
var data = $("#"+_id).combobox('getData');
for (var i = 0; i < data.length; i++) {
$('#'+data[i].domId + ' input[type="checkbox"]').prop("checked", true);
}
var list = [];
$.map(opts.data, function (opt) {
list.push(opt.id);
});
$("#"+_id).combobox('setValues', list); // combobox全选
} else {
//设置选中选项所对应的复选框为选中状态
$('#'+row.domId + ' input[type="checkbox"]').prop("checked", true);
}
},
onUnselect: function (row) { // 取消选中一个选项时调用
var opts = $(this).combobox('options');
// 当取消全选勾中时，则取消所有的勾选
if (row.text === "全选") {
var a = $("#"+_id).combobox('getData');
for (var i = 0; i < a.length; i++) {
$('#'+a[i].domId + ' input[type="checkbox"]').prop("checked", false);
}
$("#"+_id).combobox('clear');//清空选中项
} else {
// 下面是实现全选状态下取消任何一项，则取消勾选所有
//设置选中选项所对应的复选框为非选中状态
$('#'+row.domId + ' input[type="checkbox"]').prop("checked", false);
var selectedList = $("#"+_id).combobox('getValues');
// 如果“所有”是选中状态,则将其取消选中
if (selectedList[0] === "") {
// 将“所有”选项移出数组，并且将该项的复选框设为非选中
selectedList.splice(0, 1);
$('#'+opts.data[0].domId + ' input[type="checkbox"]').prop("checked", false);
}
$("#"+_id).combobox('clear');//清空
$("#"+_id).combobox('setValues', selectedList); // 重新复制选中项
}
}
});
}
调用上面的工具方法即可，调用代码如下
var tttData = [
{id: '', text: '全选'},
{id: '1', text: '选项1'},
{id: '2', text: '选项2'},
{id: '3', text: '选项3'},
{id: '4', text: '选项4'},
{id: '5', text: '选项5'},
{id: '6', text: '选项6'},
];
combobox_checkbox('ttt', tttData, 'auto');
上面是所有的实现，有不足的还请指出。
为方便大家测试，下面给出完整的html代码，可以直接拷贝保存成html文件在浏览器运行，我没找到jquery和easyui的可用cdn，要手动jquery和easyui的核心包放在同级目录下。
<html>
<head>
<!-- 引入jquery和easyui -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
复选框演示：<input id="ttt" name="ttt" class="easyui-combobox">
<a href="javascript:;" onclick="getSearchParams()">获取选中的值</a>
</body>
<script type="text/javascript">
$(function () {
// 设置地市多选下拉框内容
setCityData();
});
/**
* 获取选中的值
*/
function getSearchParams() {
var cityIn = $('#ttt').combobox('getValues');
if (cityIn[0] === '') { // 去除首位空格
cityIn.splice(0, 1);
}
console.log(cityIn);
alert(cityIn);
}
/**
* 设置地市多选内容
*/
function setCityData() {
var tttData = [
{id: '', text: '全选'},
{id: '1', text: '选项1'},
{id: '2', text: '选项2'},
{id: '3', text: '选项3'},
{id: '4', text: '选项4'},
{id: '5', text: '选项5'},
{id: '6', text: '选项6'},
];
combobox_checkbox('ttt', tttData, 'auto');
}
/**
* 带有复选框的easyui下拉框
* @param _id input标签的id
* @param optionsJson json字符串，定义选项的内容，
* 例子：
* [
* {id: '对应于option标签的value', text: '页面显示文本'}
* ]
* @param hight 下拉框高度
*/
function combobox_checkbox(_id, optionsJson, hight) {
$('#'+_id).combobox({
data: optionsJson,
valueField:'id',
textField:'text',
panelHeight:hight,
multiple:true,
editable:false,
formatter: function (row) { // formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
var opts = $(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onLoadSuccess: function () { // 下拉框数据加载成功调用
// 正常情况下是默认选中“所有”，但我想实现点击所有全选功能，这这样会冲突，暂时默认都不选
$("#"+_id).combobox('clear'); //清空
// var opts = $(this).combobox('options');
// var values = $('#'+_id).combobox('getValues');
// $.map(opts.data, function (opt) {
// if (opt.id === '') { // 将"所有"的复选框勾选
// $('#'+opt.domId + ' input[type="checkbox"]').prop("checked", true);
// }
// });
},
onSelect: function (row) { // 选中一个选项时调用
var opts = $(this).combobox('options');
//当点击所有时，则勾中所有的选项
if (row.text === "全选") {
var data = $("#"+_id).combobox('getData');
for (var i = 0; i < data.length; i++) {
$('#'+data[i].domId + ' input[type="checkbox"]').prop("checked", true);
}
var list = [];
$.map(opts.data, function (opt) {
list.push(opt.id);
});
$("#"+_id).combobox('setValues', list); // combobox全选
} else {
//设置选中选项所对应的复选框为选中状态
$('#'+row.domId + ' input[type="checkbox"]').prop("checked", true);
}
},
onUnselect: function (row) { // 取消选中一个选项时调用
var opts = $(this).combobox('options');
// 当取消全选勾中时，则取消所有的勾选
if (row.text === "全选") {
var a = $("#"+_id).combobox('getData');
for (var i = 0; i < a.length; i++) {
$('#'+a[i].domId + ' input[type="checkbox"]').prop("checked", false);
}
$("#"+_id).combobox('clear');//清空选中项
} else {
// 下面是实现全选状态下取消任何一项，则取消勾选所有
//设置选中选项所对应的复选框为非选中状态
$('#'+row.domId + ' input[type="checkbox"]').prop("checked", false);
var selectedList = $("#"+_id).combobox('getValues');
// 如果“所有”是选中状态,则将其取消选中
if (selectedList[0] === "") {
// 将“所有”选项移出数组，并且将该项的复选框设为非选中
selectedList.splice(0, 1);
$('#'+opts.data[0].domId + ' input[type="checkbox"]').prop("checked", false);
}
$("#"+_id).combobox('clear');//清空
$("#"+_id).combobox('setValues', selectedList); // 重新复制选中项
}
}
});
}
</script>
</html>
