1.jsp 页面
tb:datagrid工具栏
search:搜索框div层
sss:esayui-searchbox 包含 searcher=“”属性,指定搜索方法
mm:搜索选项,选择不同搜索类型
<div id="tb">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="addUser()">添加用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="uploadUser1()">导入用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">查看/更新用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="deleteUser()">删除用户</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-redo" plain="true" οnclick="distributeRoles()">查看/分配角色</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="distributeMajors()">查看/选择专业</a>
</div>
<!-- 搜索框,放入tb中 -->
<!-- 这里的padding-top是让搜索栏向下点,也就是与"添加"等按钮对齐,但在HTML里面不好用,在jsp页面中已测试可用 -->
<div id="search" style="float: right;"> <!-- 若想调整搜索框位置,加一个div层 -->
<input id="sss" class="easyui-searchbox" searcher="searcher" prompt="请输入查询内容" style="width:300px"></input>
检索
<div id="mm" style="width:100px">
<!-- 搜索选项,若上面的初始化中有相关内容则不需要下面的内容 -->
<div data-options="name:'realName'">员工名称</div>
<div data-options="name:'userNum'">员工ID</div>
<div data-options="name:'departmentName'">部门</div>
<div data-options="name:'majorName'">专业</div>
</div>
</div>
2.js 构建初始datagrid
<span style="font-size:24px;"> </span><span style="font-size:18px;">$('#dg').datagrid({
url:'allusersShow.action',
success:function(data){
},
title:'用户列表',
iconCls:'icon-edit',//图标
width: 1000,
height: 300,
collapsible:true,//是否可折叠的
fit: true,//自动大小
// sortName: 'userId',
// sortOrder: 'asc',
remoteSort:false,
idField:'userId',
singleSelect:true,//是否单选
pagination:true,//分页控件
rownumbers:true,//行号
fitColumns:true,
toolbar: '#tb',
});
//分页
var p = $('#dg').datagrid('getPager');
$(p).pagination({
pageSize : 10,//每页显示的记录条数,默认为10
pageList : [ 5, 10, 15 ],//可以设置每页记录条数的列表
beforePageText : '第',//页数文本框前显示的汉字
afterPageText : '页 共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
//初始化搜索框和搜索框选项 ,自动获得datagrid的field值,若下面<div>中手动添加则不需要此处内容
/* var muit = "";
for ( var i = 0; i < fields.length; i++) {
var opts = $('#dg').datagrid('getColumnOption',
fields[i]);
//console.info(opts);
muit += "<div name='"+ fields[i] +"'>" + opts.title
+ "</div>";
}
;
$('#mm').html($('#mm').html() + muit);
$('#sss').searchbox({
menu : '#mm'
});
var a=$("#testa"); //若想调整搜索框位置,可以再加一个div层
//将生成好的搜索框放入工具栏
$(".datagrid-toolbar").append(a); */
$('#sss').searchbox({
menu : '#mm'
});
//将生成好的搜索框放入工具栏 (两种方法)
$('#search').appendTo('#tb.datagrid-toolbar');
});//页面初始化结束</span>
<span style="font-size:18px;">function searcher(value, name) {//value是输入搜索值,name是搜索选项类型
/* $.post('userDetailSearch.action',{searchValue:value,searchType:name},function(result){
//console.info(result);
}); */
$('#dg').datagrid({
//loadData: {'searchValue':'value','searchType':'name'},
url:'userDetailSearch.action?searchValue='+encodeURI(encodeURI(value))+'&searchType='+name,
title:'用户列表',
iconCls:'icon-edit',//图标
width: 1000,
height: 300,
collapsible:true,//是否可折叠的
fit: true,//自动大小
//sortName: 'code',
//sortOrder: 'desc',
remoteSort:false,
idField:'fldId',
singleSelect:true,//是否单选
pagination:true,//分页控件
rownumbers:true,//行号
fitColumns:true,
toolbar: '#tb',
onLoadSuccess : function(data){
if(data.total==0)
{
alert("无相关匹配信息,请重新查找!")
}
}
}); </span>
4.action后台搜索方法,返回搜索得到的json值