【EasyUI篇】Combo自定义下拉框组件

最新推荐文章于 2024-07-21 23:51:27 发布

ooyhao

最新推荐文章于 2024-07-21 23:51:27 发布

阅读量3.6k

点赞数

文章标签： EasyUI Combo

本文链接：https://blog.csdn.net/ooyhao/article/details/82723726

版权

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

20.Combo自定义下拉框组件

这组件不可以通过class方式进行定义

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Combo</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/Combo.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
    <script>

    </script>
</head>
<body style="padding: 100px;">


<div id="box"></div>
<div id="food">
    <div style="color: #99eeb8; background: #fafafa; padding: 5px;">
        请选择一个事物
    </div>
    <div style="padding: 10px;">
        <input type="radio" name="food" value="01">
            <span>煎饼果子</span>
        <br>
        <input type="radio" name="food" value="02">
            <span>牛腩米线</span>
        <br>
        <input type="radio" name="food" value="03">
            <span>水果沙拉</span>
        <br>
        <input type="radio" name="food" value="04">
            <span>蛋黄派</span>
        <br>
        <input type="radio" name="food" value="05">
            <span>其他</span>
    </div>
</div>

    <br><br><br><br>
    <button id="btn">点击</button>

</body>
</html>

JS文件

$(function () {



    $('#box').combo({
        required:true,
        multiple:true,
        width:150,
        height:30,
        // panelWidth:150,
        // panelHeight:100,
        //设置是否可以输入
        // editable:false,
        //设置是否禁用（禁用是不可以发送值的）
        disabled:false,
        //设置只读（只读是可以发送值的）
        // readonly:true,
        //设置是否有向下的箭头
        hasDownArrow:true,
        value:'123',
        //1秒之后展示
        // delay:1000,
        onShowPanel:function () {
            //展示下拉面板时触发
            // alert('onShowPanel');
        },
        onHidePanel:function () {
            //隐藏下拉面板时触发
            // alert('onHidePanel');
        },
        onChange:function () {
            //改变值时触发
            // alert('onChange');
        }


    });

    //添加进去
    $('#food').appendTo($('#box').combo('panel'));

    $('#food input[type=radio]').click(function () {
        var v = $(this).val();
        var s = $(this).next('span').text();
        //隐藏下拉面板 hidePanel
        $('#box').combo('setValue',v).combo('setText',s).combo('hidePanel');
    });

//------------------ 方法列表 ---------------
    console.log($("#box").combo('options'));
    //返回下拉面板对象
    console.log($('#box').combo('panel'));
    //返回文本框对象
    console.log($('#box').combo('textbox'));
    // $('#box').combo('showPanel');
    $(document).click(function () {
        //销毁
        // $('#box').combo('destroy');
        //重新调整
        // $('#box').combo('resize',500);
        //显示下拉面板
        // $('#box').combo('showPanel');
        //隐藏下拉面板
        // $('#box').combo('hidePanel');
        //禁用启用
        // $('#box').combo('disable');
        // $('#box').combo('enable');
        //设置为只读
        // $('#box').combo('readonly',false);
        // $('#box').combo('validate');
        // alert($('#box').combo('isValid'));
        // $('#box').combo('clear');


    });

    $("#btn").click(function () {
        // $('#box').combo('reset');
        // alert($('#box').combo('getText'));
        // alert($('#box').combo('getValue'));
        // $('#box').combo('setText','Hello Java');
        //设置了值，但是下拉框没有随之改变
        $('#box').combo('setValue','02');
    });



});

效果图