【easyui】 easyui combobox 添加滚动条

主要代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>有效数据查询</title>
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" charset="utf-8" type="text/css"
    href="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/themes/icon.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/themes/icon-suit-a.css">
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-1.4.3.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
 
</head>
<body>
<div style="font-size: 12px;font-weight: bold;color:blue;;margin: 5px 5px auto;">当前位置:数据查询>>有效数据查询</div>
  <br>

    <table id="customGrid" class="easyui-datagrid" 
            style="height:360px" width="100%"
             data-options="rownumbers:true, pagination:true, 
             singleSelect:true, collapsible:true, fitColumns:true,nowrap:true,
             pageSize:10, url:'', title:'请选择下拉框查询',
             iconCls:'', toolbar:'#tb'">

    </table>
    <div id="tb" style="padding:0px;height:auto">
        <div style="margin-bottom:5px">
            部门：<input id="deptNameBox" class="easyui-combobox" 
                            data-options="
                                required:true,
                                editable:false,
                                url:'${pageContext.request.contextPath}/credit/findInfo/findAllTable.action?deptId=${groupId}',
                                method:'post',
                                valueField:'deptId',
                                textField:'deptName', 
                                
                                panelHeight:'200',
                                onSelect:function(rec){
                                    var url = '${pageContext.request.contextPath}/credit/findInfo/findInfoClass.action?deptId='+rec.deptId;
                                    $('#tableNameBox').combobox('clear');
                                    $('#tableNameBox').combobox('reload', url);
                                }
                                ">
           信息类：<input id="tableNameBox" class="easyui-combobox" 
                            data-options="
                                required:true,
                                editable:false,
                                valueField:'id',
                                textField:'infoClass',
                                panelHeight:'auto',
                                onSelect:function(rec){
                                    var url = '${pageContext.request.contextPath}/credit/findInfo/findColumns.action?issearch=1&tableId='+rec.id;
                                    var flag = 1;
                                    jQuery.post(url,function(data){
                                        var conditionHtml = '';
                                        jQuery.each(data.rows,function(i,item){
                                             
                                                if(item.type == 'date'){
                                            
                                                    conditionHtml += '<span style=\'padding-left:5px\'>'+item.nameDesc+'</span>：<input name=\''+item.name+'\' id=\''+item.id+'\' class=\'Wdate\' onFocus=\'WdatePicker({readOnly:true})\' style=\'width:100px\'>';
                                                }else{
                                                    conditionHtml += '<span style=\'padding-left:5px\'>'+item.nameDesc+'</span>：<input name=\''+item.name+'\' id=\''+item.id+'\' style=\'width:100px\'>';
                                                }
                                                flag = 0;
                                        });
                                        jQuery('#searchCondition').html('').html(conditionHtml);
                                        flag == 0 ? jQuery('#searchForm').show() : jQuery('#searchForm').hide();
                                        $('#customGrid').datagrid('loadData',{total:0,rows:[]}); 
                                        $('#customGrid').datagrid({columns:[[]],url:''});
                                    },'json');
                                    
                                }">
                                 <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="conditionSearch();">查询</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-refresh" onclick="conditionReset();">重置</a>
         <form id="searchForm" style="display:none;padding-top: 10px;">
             <span id="searchCondition"></span>
           
         </form>
        </div>
    </div>

    <script type="text/javascript">
    
        /*  function viewFormatter(value,row,index){
            var id = row.customId;
            var name = row.customName;
            return '<a href="#" onclick="viewDetail(\''+id+'\',\''+name+'\');">查看</a>';
        }
        function viewDetail(id,name){
            jQuery.post('${pageContext.request.contextPath}/query/custom/findById.action',{"customId":id},
                function(data){
                    $('#customViewGrid').datagrid({"data":data});
                    $('#customviewWin').window({'title':"定制名称："+name});
                    $('#customviewWin').window('open');
                },
                'json'
            );
        } */
        
        function conditionSearch(){
            var tableId = jQuery('#tableNameBox').combobox('getValue');
            
            var inputs = jQuery('#searchCondition').find('input');
            
            jQuery.ajax({
                    url:'${pageContext.request.contextPath}/credit/findInfo/findColumns.action',
                    data:{'tableId':tableId,'isresult':'1'},
                    async:false,
                    dataType:'json',
                    success:function(data){
                        reloadGrid(data);
                    }
            });
    
            function reloadGrid(data){
                var columns = [];
                var columnName = '';
                
                jQuery.each(data.rows,function(i,item){
                    var obj = {'field':item.name,'title':item.nameDesc};
                    columns.push(obj);
                    columnName += item.name +',';
                    
                });
                //查询参数
                var querParams = {};
                jQuery.each(inputs,function(i,item){
                    querParams[item.name] = item.value;
                });
                $('#customGrid').datagrid({
                    method:'post',
                    queryParams:querParams,
                    url:'${pageContext.request.contextPath}/credit/findInfo/conditionSearch.action?tableId='+tableId+'&columnName='+columnName,
                    columns:[columns],
                    });
            }
        }
        //重置
        function conditionReset(){
            jQuery.each(jQuery('#searchForm input'),function(i,item){
                jQuery(item).val('');
            });
        }
     
    </script>
  
   
</body>
</html>

把panelHeight 由 auto改为固定的数值就可以自动出现滚动条。

posted @ 2015-03-10 14:21  snow__wolf  阅读(891)  评论(0)    收藏  举报