Dhtml+zTree+SSM 实现的简单demo

1.效果展示

2.Dhtml Grid

Dhtml Grid用来进行数据展示，我使用的数据格式是json，从后台传json数据到Grid。
关键步骤：
1.首先需要一个div

<div id="gridBox" style="width: 100%;height: 100%"></div>

2.初始化

	var mygrid;
    mygrid = new dhtmlXGridObject("gridBox");
    mygrid.setImagePath("imgs/");
    mygrid.setHeader("用户代码,用户姓名,用户部门,标识,是否禁用,排序号");
    mygrid.setInitWidthsP("10,*,15,20,10,15");
    mygrid.setColAlign("center,center,center,center,center,center");
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();

3.数据交互（可以直接通过url）

mygrid.load("url","json");//加载数据
mygrid.clearAndLoad("url","json");//清除原来的数据然后加载数据

4.数据格式要求（后端传过来数据格式）

{rows=[{"data":["xs001","张三","7","e","0","5"],"id":5},{"data":["xs002","李四","8","f","0","6"],"id":6}]}

3.zTree

zTree用来实现左边的树状结构。
关键代码：
1.需要一个ul

<ul id="treeBox" class="ztree" style="width: 100%;height: 100%;margin-top: 0px"></ul>

2.初始化

//tree开始
    var setting = {
        async: {
            enable: true,
            url:"url",
            dataFilter: function (treeId, parentNode, responseData) {
                return responseData;
            }
        },
        data: {
            simpleData: {
                enable: true,
                idKey:"id",
                pIdKey:"pid"
            }
        },
        callback: {
            onClick: onClick
        }
    };
    function onClick(event, treeId, treeNode, clickFlag) {
        //这个方法的作用是定义点击左边树结构时候的动作
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeBox"), setting);
    });
    //tree结束

3.数据格式要求（后端传过来数据格式）

var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];

4.idKey和pIdKey的理解
idKey：就是每一级的id
pIdKey：每一级它的父级id

4.文档

DHTML
zTree