对于easyUI实现一个树,是一件很简单的事情,实现形式很多。
这里作者将实现,通过数据库获取数据,再将数据通过递归形式装成无限层级json数据,到达无限成级的树结构。
需要用到的json插件建附件,希望能对大家有所帮助
效果如图
- CREATE TABLE `role` (
- `id` varchar(32) NOT NULL,
- `createDate` datetime NOT NULL,
- `modifyDate` datetime NOT NULL,
- `name` varchar(64) NOT NULL,
- `isSystem` bit(1) NOT NULL,
- `description` varchar(256) NOT NULL,
- `fatherId` varchar(32) default '0' COMMENT '父id',
- PRIMARY KEY (`id`)
- ) EN
- <td>
- <input type="text" name="role.fatherId" <#if role.fatherId == ""> value="0" <#else> value="${role.fatherId}" </#if> hidden = "true"/>
- <div id= "comboTree" style="margin-left:0; high:60px; padding-bottom:2px; padding-top:2px; width:210px;"></div>
- </td>
js代码:
- $(function(){
- //加载树
- $('#comboTree').combotree({
- url:'role!backComboTreeTreeRole.action',
- onClick:function(node){
- //单用户单击一个节点的时候,触发
- $("input[name='role.fatherId']").val(node.id);
- },
- checkbox:false,
- multiple:false
- });
- });