需要的结果:
读取指定路径文件夹下的所有文件,并生成目录树
1.点击触发按钮打开附件窗口
1.Html节点写好
2.监听函数-SelectFuJian()是该功能的主要js类
<li id="SelectFuJian"><a href="#">查看附件</a></li>
$('#SelectFuJian', this.html).on('click', $.proxy(function (e) {
var selectFuJian = new SelectFuJian();
selectFuJian.load(url);
}, this));
2.将URL传入后端,获取的json
1.将url用ajax传进后端,方法是get
2.处理后的json回调success()
request: function (options) {
options.method = "GET";
var url = url;
deferred = $.ajax({
url: url,
type: options.method,
data: options.data
});
deferred.then(function (res) {
if (options.success){
options.success.call(options.context, res);
}
};
}
1.new一个Structure类,用来存放读取文件夹中的数据
一个文件夹用数组对象来表示,有一个文件夹名字name,一个id,一个子文件夹数组
2.GetAllFiles:从url中读取所有文件,包括文件夹中的子文件(数组中用数组表示子文件夹)
3.将获取的文件夹对象转化为json字符串
Structure node = new Structure();
GetAllFiles(path, node);
string treeSting = node.toJSON();
return treeSting;
3.用回调的json创建目录
1.transformTreeNode:将拿到的json字符串,变成前端的对象,创建数组,将数据一个一个遍历进datastore对象中
2.loadTree:创建目录,在指定的html节点中,用得到的json datastore数组创建目录树,返回树节点
3.callback :只要点击了目录的根节点,就会触发_fileNodeClick(),_fileNodeClick会加载对应的url找到数据
4.show:显示窗口
success: function (src) {
var nodes = context.transformTreeNode(src);
context.loadTree($(".html"), nodes, callback);
context.show();
var callback = {
onClick: function (treeNode) {
context._fileNodeClick(treeNode);
},
}
}
4.点击触发目录节点
1.拿到一个url
2.判断url的类型
3.图片就加载图片,pdf就设置iframe标签,其他就打开url
_fileNodeClick: function (treeNode) {
var url = 'www.baidu.com';
var filetype = url .substring(url .lastIndexOf("."));
if (filetype == ".png" || filetype == ".jpg") {
$('.rightPanel', this._container).signPictureView({
'src': url, 'closeBtn': false
});
}
else {
if (filetype == ".pdf") {
$('.rightPanel', this._container).append("<iframe style='width:100%;height:100%' src=" + url + "></iframe>")
}
else {
window.open(url);
}
}
},
显示窗口show
show: function () {
$(this._container).addClass("show");
}
整个js
define("sfs.proj.SelectFuJian", [
"text!Template/App/lc/SelectFuJian.html",
"css!Theme/Styles/Blue/home/css/selectFuJian.css",
], function (tpl) {
sfs.proj.SelectFuJian = sfs.Class({
_container: null,
initialize: function () {
this._template = tpl;
this._container = $(sfs.DomUtil.getTemplate(this._template, "main"));
$(document.body).append(this._container);
this.load(actionConfig.selectFuJian.items.rodPath);
},
load: function (path) {
var foldPath = this._transformFolderPath(path);
this.createDirectory(foldPath);
this.addEvent();
},
_transformFolderPath: function (path) {
return path.replace(/\\/g, ",");
},
createDirectory: function (foldPath) {
var context = this;
sfs.Request({
name: "business-filetree-all",
data: {path: foldPath},
context: context,
success: function (src) {
if (src === "error") {
context.file = true;
return;
}
var nodes = JSON.parse(src);
context.bianLiNode(nodes);
}
});
},
bianLiNode: function (nodes) {
var thistest = this;
forEach = function (nodes) {
for (var i in nodes.childrens) {
var node = null;
if (nodes.childrens.hasOwnProperty(i)) {
node = nodes.childrens[i];
}
if (node.options.path !== undefined) {
var suffix = "";
var ii = 0;
for (ii = node.options.name.length - 1; ii >= 0; ii--) {
suffix = node.options.name.charAt(ii) + suffix;
if (node.options.name.charAt(ii) === '.') {
break;
}
}
thistest.addHtml(node, suffix);
}
forEach(node);
}
};
forEach(nodes);
},
addHtml: function (node, suffix) {
var paths = node.options.path;
var localPath = actionConfig.selectFuJian.items.rodPath;
var webPath = actionConfig.selectFuJian.items.iis;
paths = paths.replace(localPath, "");
var url = webPath + paths;
var html = $(sfs.DomUtil.getTemplate(this._template, "fujian"));
if (suffix === ".docx") {
$('.wrapper .viewport .overview .item_box .item_content', this._container).append(html);
$('.ptf_text', html).text(node.options.name);
$('.down', html).attr('href', url);
}
else {
if (suffix === ".pdf" || suffix === ".pdf" || suffix === ".jpg" || suffix === ".txt") {
$('.wrapper .viewport .overview .item_box .item_content', this._container).append(html);
$('.ptf_text', html).text(node.options.name);
$('.down', html).text('查看');
$('.down', html).attr('href', url);
}
}
},
addEvent: function () {
var $panel_system_help = $(".panel_system_help");
var $wrapper = $panel_system_help.find(".wrapper");
$wrapper.tinyscrollbar();
$panel_system_help.find(".top_box").on("click", ".close", $.proxy(function () {
$panel_system_help.remove();
}, this)
);
$wrapper.find(".item_header").on("click", $.proxy(function (e) {
var $target = $(e.currentTarget);
$target.find(".folder_icon").toggleClass("icon-folder3").toggleClass("icon-folder");
$target.closest(".item_box").find(".item_content").toggle();
$wrapper.updateScroll("relative");
}, this)
);
},
})
})