前天刚刚写的一篇关于《实例解析java + ajax(jQuery) + json工作过程(登录)》的文章引起了网友们的关注和好评,
自从本站的账务管理系统(个人版)开源 以后很多网友询问系统的实现方式,我一一解释……,为此今天写文章详细讲解系统功能的实现细节。
以本站的开源项目账务管理系统的“债务人”模块为例子讲解
一、效果预览

二、实现方式
基本思想就是绑定列表中的人员名称触发事件,获得当前人员的ID发送ajax请求到后台,后台根据ID查询详细信息,返回JSON数据结果至前台,前台通过对话框组件显示人员详细
1、绑定click事件到列表的人员名称 在项目中的iouser/js/iouser.js文件中有这样一个方法:
/**
* 点击名称弹出详细
*/
function regShowDetail() {
$("span[name=iouid]").unbind('click').bind('click', function(){
showDetail($(this).parent().parent().find('input[name=chk]').val());
});
}
通过regShowDetail绑定了点击人员时执行showDetail的事件,
$(this).parent().parent().find('input[name=chk]').val()
//上面这句话就是获得列表左侧的复选框的value值以便传送给后台
* 查看用户详细资料
* @param {} userId 用户ID
*/
function showDetail(userId) {
// 创建一个对话框组件
var dialog = $.weeboxs.open('showDetail.html', {
title: '正在加载用户信息……',
contentType: 'ajax',
width: 600,
height: 350,
animate: true,
clickClose: false,
type: 'wee',
showOk: false,
cancelBtnName: '关 闭',
onopen: innerShowDetail
});
//内部函数,实现债务人详细信息的载入、设置值
function innerShowDetail() {
// 获得JSON格式的数据
$.getJSON('load.do',{id : userId}, function(json) {
// 根据key设置value
for (key in json) {
if(key == 'id'){
$('#detailDiv #' + key).val(json[key]);
} else {
if(json[key] == ''){
// 没有值设置为空
$('#detailDiv #' + key).html('?');
} else if(key == 'sex'){
$('#detailDiv #' + key).html(json[key] == '0' ? '女' : '男');
} else if(key == 'group'){
if(json[key] != null) {
$('#detailDiv #' + key).html(json[key]['groupName']);
}
} else {
$('#detailDiv #' + key).html(json[key]);
}
}
}
//设置对话框标题和内容
$('#detailDiv').removeAttr('class');
dialog.setTitle('查看人员[' + json['userName'] + ']详细资料');
dialog.setContent($('#detailDiv').html());
});
}
}