easyUI下拉框表格扩展(实现搜索功能)[easyUI+java]

一个小demo:easyUI下拉框表格扩展(实现搜索功能)

下拉框表格里由于数据过多,需要有一个搜索来快速定位到用户想要的数据;

效果图:

目录结构:

html部分代码:

<table width="500">
	<tr>
		<td>引用:</td>
        <td class="height=25;width=350">
        	<div style="width:350px;height:20px;">
           	<select  id="queryTableName" name="tableName" class="easyui-combogrid" required="true" missingMessage="该项为必填!"></select>  
        	</div>
        </td>
	</tr>
</table>

js代码:

$(function(){
	var html = '<div id="reportComboGridTb">';
	html += '<form id="reportComboGridTbform">';
	html += '<div style="padding-left: 5px;display: inline-block;"><label>报表编码或名称:</label><input id="queryReportCodeOrReportName" class="easyui-textbox"style="width:96px;"data-options="prompt:\'报表编码/报表名称\'"/></div>';
	html += '<div style="padding-left: 5px;display: inline-block;"><label>报表类型:</label><select id="reportDisplayTypeComboBox"name="reportDisplayType"class="easyui-combobox"style="width:96px;"data-options="prompt:\'报表类型\'"></select>';
	html += '<div style="padding-left: 1px; display: inline-block;"><form>';
	html += '<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:\'icon-search\'" id="queryReport">查询</a>';
	html += '<a href="javascript:void(0);" οnclick="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:\'icon-redo\'" id="resetBtn">重置</a>';
	html += '</div>';
	html += '</div>';
	$('body').append(html);
	$.parser.parse('#reportComboGridTb');
	
	//报表类型的下拉框
	$('#reportDisplayTypeComboBox').combobox({
		data:[{    
		    "value":'',    
		    "text":"--报表类型--"   
		},{    
			"value":0,    
			"text":"表格"   
		},{    
			"value":1,    
			"text":"图表"     
		},{    
			"value":2,    
			"text":"html"      
		},{    
			"value":3,    
			"text":"地图"     
		}]  

	})
	
	$('#queryTableName').combogrid("reset");
	$('#queryTableName').combogrid({  
        panelWidth: '500px',
        width: '200px',
		fit : true,
        idField: 'id',              //ID字段    
        textField: 'reportName',    //显示的字段    
        fitColumns : true,
		ctrlSelect : true,
        striped: true,  
        editable: false,  
        pagination: true,           //是否分页  
        pageList : [ 5,10,15 ],
		pageSize : 10,
		toolbar : '#reportComboGridTb',
        rownumbers: true,           //序号  
        collapsible: true,         //是否可折叠的  
        method: 'post',
        columns: [[
                   { field:'reportCode', title: '报表编码', width: '30%' ,align:'left'},
                    { field:'reportName', title: '报表名称', width: '50%' ,align:'left'},
                ]],
        onSelect:function (){
        	var reportName=$('#queryTableName').combogrid('grid').datagrid('getSelected').reportName;
        	$('#queryTableName').combogrid("setValue", reportName);
        },
        emptyMsg : '未找到相应数据!',
        onLoadSuccess : function(data) {
			var opts = $(this).combogrid('grid').datagrid('options');
			var vc = $(this).combogrid('grid').datagrid('getPanel').children('div.datagrid-view');
			vc.children('div.datagrid-empty').remove();
			if (!$(this).combogrid('grid').datagrid('getRows').length) {
				var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
				d.css({
					position : 'absolute',
					left : 0,
					top : 50,
					width : '100%',
					fontSize : '14px',
					textAlign : 'center'
				});
			}
		}, 
        url:'http://localhost:8080/br/reportInfo/reportData.do'
	});
	//点击搜索
	$('#queryReport').click(function(){
		var content=$('#queryReportCodeOrReportName').textbox('getValue');
		var reportDisplayType=$('#reportDisplayTypeComboBox').combo('getValue');
		$('#queryTableName').combogrid('grid').datagrid('load',{
			content:content,
        	reportDisplayType:reportDisplayType 
		});
	});
	//点击重置
	$('#resetBtn').click(function(){
		$('#queryReportCodeOrReportName').textbox("reset");
		$('#reportDisplayTypeComboBox').combobox("reset");
	});
	
	 
});

java Controller代码:

@Controller
@RequestMapping ("/reportDisplayInfo")
public class ReportDisplayInfoController
{
    private final Log _logger = LogFactory.getLog (ReportDisplayInfoController.class);
    // @Resource (name = "reportDisplayInfoService")
    // private IReportDisplayInfoService _reportDisplayInfoService;
    @Autowired
    private IReportDisplayInfoService _reportDisplayInfoService;

    // 分页查询
    @RequestMapping ("/getListReportDisplayInfo")
    @ResponseBody
    public String getReportDisplayInfo (HttpServletRequest request, HttpServletResponse response)
    {
        try// 设置编码集
        {
            request.setCharacterEncoding ("utf-8");
            response.setCharacterEncoding ("utf-8");
        }
        catch (UnsupportedEncodingException e)
        {
            e.printStackTrace ();
        }
        String displayName = request.getParameter ("displayName");
        String displayCode = request.getParameter ("displayCode");
        // 获取分页页数
        String pageNumber = request.getParameter ("pageNumber");
        // 获取分页每页数据条数
        String pageSize = request.getParameter ("pageSize");
        // 如果未获取到行数，则设置默认每页20条数据
        if (StringUtil.isEmpty (pageSize) || "NaN".equals (pageSize))
        {
            pageSize = "10";
        }
        // 如果未获取到页数，则设置默认为第一页
        if (StringUtil.isEmpty (pageNumber) || "NaN".equals (pageNumber))
        {
            pageNumber = "1";
        }
        int rows = Integer.parseInt (pageSize);
        int page = Integer.parseInt (pageNumber);
        int offset = rows * (page - 1);
        int limit = offset + rows - 1;
        ReportDisplayInfo reportDisplayInfo = new ReportDisplayInfo ();
        reportDisplayInfo.setDisplayCode (displayCode);
        Map param = new HashMap ();
        param.put ("displayName", displayName);
        param.put ("displayCode", displayCode);
        Integer totle = _reportDisplayInfoService.queryDataCount (param); // 得到总页数
        param.put ("startNumber", String.valueOf (offset));
        param.put ("endNumber", String.valueOf (limit));
        List <ReportDisplayInfo> list = _reportDisplayInfoService.queryReportDisplayInfoByPage (param);
        Map <String, Object> jsonMap = new HashMap <String, Object> ();

        jsonMap.put ("total", totle);// total键
        jsonMap.put ("rows", list);// rows键 存放每页记录 list
        JsonConfig config = new JsonConfig ();
        config.registerJsonValueProcessor (Date.class, new JsonDateValueProcessor ("yyyy-MM-dd HH:mm:ss"));
        return JSONArray.fromObject (list, config).toString ();
    }

分页sql:

<!-- 分页查询 -->
	<select id="queryReportDisplayInfoByPage" 
		parameterType="java.util.Map" 
		resultType="ReportDisplayInfo">
			select *  
		       from (SELECT ROWNUM rn,T.* 
					from  (select 
					  <include refid="reportDisplayInfo" /><!--这里是引用了字段别名,保证与java实体类的属性一致,实际就是查所有-->
					  from BR_ReportDisplayInfo 
					  	<where>
				         	<if test="displayCode!=null and displayCode!=''">  
				                and REPORTDISPALYCODE = #{displayCode} 
				            </if>  
				            <if test="displayName!=null and displayName!=''">  
				                and REPORTDISPALYNAME like '%'||#{displayName}||'%'  
				            </if> 
					    </where>
					  order by updateTime DESC)T
				<![CDATA[where ROWNUM<=#{endNumber}) 
		      where rn >=#{startNumber}]]>
	</select>

serivce什么的就不摆了,至少我自己看够了