angularjs(自定义指令方式)与jquery treetable 结合实现table树。
/**
* Created by ken on 2017/3/1.
*/
angular.module('app')
.directive('repeatFinish',function($timeout){
return {
restrict: 'A',
link: function(scope,elem,attr){
//当前循环至最后一个
if (scope.$last === true) {
$timeout(function () {
//向父控制器传递事件消息
scope.$emit('repeatFinishCallback');
},100);
}
}
}
})
.directive('configFileTabs', function ($rootScope,$state,$compile,$uibModal,configService,common,DTColumnDefBuilder,DTOptionsBuilder) {
return {
restrict: 'EA',
replace: true,
link:function (scope, elem, attrs, controllerInstance) {
scope.$on('repeatFinishCallback',function(){
$("#example-basic-expandable").treetable(
{ expandable: true, clickableNodeNames:true, theme:'vsStyle', initialState:"expanded"
}
);
});
scope.selectCheckConfigFile = function(configFile){
var uuid = configFile.uuid,systemName = configFile.systemName,appName = configFile.appName,groupName = configFile.groupName;
var uibModalInstance = $uibModal.open({
animation: true,
size:'lg',
templateUrl: 'app/butterfly/config/config-file-content.html',
controller:function($uibModalInstance, $scope){
configService.queryAppGroupFileContent(systemName,appName,groupName,uuid,function(configFile,code){
if(code == 200){
var fileContent = configFile['fileContent'];
$scope.selectedConfigFile = configFile;
$scope.selectedConfigFile.fileContent = fileContent;
}else{
common.ajaxAlert("error","查看配置文件出现异常,请联系系统管理员协助处理") ;
}
},null);
}
});
}
},
template:'<table id="example-basic-expandable" class="treetable table table-striped table-bordered table-hover" >\
<thead>\
<tr>\
<th>文件及文件路径</th>\
<th>是否包含加密内容</th>\
<th>配置文件</th>\
</tr>\
</thead>\
<tbody ng-if="configFiles.length">\
<tr data-tt-id="{{item.id}}" data-tt-parent-id="{{item.pid}}" ng-repeat="item in configFiles track by $index" repeat-finish>\
<td style="cursor: pointer;">\
<span ng-if="item.hasChild" class="fa fa-folder" style="color:#ECB355 ">\
</span>\
<span ng-if="!item.hasChild" class="fa fa-file" style="margin-left: 20px;color:#ECB355;">\
</span>\
<span>{{item.title}}</span> \
</td>\
<td>\
<span ng-if="item.configFile">\
<span ng-if="item.configFile.isImportant == \'true\'">是</span>\
<span ng-if="item.configFile.isImportant == \'false\' || item.configFile.isImportant == null ">否</span>\
</span>\
</td>\
<td >\
<i style="margin-right:10px;color: #333;font-size: 12px;cursor: pointer;" ng-if="item.configFile" class="fa fa-search" ng-click="selectCheckConfigFile(item.configFile)" title="查看配置文件"></i> \
<i style="margin-right:10px;color: #333;font-size: 12px;cursor: pointer;" ng-if="item.configFile && isEdit" class="fa fa-pencil-square-o" ng-click="openEditFile(item.configFile)" title="编辑基本配置"></i> \
<i style="margin-right:10px;color: #333;font-size: 12px;cursor: pointer;" ng-if="item.configFile && isEdit" class="fa fa-history" ng-click="openHistoryFile(item.configFile)" title="历史版本"></i> \
<i style="margin-right:10px;color: #333;font-size: 12px;cursor: pointer;" ng-if="item.configFile && isEdit" class="fa fa-trash-o" ng-click="deleteConfigFile(item.configFile,item.id)" title="删除"></i> \
</td>\
</tr>\
</tbody>\
<tbody ng-if="!configFiles.length">\
<tr><td colspan="3" style="text-align: center">暂无配置文件</td></tr>\
<tbody>\
</table>'
}
});
repeatFinish 后才进行KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲example-basic-e…("#example-basic-expandable").treetable( “destroy”); 使用destroy方法销毁原数据重新绘制并实例化树。
// $("#example-basic-expandable").treetable(“removeNode”,id); (删除节点)
jquery.treetable.js的源码:
destroy: function() {
return this.each(function() {
return $(this).removeData(“treetable”).removeClass(“treetable”);
});
},
removeNode: function(id) {
var node = this.data(“treetable”).tree[id];
if (node) {
this.data(“treetable”).removeNode(node);
} else {
throw new Error(“Unknown node '” + id + “’”);
}
return this;
},