Bootstrap的gTreetable java版本用法

最近用到一个需要做树形结构的需求,在网上找了一些,最后用了bootstrap的个treeTable来实现,效果如下:

1 ,去官网上下载个gtreeTable:https://github.com/gilek/bootstrap-gtreetable#configuration,这里是一个github的地址

2.建一个jsp啦,导入各种js和css,切记一定要全,treeTable的,bootstrap,jQuery的都要引入

3 跟多数的前端框架一样,需要一定的结构,简单的一个table就好

<table class="table gtreetable" id="gtreetable">
	<thead>
		<tr>
			<th>图片分类管理</th>
		</tr>
	</thead>
</table>

4 写js啦,jquery初始化一下,主要用到的就这几个方法,source是一开始加载的时候会去后台异步加载数据的方法,所有后来出现在页面上的数据也都是这一步获取到拼凑到html里的,所有你要写一个后台的方法去给它调,他传的一个参数id是这一次异步请求你要获取的数据的父节点的id,所以初始化的时候id的值为0,你要在数据库里给你第一次要加载的数据pid设为0就好,而且他需要返回json,格式是一个json字符串{"nodes":[{"id":"8","level":"1","name":"22","type":"default"}]},不管你用什么方式,返回一个json就好,id 就是你当前的id,不是父节点的id,你的level要比你的父节点大1的,所以你插入的时候跟父节点的level++,type用default的就好,国际化的有许多国际化文件的,你需要什么就用language引用吧;save的操作差不多,也是要返回json,要把你保存或者修改的数据返回;删除的时候你只要有返回它就会当做成功,所以我稍微修改了下bootstrap-gtreetable.js,在这里做了一个小的判断就好,这里简单的增删改查基本都能实现了

jQuery(document).ready(function () {
    jQuery('#gtreetable').gtreetable({
          'source': function (id) {
              return {
                type: 'GET',
                url: 'imgCatalog!nodeChildren.action',
                data: { 'id': id },        
                dataType: 'json',
                error: function(XMLHttpRequest) {
                  alert(XMLHttpRequest.status+': '+XMLHttpRequest.responseText);
                }
              }
            },
            'onSave':function (oNode) {
                return {
                  type: 'POST',
                  url: !oNode.isSaved() ? 'imgCatalog!nodeCreate.action': 'imgCatalog!nodeUpdate.action?id=' + oNode.getId(),
                  data: {
                    parent: oNode.getParent(),
                    name: oNode.getName(),
                    position: oNode.getInsertPosition(),
                    related: oNode.getRelatedNodeId()
                  },
                  dataType: 'json',
                  error: function(XMLHttpRequest) {
                    alert(XMLHttpRequest.status+': '+XMLHttpRequest.responseText);
                  }
                };
              },
              'onDelete':function (oNode) {
                return {
                  type: 'POST',
                  url: 'imgCatalog!nodeDelete.action?id=' + oNode.getId(),
                  dataType: 'json',
                  error: function(XMLHttpRequest) {
                    alert(XMLHttpRequest.status+': '+XMLHttpRequest.responseText);
                  }
                };
              },
              'language': 'zh-CN'
        });
    });

Bootstrap的gTreetable java版本用法

猜你喜欢