Easyui复选框 combobox

最新推荐文章于 2024-09-03 14:39:23 发布

阁下大名

最新推荐文章于 2024-09-03 14:39:23 发布

阅读量750

点赞数

分类专栏： easyui 前端

本文链接：https://blog.youkuaiyun.com/z19799100/article/details/105949064

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

easyui

2 篇文章

订阅专栏

本文介绍如何使用EasyUI框架实现下拉复选框的功能，包括加载数据、设置选项以及选择和取消选择的事件处理。通过示例代码详细展示了如何配置下拉复选框的样式和行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：这里演示的下拉复选框的选择

<input type="hidden" id="s_string_like_rwlb" name="s_string_like_rwlb"/>
<input type="hidden" id="hf_rwlbmc" name="hf_rwlbmc"/>
<input class="easyui-combobox" id="yjrw" name="yjrw" type="text" style="width: 145px;">

$(function() {
    loadUI();//选择抽查类型
    loadRwlbInfos('');//加载抽查类型
});
//加载选择框的数据
function loadRwlbInfos(yjrw) {
    $.post(basePath + "/admin/code/listCodeByMzjc", { //注意这里要写你自己的接口地址和相应的参数
	prefix : 'RL',
	type : '1',
	code : ''
    }, function(data) {
	if (data.msg == 'OK') {
	    var codedata = [];
	    for (var i = 0; i < data.list.length; i++) {
		codedata.push({
		    "text" : data.list[i].description,
		    "id" : data.list[i].code
	    });
	}
	$("#yjrw").combobox("loadData", codedata);
	if (yjrw != '') {
	    $("#yjrw").combobox("setValues", yjrw.split(','));
	} else {
	    $("#yjrw").combobox("setValues", '');
	}
      }
    }, 'json');
}
//选择
function loadUI(){
    $("#yjrw").combobox({
	valueField:'id',
	textField:'text',
	multiple:true, 
	editable:false, 
	formatter: function(row){
	    var opts = $(this).combobox('options');
	    return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField];
	},
        onSelect: function (row) {
            var options = $(this).combobox('options');
            var el = options.finder.getEl(this, row[options.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', true);
            if(row.id!=''){
		$('#s_string_like_rwlb').val($('#yjrw').combobox('getValues'));
		$('#hf_rwlbmc').val($('#yjrw').combobox('getText'));
            }
        },
        onUnselect: function (row) {
            console.log(row);
            var options = $(this).combobox('options');
            var el = options.finder.getEl(this, row[options.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', false);
            if(row.id!=''){
            	$('#s_string_like_rwlb').val($('#yjrw').combobox('getValues'));
            	$('#hf_rwlbmc').val($('#yjrw').combobox('getText'));
            }
        }
	});
}

效果图