Browse Source

Pull request #2858: KERNEL-11626 refactor组件宽高自适应的一些布局调整

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '4e11dacf635e71f8cc1c63dbb4a85ddfeba01134':
  DESIGN-4237 feat: 复选树支持添加自定义图标
  KERNEL-11626 refactor组件宽高自适应的一些布局调整
  KERNEL-11626 refactor组件宽高自适应的一些布局调整
es6
Dailer 3 years ago
parent
commit
c5f7689b3a
  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
  6. 14
      src/widget/editor/editor.text.js

117
demo/js/base/tree/demo.sync_tree.js

@ -4,7 +4,10 @@ Demo.Func = BI.inherit(BI.Widget, {
},
mounted: function () {
this.syncTree.stroke({
this.syncTree1.stroke({
keyword: "1"
});
this.syncTree2.stroke({
keyword: "1"
});
},
@ -13,40 +16,92 @@ Demo.Func = BI.inherit(BI.Widget, {
var self = this;
return {
type: "bi.vtape",
items: [{
type: "bi.label",
height: 50,
text: "可以异步获取数据的树"
}, {
type: "bi.async_tree",
ref: function (_ref) {
self.syncTree = _ref;
},
paras: {
selectedValues: {"1": {}, "2": {"1": {}}}
},
itemsCreator: function (op, callback) {
callback({
items: [{
id: (op.id || "") + "1",
pId: op.id,
text: 1,
isParent: true
rowSize: [0.5, 0.5],
items: [
{
type: "bi.vtape",
items: [
{
type: "bi.label",
height: 50,
text: "可以异步获取数据的树"
}, {
id: (op.id || "") + "2",
pId: op.id,
text: 2
type: "bi.async_tree",
ref: function (_ref) {
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",
pId: op.id,
text: 3
}],
hasNext: BI.isNull(op.id)
});
type: "bi.async_tree",
ref: function (_ref) {
self.syncTree2 = _ref;
},
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

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

14
src/case/ztree/1.asynctree.js

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

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

File diff suppressed because it is too large Load Diff

12
src/less/base/tree/ztree.less

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

14
src/widget/editor/editor.text.js

@ -28,15 +28,15 @@ BI.TextEditor = BI.inherit(BI.Widget, {
var self = this, o = this.options;
var border = o.simple ? 1 : 2;
if (BI.isNumber(o.height)) {
this.element.css({height: o.height - border});
this.element.css({ height: o.height - border });
}
if (BI.isNumber(o.width)) {
this.element.css({width: o.width - border});
this.element.css({ width: o.width - border });
}
this.editor = BI.createWidget({
type: "bi.editor",
element: this,
simple: o.simple,
height: o.height - border,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
@ -116,12 +116,6 @@ BI.TextEditor = BI.inherit(BI.Widget, {
this.editor.on(BI.Editor.EVENT_EMPTY, function () {
self.fireEvent(BI.TextEditor.EVENT_EMPTY);
});
BI.createWidget({
type: "bi.vertical",
scrolly: false,
element: this,
items: [this.editor]
});
},
setWaterMark: function (v) {
@ -177,4 +171,4 @@ BI.TextEditor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.TextEditor.EVENT_REMOVE = "EVENT_REMOVE";
BI.TextEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.text_editor", BI.TextEditor);
BI.shortcut("bi.text_editor", BI.TextEditor);

Loading…
Cancel
Save