jquery zTree树开发实例之点击树节点获取节点信息显示到表格中

效果图：

数据库表结构：

代码：

jsp代码：

<div data-option="region:'south',border:true"
style="width:80%;height:80%">
<div id="vipTable"></div>


</div>

js代码：

var selectedNode=false;
var setting = {
data : {
simpleData : {
enable : true
}
},
callback : {
onClick : zTreeOnClick,
beforeClick : zTreeBeforeClick
}
};
function zTreeOnClick(event, treeId, treeNode) {
selectedNode = treeNode;
var vipName = treeNode.name;
var vipWxid = treeNode.id;
var vipMobile = treeNode.mobile;
var vipType = treeNode.type;
var vipBirthday = treeNode.birthday;
var vipImage = treeNode.mage;
var vipCash = treeNode.cash;
var vipUpdatetime= treeNode.updatetime;
$('#vipTable').datagrid({
rownumbers : true,
idField : 'id',
fitColumns : true,
singleSelect : true,
fit : true,
pagination : true,
border : false,
columns : [ [
{title : '会员姓名',field : 'Name',align : 'center'},
{title : '微信id',field : 'Wxid',align : 'center'},
{title : '生日',field : 'birthday',align : 'center'},
{title : '手机号',field : 'phone',align : 'center'},
{title : '图片',field : 'image',align : 'center'},
{title : '金额',field : 'cash',align : 'center'},
{title : '更新日期',field : 'updatetime',align : 'center'}
] ],
data : [ {
Name : vipName,
Wxid : vipWxid,
birthday:vipBirthday,
phone:vipMobile,
image:vipImage,
cash:vipCash,
updatetime:vipUpdatetime
} ]
});
$('#vipTable').datagrid('reload', data);
}

java后台实现类代码：

public void deal(JWRequest request, JWResponse response)
throws ErrorCodeException {
// TODO Auto-generated method stub
String action = request.getAction();
if ("getVipByStatus".equalsIgnoreCase(action)) {
getVipLists(request, response);
}
}
    private void getVipLists(JWRequest request, JWResponse response) {
    VipExample example = new VipExample();
List<Vip> vipList = this.vipDao.selectByExample(example);
// String s=vipList.toString();
// System.out.println(s);
// 转换成ztree格式
JSONArray ztreeNodes = new JSONArray();
JSONObject json = new JSONObject();
json.put("id", 0);
json.put("pId", -1);
json.put("name", "所有会员");
json.put("open", true);
json.put("icon", "web/images/sm_role.png");
ztreeNodes.add(json);

for (Vip user: vipList) {
json = new JSONObject();
json.put("id", user.getWxid());
json.put("pId", "0");
json.put("name", user.getName());
json.put("icon", "web/images/sm_user.png");
json.put("mobile", user.getMobile());
json.put("birthday", user.getBirthday());
json.put("image", user.getImage());
json.put("cash", user.getCash());
json.put("updatetime", user.getUpdatetime());
ztreeNodes.add(json);
}

JSONObject resData = new JSONObject();
resData.put("ztreeNodes", ztreeNodes);
response.setData(resData);
}