jquery.easyui-使用筆記-後臺管理功能

描述：後臺管理的頁面功能.

文件準備：

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="提交" onclick="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;
	}
	
}

小結：

管理功能中列表頁面使用起來還是挺方便的,裏面有個分頁插件,另外的文檔再裏記錄吧

jquery.easyui-使用筆記-後臺管理功能

JavaScript 自己的小結點

jQuery實現Select雙向列表(保留optgroup分組)

虛擬機筆記一(網絡配置)

(Java讀寫TXT) 2萬多行的TXT分解成多個1000行的文件

根據日期產生一個日期的串號加三個隨機數

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結