描述: 后台管理的页面功能.
文件准备:
jquery-1.11.3.min.js
jquery.easyui.min.js
easyui-lang-zh_CN.js
样式:
easyui.css
html eg:
<body>
<div id="tb" style="padding:5px;height:auto;">
<div style="margin-bottom:2px">
<span>
<input id="nickName" name="nickName" class="easyui-searchbox"
data-options="prompt:'请输入用户昵称',searcher:searchWxUserInfo" style="width:120px"></input>
<input id="openId" name="openId" class="easyui-searchbox"
data-options="prompt:'请输入用户OpenId',searcher:searchWxUserInfo" style="width:120px"></input>
</span>
</div>
</div>
<table id="weixinUserDataGrid" fit="true" rownumbers="true" pagination="false" singleSelect="true">
</table>
<!-- 用户维护 -->
<div id="userInfoEdit" title="用户信息" class="easyui-dialog" style="width:450px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons" data-options="modal:true">
<div style="padding:10px 30px 20px 30px" align="center">
<form id="userInfoEditForm">
<input id="recommentId" name="recommentId" type="hidden" />
<input id="clinicId" name="clinicId" type="hidden" />
<input id="staticId" name="staticId" type="hidden" />
<table cellpadding="0" cellspacing="5" border="0" width="100%">
<tr>
<td>用户昵称</td>
<td>
<input type="text" id="nickname" name="nickname" class="easyui-textbox" readonly="true"/>
</td>
</tr>
<tr>
<td>用户OPENID</td>
<td>
<input id="openid" name="openid" class="easyui-textbox" readonly="true" />
</td>
</tr>
<tr>
<td>用户分组</td>
<td>
<select id="sltWxGroups" name="groupid">
<option value='-1' selected="selected">-请选择-</option>
</select>
</td>
</tr>
</table>
<div class="btn">
<div style="text-align:center;padding:5px">
<input type="button" id="saveOrUpdatesubmit" style="width:50px;height:30px" value="提交" οnclick="saveUserInfo()"/>
</div>
</div>
</form>
</div>
</body>
javascript eg:
$(function() {
findGroups();
createTable();
});
var wxGroups = null;
function flagSexFormat(value,row,index){
if (row.sex>0){
return '男';
} else {
return '女';
}
}
function groupNameFormat(value,row,index){
var groupName = "未分组";
if(row.groupid>0){
$.each(wxGroups,function(k,m){
if(row.groupid == m.id){
groupName = m.name;
}
});
}
return groupName;
}
function searchWxUserInfo(){
$('#weixinUserDataGrid').datagrid('load',{
nickName: $('#nickName').val(),
openId: $('#openId').val()
});
}
function findGroups(){
$.ajax({
async:false,
type:"POST",
url: path+"/weixin/menu/findGroups.do",
data:{},
error: function(request) {
alert("系统繁忙,请稍后再试!");
},
success: function(data) {
if(null != data.result){
wxGroups = data.result.groups;
$.each(wxGroups,function(k,m){
$("#sltWxGroups").append('<option value="'+m.id+'">'+m.name+'</option>');
});
}
}});
}
function createTable(){
$("#weixinUserDataGrid").datagrid({
url : path+'/weixin/userInfo/userList.do',
method : 'POST',
loadMsg : '数据加载中,请稍后……',
fitColumns : true,
rownumbers : true,
pagination : true,
remoteSort : false,
sortName : '',
sortOrder : '',
selectOnCheck : true,
striped:true,
singleSelect : true,
pageSize : 20,//每页显示的记录条数,默认为10
pageList : [ 5, 10, 15, 20 ],//可以设置每页记录条数的列表
toolbar:'#tb',
frozenColumns:[[
{
field : 'ck',
checkbox : true
}
]],
columns : [ [
{
field : 'openid',
title : 'OpenId',
sortable : false,
align : 'center'
},
{
field : 'nickname',
title : '用户昵称',
sortable : false,
align : 'center',
width : '150'
},
{
field : 'sex',
title : '性别',
sortable : false,
align : 'center',
width : '60',
formatter : flagSexFormat
},
{
field : 'headimgurl',
title : '用户头像',
sortable : false,
align : 'center'
},
{
field : 'city',
title : '所在城市',
sortable : false,
align : 'center',
width : '120'
},{
field : 'province',
title : '所在省份',
sortable : false,
align : 'center',
width : '120'
},{
field : 'country',
title : '所在国家',
sortable : false,
align : 'center',
width : '120'
}, {
field : 'subscribe',
title : '是否关注',
sortable : false,
align : 'center',
width : '80'
} , {
field : 'subscribeTime',
title : '关注时间',
sortable : false,
align : 'center'
} , {
field : 'groupid',
title : '分组ID',
sortable : false,
align : 'center',
formatter : groupNameFormat
}, {
field : 'remark',
title : '备注',
sortable : false,
align : 'center',
width : '80'
}
] ],
onDblClickRow: function (rowIndex, rowData) {
updateUserInfo();
}
});
}
function updateUserInfo(){
$("#saveOrUpdatesubmit").attr("disabled",false);
var row = $('#weixinUserDataGrid').datagrid('getSelected');
if (row) {
$('#userInfoEditForm').form('clear');
$("#userInfoEdit").window('open');
$('#userInfoEditForm').form('load', row);
$("#sltWxGroups").val(row.groupid);
} else {
$.messager.alert('警告', '请先选择一条数据!', 'warning');
}
}
function saveUserInfo(){
var groupid = $("#sltWxGroups").find("option:selected").val();
if('' == groupid || groupid<0){
alert("请选择用户分组");
return;
}
$.ajax({
type:"POST",
url: path+"/weixin/userInfo/updateUserInfo.do",
data:$('#userInfoEditForm').serialize(),
error: function(request) {
alert("系统繁忙,请稍后再试!");
},
success: function(data) {
if(data.status=='SUCCESS'){
$.messager.show({
title : 'Success',
msg : '操作成功'
});
$('#weixinUserDataGrid').datagrid('reload');
}else{
alert(data.errorMsg);
}
}});
}
Java eg:
package com.XXXXX.weixin.follower.controller;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.XXXXX.base.model.EasyUIDataGridModel;
import com.XXXXX.common.json.JsonResponse;
import com.XXXXX.weixin.base.service.WxBaseService;
import com.XXXXX.weixin.follower.model.WxUserInfo;
import com.XXXXX.weixin.follower.service.WxUserInfoService;
@Controller
public class WxUserInfoController {
// private static Logger logger = Logger.getLogger(WxUserInfoController.class);
@Autowired
private WxUserInfoService wxUserInfoService;
@Resource
private WxBaseService wxBaseService;
@RequestMapping("weixin/userInfo/userList")
@ResponseBody
public EasyUIDataGridModel<WxUserInfo> userList(HttpServletRequest request,HttpServletResponse response){
WxUserInfo wxUserInfo = new WxUserInfo();
String nickName = request.getParameter("nickName");
String openId = request.getParameter("openId");
String wxId = (String)request.getAttribute("wxId");
String pageNoStr = request.getParameter("page");
String pageSizeStr = request.getParameter("rows");
wxUserInfo.setWxId(wxId);
wxUserInfo.setNickname(StringUtils.isNotBlank(nickName)?nickName:null);
wxUserInfo.setOpenid(StringUtils.isNotBlank(openId)?openId:null);
int pageNo=1;
int pageSize=20;
if(StringUtils.isNotBlank(pageNoStr)){
pageNo = Integer.parseInt(pageNoStr);
}if(StringUtils.isNotBlank(pageSizeStr)){
pageSize = Integer.parseInt(pageSizeStr);
}
EasyUIDataGridModel<WxUserInfo> userList = wxUserInfoService.getWxUserInfoList(wxUserInfo,pageNo,pageSize);
return userList;
}
@RequestMapping("weixin/userInfo/list")
public String toClinicInsertBatch(HttpServletResponse response){
return "weixin/user/weixinUserList";
}
@RequestMapping("weixin/userInfo/updateUserInfo")
@ResponseBody
public JsonResponse<String> updateUserInfo(WxUserInfo wxUserInfo,HttpServletRequest request){
wxUserInfo.setWxId(request.getAttribute("wxId").toString());
return wxUserInfoService.updateUserInfo(wxUserInfo);
}
}
public class EasyUIDataGridModel<T> {
long total;
List<T> rows;
public long getTotal() {
return total;
}
public List<T> getRows() {
return rows;
}
public void setTotal(long total) {
this.total = total;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
}
小结:
管理功能中列表页面使用起来还是挺方便的,里面有个分页插件,另外的文档再里记录吧