带有复选框的淘汰赛JS树形视图 [英] Knockout JS treeview with checkboxes
本文介绍了带有复选框的淘汰赛JS树形视图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的剔除应用程序中有一个模块,我想要一个带有复选框的树型结构.我要实现的目标是以下
I have a module in my knockout application where I want to have a tree type structure with checkboxes. What I am trying to achieve with that is the following
- 如果我选择子节点,则该节点中的所有父代和祖父母都将被选中,但带有不同的图标.像这样的
- 如果用户选择了父级,则所有子级都将被选中,例如
在开始为其制作自己的插件之前,敲除功能是否有与此类似的东西,我可以将其用作基础并以此为基础?
Before starting to make my own plugin for it, does knockout have anything similar to this, which I can use as a base and build upon it?
推荐答案
我认为,使用一些与jstree之类的DOM元素挂钩的库是不好的方法.恕我直言,最好将数据模型及其在htlm中的解释分开.
i believe using some library hooked to DOM elements like jstree is bad approach. IMHO it is better to separate data model and its interpretation in htlm.
这里是示例: https://jsfiddle.net/gqyk1ssh/
ko.bindingHandlers.prop = {
update: function(element,valueAccessor) {
var props = ko.toJS(valueAccessor());
for (prop in props){
element[prop] = ko.unwrap(props[prop]);
}
}
}
function model(folders){
this.folders = ko.observableArray(ko.utils.arrayMap(folders,function(folder){
return new modelFolder(folder);
}));
};
function modelFolder(folder,parent){
this.name = ko.observable(folder.name);
this.checked = ko.observable(folder.checked);
this.parent = parent;
this.folders = ko.observableArray(
folder.folders ?
ko.utils.arrayMap(folder.folders,function(folder){
return new modelFolder(folder,this);
}.bind(this))
: null
);
this.checkedChildFolders = ko.pureComputed(function(){
return ko.utils.arrayFilter(this.folders(),function(folder){
return folder.checked() || folder.checkedAllChildFolders() || folder.checkedSomeChildFolders()
});
},this)
this.checkedSomeChildFolders = ko.pureComputed(function(){
return this.folders().length>0 && !this.checkedAllChildFolders() && this.checkedChildFolders().length > 0
},this);
this.checkedAllChildFolders = ko.pureComputed(function(){
return this.folders().length>0 && this.checkedChildFolders().length == this.folders().length
},this)
}
modelFolder.prototype.setCheck = function(check){
this.checkParents(check);
this.checkMeAndChildrens(check);
}
modelFolder.prototype.checkMeAndChildrens = function(check){
this.checked(check);
ko.utils.arrayForEach(this.folders(),function(folder){
folder.checkMeAndChildrens(check);
});
}
modelFolder.prototype.checkParents = function(check){
if(this.parent){
this.parent.checked(check);
this.parent.checkParents(check);
}
}
ko.applyBindings(new model([
{"name":"Lorem", "folders":[
{"name":"Dolor","folders":[
{"name":"Hello","folders":[
{"name":"Lorem"},
{"name":"Dolor","checked":true},
{"name":"Sit amet"}
]},
{"name":"Bye"},
]},
{"name":"Sit amet"}
]},
{"name":"Ipsum"}
]));
这篇关于带有复选框的淘汰赛JS树形视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文