zTree树插件实现点击左侧树,右侧展示文章列表页面

图片说明

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
        });
}
进行查询就可以了