caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

DESIGN-4237 feat: 复选树支持添加自定义图标

es6
zsmj 2 years ago
parent
62aec29cca
commit
4e11dacf63
5 changed files with 2084 additions and 1712 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 117
      demo/js/base/tree/demo.sync_tree.js
  2. 4
      src/case/ztree/0.treeview.js
  3. 14
      src/case/ztree/1.asynctree.js
  4. 3649
      src/case/ztree/jquery.ztree.core-3.5.js
  5. 12
      src/less/base/tree/ztree.less

117
demo/js/base/tree/demo.sync_tree.js
Unescape View File

@ -4,7 +4,10 @@ Demo.Func = BI.inherit(BI.Widget, {
}, },
mounted: function () { mounted: function () {
this.syncTree.stroke({ this.syncTree1.stroke({
keyword: "1"
});
this.syncTree2.stroke({
keyword: "1" keyword: "1"
}); });
}, },
@ -13,40 +16,92 @@ Demo.Func = BI.inherit(BI.Widget, {
var self = this; var self = this;
return { return {
type: "bi.vtape", type: "bi.vtape",
items: [{ rowSize: [0.5, 0.5],
type: "bi.label", items: [
height: 50, {
text: "可以异步获取数据的树" type: "bi.vtape",
}, { items: [
type: "bi.async_tree", {
ref: function (_ref) { type: "bi.label",
self.syncTree = _ref; height: 50,
}, text: "可以异步获取数据的树"
paras: {
selectedValues: {"1": {}, "2": {"1": {}}}
},
itemsCreator: function (op, callback) {
callback({
items: [{
id: (op.id || "") + "1",
pId: op.id,
text: 1,
isParent: true
}, { }, {
id: (op.id || "") + "2", type: "bi.async_tree",
pId: op.id, ref: function (_ref) {
text: 2 self.syncTree1 = _ref;
},
paras: {
selectedValues: { "1": {}, "2": { "1": {} } }
},
itemsCreator: function (op, callback) {
callback({
items: [{
id: (op.id || "") + "1",
pId: op.id,
text: (op.id || "") + "1",
isParent: true,
iconCls: "close-h-font"
}, {
id: (op.id || "") + "2",
pId: op.id,
text: (op.id || "") + "2",
iconCls: "search-font"
}, {
id: (op.id || "") + "3",
pId: op.id,
text: (op.id || "") + "3",
iconCls: "date-font"
}],
hasNext: BI.isNull(op.id)
});
}
},
]
},
{
type: "bi.vtape",
items: [
{
type: "bi.label",
height: 50,
text: "showIcon属性搭配节点iconCls,可以显示图标"
}, { }, {
id: (op.id || "") + "3", type: "bi.async_tree",
pId: op.id, ref: function (_ref) {
text: 3 self.syncTree2 = _ref;
}], },
hasNext: BI.isNull(op.id) paras: {
}); selectedValues: { "1": {}, "2": { "1": {} } }
},
showIcon: true,
itemsCreator: function (op, callback) {
callback({
items: [{
id: (op.id || "") + "1",
pId: op.id,
text: (op.id || "") + "1",
isParent: true,
iconCls: "close-h-font"
}, {
id: (op.id || "") + "2",
pId: op.id,
text: (op.id || "") + "2",
iconCls: "search-font"
}, {
id: (op.id || "") + "3",
pId: op.id,
text: (op.id || "") + "3",
iconCls: "date-font"
}],
hasNext: BI.isNull(op.id)
});
}
},
]
} }
}] ]
}; };
} }
}); });
BI.shortcut("demo.sync_tree", Demo.Func); BI.shortcut("demo.sync_tree", Demo.Func);

4
src/case/ztree/0.treeview.js
Unescape View File

@ -95,7 +95,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
expandSpeed: "", expandSpeed: "",
nameIsHTML: true, // 节点可以用html标签代替 nameIsHTML: true, // 节点可以用html标签代替
dblClickExpand: false, dblClickExpand: false,
showLine: o.showLine showLine: o.showLine,
}, },
callback: { callback: {
beforeExpand: beforeExpand, beforeExpand: beforeExpand,
@ -360,7 +360,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
tagName: "span", tagName: "span",
whiteSpace: "nowrap", whiteSpace: "nowrap",
root: true, root: true,
keyword: o.paras.keyword keyword: o.paras.keyword,
}, newNode, { }, newNode, {
type: "bi.text", type: "bi.text",
text: BI.replaceAll(newNode.text, "\n", " ") text: BI.replaceAll(newNode.text, "\n", " ")

14
src/case/ztree/1.asynctree.js
Unescape View File

@ -6,7 +6,10 @@
*/ */
BI.AsyncTree = BI.inherit(BI.TreeView, { BI.AsyncTree = BI.inherit(BI.TreeView, {
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), {}); return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), {
showIcon: false,
showLine: true,
});
}, },
_init: function () { _init: function () {
BI.AsyncTree.superclass._init.apply(this, arguments); BI.AsyncTree.superclass._init.apply(this, arguments);
@ -42,11 +45,14 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
} }
}, },
view: { view: {
showIcon: false, showIcon: o.showIcon,
expandSpeed: "", expandSpeed: "",
nameIsHTML: true, nameIsHTML: true,
dblClickExpand: false, dblClickExpand: false,
showLine: o.showLine showLine: o.showLine,
nodeClasses: function (treeId, treeNode) {
return { add: [treeNode.iconCls || ""] };
}
}, },
callback: { callback: {
beforeCheck: beforeCheck, beforeCheck: beforeCheck,
@ -54,7 +60,7 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
beforeExpand: beforeExpand, beforeExpand: beforeExpand,
onExpand: onExpand, onExpand: onExpand,
onCollapse: onCollapse, onCollapse: onCollapse,
onClick: onClick onClick: onClick,
} }
}; };

3649
src/case/ztree/jquery.ztree.core-3.5.js
View File

File diff suppressed because it is too large Load Diff

12
src/less/base/tree/ztree.less
Unescape View File

@ -35,6 +35,7 @@
// 使用1倍图太模糊，这边就使用css自己画了，calc属性支持IE9, IE8反正会走hack, 不影响 // 使用1倍图太模糊，这边就使用css自己画了，calc属性支持IE9, IE8反正会走hack, 不影响
.ztree li ul.line { .ztree li ul.line {
position: relative; position: relative;
&:before { &:before {
position: absolute; position: absolute;
content: ''; content: '';
@ -60,6 +61,7 @@
border-left: 1px dashed @border-color-dark-gray-line; border-left: 1px dashed @border-color-dark-gray-line;
} }
} }
.ztree.solid li ul.line { .ztree.solid li ul.line {
&:before { &:before {
border-left: 1px solid @border-color-dark-gray-line-theme-dark; border-left: 1px solid @border-color-dark-gray-line-theme-dark;
@ -68,7 +70,7 @@
} }
.ztree li a { .ztree li a {
padding: 1px 3px 0 0; padding: 0 3px 0 0;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
height: 23px; height: 23px;
@ -76,11 +78,13 @@
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
.tree-node-text { .tree-node-text {
&:not(.disabled) { &:not(.disabled) {
&:hover { &:hover {
.background-color(@color-bi-background-highlight, 10%); .background-color(@color-bi-background-highlight, 10%);
} }
&:active { &:active {
color: @color-bi-text-highlight; color: @color-bi-text-highlight;
.background-color(@color-bi-background-highlight, 15%); .background-color(@color-bi-background-highlight, 15%);
@ -147,8 +151,6 @@
.ztree li span.button { .ztree li span.button {
line-height: 0; line-height: 0;
margin: 0; margin: 0;
width: 16px;
height: 16px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border: 0 none; border: 0 none;
@ -163,18 +165,22 @@
&.bi-checkbox { &.bi-checkbox {
border: 1px solid @color-bi-border-dark-line; border: 1px solid @color-bi-border-dark-line;
box-sizing: border-box; box-sizing: border-box;
&.active { &.active {
background-color: @color-bi-background-highlight; background-color: @color-bi-background-highlight;
border-color: @color-bi-border-highlight; border-color: @color-bi-border-highlight;
} }
&.disabled { &.disabled {
border: 1px solid @color-bi-border-disabled; border: 1px solid @color-bi-border-disabled;
background-color: @color-bi-background-disabled; background-color: @color-bi-background-disabled;
&.active { &.active {
border-color: @color-bi-border-disabled; border-color: @color-bi-border-disabled;
} }
} }
} }
&.bi-half-button { &.bi-half-button {
border: 1px solid @color-bi-border-highlight; border: 1px solid @color-bi-border-highlight;
box-sizing: border-box; box-sizing: border-box;

Write Preview
Loading…
Cancel
Save