feat(tree): 加入props 属性适配器
This commit is contained in:
parent
546177d805
commit
8dae2c5feb
@ -33,6 +33,11 @@
|
||||
//,target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
|
||||
,
|
||||
drag: true,
|
||||
props:{
|
||||
name: 'name',
|
||||
id: 'id',
|
||||
children:'children'
|
||||
},
|
||||
change:function(val){
|
||||
console.group('change event')
|
||||
console.log('Array')
|
||||
@ -53,7 +58,7 @@
|
||||
console.log(elem);
|
||||
console.log('dom add event')
|
||||
var item ={
|
||||
name: '测试节点',
|
||||
name: '测试节点'+new Date().getTime(),
|
||||
id:-1
|
||||
}
|
||||
add(item)
|
||||
|
@ -11,12 +11,23 @@ layui.define('jquery', function(exports) {
|
||||
|
||||
var $ = layui.$,
|
||||
hint = layui.hint();
|
||||
//勾选集合
|
||||
var changeList = [];
|
||||
//变量别名
|
||||
var props ={
|
||||
name: 'name',
|
||||
id: 'id',
|
||||
children:'children'
|
||||
};
|
||||
|
||||
var enterSkin = 'layui-tree-enter',
|
||||
Tree = function(options) {
|
||||
this.options = options;
|
||||
this.props = this.options.props || props;
|
||||
this.nameKey = this.props.name || props.name;
|
||||
this.idKey = this.props.id || props.id;
|
||||
this.childrenKey = this.props.children || props.children;
|
||||
};
|
||||
//勾选集合
|
||||
var changeList = [];
|
||||
//图标
|
||||
var icon = {
|
||||
arrow: ['', ''] //箭头
|
||||
@ -44,13 +55,13 @@ layui.define('jquery', function(exports) {
|
||||
var nodes = children || options.nodes;
|
||||
|
||||
layui.each(nodes, function(index, item) {
|
||||
var hasChild = item.children && item.children.length > 0;
|
||||
var hasChild = item[that.childrenKey] && item[that.childrenKey].length > 0;
|
||||
var ul = $('<ul class="' + (item.spread ? "layui-show" : "") + '"></ul>');
|
||||
var li = that.getNode(item, hasChild);
|
||||
//如果有子节点,则递归继续生成树
|
||||
if(hasChild) {
|
||||
li.append(ul);
|
||||
that.tree(ul, item.children);
|
||||
that.tree(ul, item[that.childrenKey]);
|
||||
}
|
||||
//伸展节点
|
||||
that.spread(li, item);
|
||||
@ -60,6 +71,7 @@ layui.define('jquery', function(exports) {
|
||||
});
|
||||
};
|
||||
|
||||
//节点dom拼接
|
||||
Tree.prototype.getDom = function() {
|
||||
var that = this,
|
||||
options = that.options
|
||||
@ -82,7 +94,7 @@ layui.define('jquery', function(exports) {
|
||||
return '<a href="' + (item.href || 'javascript:;') + '" ' + (
|
||||
options.target && item.href ? 'target=\"' + options.target + '\"' : ''
|
||||
) + '>' +
|
||||
('<cite>' + (item.name || '未命名') + '</cite></a>')
|
||||
('<cite>' + (item[that.nameKey] || '未命名') + '</cite></a>')
|
||||
},
|
||||
menu: function(item) {
|
||||
return '<div class="layui-tree-menu">' +
|
||||
@ -98,7 +110,7 @@ layui.define('jquery', function(exports) {
|
||||
var that = this,
|
||||
options = that.options
|
||||
var dom = that.getDom();
|
||||
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') + '>'
|
||||
var li = $(['<li ' + (item.spread ? 'data-spread="' + item.spread + '"' : '') +('data-id=' + item[that.idKey])+ '>'
|
||||
//展开箭头
|
||||
,
|
||||
dom.spread(item, hasChild)
|
||||
|
Loading…
Reference in New Issue
Block a user