zTree树插件实现点击左侧树,右侧展示文章列表页面
树形结构,分级打开。
有没有人会啊,最好有demo可以分享
ztree onclick事件, ajax请求后台,返回json对象;用jquery 显示出来内容;
进入ztree单击事件做请求,得到结果刷新右侧内容块比如iframe。
function zTreeOnClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("menuTree");
var nodes = zTree.getSelectedNodes();
}
$(document).ready(function () {
var setting = {
callback: {
onClick: zTreeOnClick
}
};
$.fn.zTree.init($("#menuTree"), setting);
});
在左侧树获取姓名的ID 根据ID查询右侧文章内容
var setting = { //此处是ztree核心配置
callback: {
onNodeCreated: zTreeOnNodeCreated,//新加的样式
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
}
},
onClick:function(event,treeId,treeNode){
$.ajax({
//此处ajax 异步请求后台获取 数据 然后将数据放到 写好的页面中去,如果这页面开始不存在,默认进来hide,点击事件之后show
并将获取的JSON数据填充到页面中去
});
}
}
function zTreeOnClick(event, treeId, treeNode) {
$("#showtable").show();
$("#orgId").val(treeNode.id);
$("#orglevel").val(treeNode.level+1);
initTable();
// alert(treeNode.tId + ", " + treeNode.name+treeNode.id);
};
调用另一个initTable();
function initTable(){
dynamicTable =$("#publish_model").bootstrapTable("destroy").bootstrapTable({
url: commonCTX+"/org/department/studentlist",
method: "POST",
contentType : "application/x-www-form-urlencoded",
striped: true,
pagination: true,
singleSelect: true,
clickToSelect: true,
pageNumber:1,
pageSize: 10,
pageList: [5, 10, 20],
sidePagination: "server",
queryParamsType: "limit",
queryParams: function queryParams(params) { //设置查询参数
var param = {
limit: params.limit,
offset: params.offset,
orgId:$("#orgId").val(),
orglevel:$("#orglevel").val(),
name:$("#name").val()
};
return param;
},
// height:$(window).height()*0.85,
columns:options.columns
});
}
进行查询就可以了