啊,小雪,小雪,来了,来了。从微微的凉风中,从傍晚的喧闹中来了!像春风抖落万树梨花,像天女撒下漫天白絮……你不飘飘悠悠,因为那是骄傲的象征;你不轻轻起舞,因为那是胆小的缩影,听,沙沙沙沙、沙沙沙沙……我好像坐在屋里听那春雨的歌声。
一、说明
本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下
二、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>利用EasyUI实现多选下拉框</title>
<link rel="stylesheet" type="text/css" rel="nofollow noopener noreferrer" href="EasyUI/easyui.css" />
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$('#ddlLine').combotree({
valueField: "id", //Value字段
textField: "text", //Text字段
multiple: true,
data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}],
// url: "tree_data2.json", //数据源
onCheck: function (node, checked) {
//让全选不显示
$("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
},
onClick: function (node, checked) {
//让全选不显示
$("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", ""));
}
});
})
</script>
</head>
<body>
多选:<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;">
</select>
</body>
</html>
三、效果
四、下载
案例下载:http://wd.haodaima.com:81//201701/yuanma/ComboBox_jb51.rar
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!




