easyui 与 spring MVC 的列表显示

一．Easyui的列表的显示

1.引入easyui的包文件，将下载好的easyui（我这里用的是最新的1.4.1版本）包导入到项目中，我这里将所有的文件解压出来，然后复制到了easyui文件下了

2.use_lists.jsp文件引入如下的css文件和js文件

<link href="easyui/themes/default/easyui.css" rel="stylesheet"/>
<link href="easyui/themes/icon.css" rel="stylesheet"/>
<link rel="stylesheet" href="easyui/demo/demo.css">
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>

3.use_lists.jsp文件中加入如下代码:这里就是列表显示的代码(这里是其中一种显示方法，还有一种方法是只写个空的table,其他都通过js设置)

<table id="tt" class="easyui-datagrid" style="width:99%;height:auto" url="user/searchlist" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true" pageSize="20" pageList="[20,30,50]" >

<thead>

<tr>

<th field="uuid" width="10%">用户ID</th>

<th field="userName" width="10%">用户名</th>

<th field="realName" width="10%">真实姓名</th>

//这里是转化男女的操作

<th data-options="field:'sex',width:'10%',formatter: function(value,row,index){

if (value==0){

return '女';

} else {

return '男';

}

}">性别</th>

<th field="email" width="15%">邮箱</th>

<th field="idCode" width="15%">身份证号码</th>

<th field="provinceName" field="cityName" colspan="2" width="10%" >地区-省</th>

<th field="cityName" field="cityName" colspan="2" width="9%" >地区-市</th> 

</tr>

</thead>

</table>

<div id="toolbar">

<a href="user/add" class="easyui-linkbutton" iconCls="icon-add" >添加用户</a>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="selectDet('edit')">编辑</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectDet('check')">认证</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectDet('look')">查看</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectDet('banklog')">账户管理</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="selectDet('scorelog')">积分管理</a>

</div>

 

 

4.Controller文件

UserController.java

/**

 * 进入用户列表页

 */

@RequestMapping(value="/list/{pn}",method= RequestMethod.GET)

public String getAllParam(@ModelAttribute("queryinfo")UserQueryVO queryinfo

){

return "use_lists";

}

/**在use_lists.jsp文件的<table>中配置上url="user/searchlist"，位置在上面已经标注了.我们调用上面的那个getAllParam方法，进入use_lists.jsp列表页，easyui会自动执行url中配置的user/searchlist查询出第一列的数据

 * easyui自动会查询出列表数据

 */

@RequestMapping(value="/searchlist",method= RequestMethod.POST)

@ResponseBody

public String getAllParam2(@ModelAttribute("queryinfo")UserQueryVO queryinfo, Model model,HttpServletResponse response,

 @RequestParam(required = false, defaultValue = "1") Integer page, //第几页  

 @RequestParam(required = false, defaultValue = "20") Integer rows //页数大小  

){

//总的查询条数

int count = iUserService.countQueryList(queryinfo);

//设置分页信息，在查询总数之后再设置分页信息，不影响总数的查询

Page pages = new Page(page,rows,count);

queryinfo.setPages(pages);

//根据查询条件和分页信息查询出分页数据

List<UserQueryVO> userlist = iUserService.queryList(queryinfo);

GridDataModel<UserQueryVO> gridDataModel =new GridDataModel<UserQueryVO>();

gridDataModel.setRows(userlist);

gridDataModel.setTotal(Long.parseLong(String.valueOf(count)));

return JsonUtils.objToString(gridDataModel);

}

二．在上面的列表中加上搜索条件，这里用的是spring mvc的标签和easyui的样式，也可以用普通的标签和easyui的样式

1.jsp的页面上加上下面的搜索

<form:form modelAttribute="queryinfo" id="queryform" action="user/searchlist" method="post" >

<ul class="clearfix">

<li>

<label>用户ID：</label>

<form:input path="uuid" class="easyui-textbox"/><!-- class="easyui-textbox"  easyui-combobox-->

</li>

<li>

<label>用户名：</label>

<form:input path="userName" class="easyui-textbox"/>

</li>

<li>

<label>真实姓名：</label>

<form:input path="realName" class="easyui-textbox"/>

</li>

<li>

<label>身份证：</label>

<form:input path="idCode" class="easyui-textbox"/>

</li>

//这是二级下拉的写法，不用写js,很方便，只需要配置就可以了

<li>

<label>地区-省：</label>

<input id="provinceId" name="provinceId" class="easyui-combobox" data-options="

    valueField: 'id',

    textField: 'name',

    url: 'select/plistl',//一级下拉的url请求

    onSelect: function(rec){

    var url = 'select/clist/'+rec.id;//二级下拉的url请求

    $('#cityId').combobox('reload', url);

    }"/>

</li>

<li>

<label>地区-市：</label>

<input id="cityId" class="easyui-combobox" data-options="valueField:'id',textField:'name'">

</li>

    

   

<li>

<label>手机：</label>

<form:input path="mobile" class="easyui-textbox"/>

</li>

<li>

<label for="approve">认证状态：</label>

<form:select path="isCertify" class="easyui-combobox">

<form:option value="">全部</form:option>

<form:option value="0">未认证</form:option>

<form:option value="1">认证通过</form:option> 

<form:option value="2">待认证</form:option> 

<form:option value="3">认证失败</form:option>

</form:select>

</li>

<li>

<label for="email">邮箱：</label>

<form:input path="email" class="easyui-textbox"/>

</li>

</ul>

</form:form>

<div class="btns center gt30">

    <a href="javascript:findData()" class="easyui-linkbutton" iconCls="icon-search">搜索</a> 

    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="refresh()">清空</a>

    

</div>

2.点击搜索时的js方法

 //添加搜索条件

function findData(){

    $('#tt').datagrid('load', {

uuid: $('#uuid').val(),

userName:$('#userName').val(),

realName:$('#realName').val(),

idCode:$('#idCode').val(),

provinceId:$('#provinceId').combobox('getValue'),//$('#id').combobox('getValue')获取当前选中的值;$('#id').combobox('getText')获取当前选中的文字

cityId:$('#cityId').combobox('getValue'),

mobile:$('#mobile').val(),

isCertify:$('#isCertify').combobox('getValue'),

email:$('#email').val(),

});

};

 

3.其他js的方法

//双击查看详情

 $(function(){

 $('#tt').datagrid({

 onDblClickRow: function() {

var selected = $('#tt').datagrid('getSelected');//获取选中行的所有数据，通过 $('#tt').datagrid('getSelected').属性名就可以获取相应的值

if (selected){window.location.href="user/banklog/"+selected.uuid;

}

    }

 })

 });

 

 //点击按钮查看详情

 function selectDet(url){

 var selected = $('#tt').datagrid('getSelected');

if (selected){

//window.open("user/"+url+"/"+selected.uuid);

window.location.href="user/"+url+"/"+selected.uuid;

}else{

alert("请选择一条用户信息");

}

 

 } 

//表单的清空

function refresh(){

$('#queryform').form('clear');

}