• easyui combox


    附:easyui 文档连接-http://www.jeasyuicn.com/api/docTtml/index.htm

    1,静态数据,可直接通过data传递json (text-显示值 value-后台实际值)

     <input id="bayonetid" name="bayonetid" 
                             class="easyui-combobox search-input"
                                data-options="
                                        valueField:'value',
                                        textField:'text',
                                        panelHeight:'auto',
                                        data: [{
                                            text: '全部',
                                            value: ''
                                        }]"/>
                        </td>

    2,动态数据,后台取数据

      a:后台定义json返回格式(直接将CombOption  list 转化为json返回即可)

    public class CombOption extends BaseDto {
        private String text;
        private String value;
        private boolean checked;
    //getter and setter
    }
    valueField,textField 分别与后台json数据的text,value对应
    <input class="easyui-combobox search-input"
                                name="carWayCode"
                                data-options="
                                        url:'${contextPath}/sys/param/combParams.do?typeCode=1001',
                                        method:'get',
                                        valueField:'value',
                                        textField:'text',
                                        panelHeight:'auto'"/>

    3,联动下拉框

    ------选择单位名称 根据选择值 变换 点位名称可选值

    <td><label>单位名称:</label></td>
                        <td>
                            <input name="areaid" id="areaid" />
                        </td>
    
                        <td><label>点位名称:</label></td>
                        <td>
                         
                         <input id="bayonetid" name="bayonetid" 
                             class="easyui-combobox search-input"
                                data-options="
                                        valueField:'value',
                                        textField:'text',
                                        panelHeight:'auto',
                                        data: [{
                                            text: '全部',
                                            value: ''
                                        }]"/>
                        </td>
                //区域 卡口 联动选择框
                var combJson =  [{ "value":"", "text":"全部"  }];
                
                    $("#areaid").combobox({   
                        url:'${contextPath}/sys/param/combParams.do?typeCode=1008',
                        method:'get',
                        valueField:'value',
                        textField:'text',
                        panelHeight:'auto',
                        onSelect: function(rec){
                            $('#bayonetid').combobox('clear');
                    //areaid rec.value 为所选值
    if(rec.value==''){ $('#bayonetid').combobox('loadData',combJson); }else{ var url ='${contextPath}/sys/param/combParams.do?typeCode=1009&pcode='+rec.value; $('#bayonetid').combobox('reload',url); } } });
  • 相关阅读:
    MYSQL学习中
    正则相关记录
    JS前台相关
    .net 时间格式
    SQL问题整理
    IIS 错误
    小型文件系统(littlefs)
    三极管NPN和PNP开关电路
    事件EVENT与waitforsingleobject的使用
    UpdateData(TRUE)与UpdateData(FALSE)的使用
  • 原文地址:https://www.cnblogs.com/china2k/p/4135332.html
Copyright © 2020-2023  润新知