一个小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>