Browse Source

feature: 树节点支持灰化

es6
guy 3 years ago
parent
commit
983ec91004
  1. 53
      src/case/ztree/0.treeview.js
  2. 18
      src/case/ztree/1.asynctree.js
  3. 4
      src/less/base/single/input/checkbox.less
  4. 4
      src/less/base/single/input/radio.less
  5. 4
      src/less/base/tree/ztree.less

53
src/case/ztree/0.treeview.js

@ -140,7 +140,9 @@ BI.TreeView = BI.inherit(BI.Pane, {
} }
return true; return true;
} }
BI.Msg.toast("Please Wait。", "warning"); // 不展开节点,也不触发onExpand事件 BI.Msg.toast("Please Wait。", {
level: "warning"
}); // 不展开节点,也不触发onExpand事件
return false; return false;
} }
@ -184,6 +186,9 @@ BI.TreeView = BI.inherit(BI.Pane, {
} }
function beforeCheck (treeId, treeNode) { function beforeCheck (treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
// 下面主动修改了node的halfCheck属性, 节点属性的判断依赖halfCheck,改之前就获取一下 // 下面主动修改了node的halfCheck属性, 节点属性的判断依赖halfCheck,改之前就获取一下
var status = treeNode.getCheckStatus(); var status = treeNode.getCheckStatus();
treeNode.halfCheck = false; treeNode.halfCheck = false;
@ -213,14 +218,23 @@ BI.TreeView = BI.inherit(BI.Pane, {
} }
function onCheck (event, treeId, treeNode) { function onCheck (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
self._selectTreeNode(treeId, treeNode); self._selectTreeNode(treeId, treeNode);
} }
function onExpand (event, treeId, treeNode) { function onExpand (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
treeNode.halfCheck = false; treeNode.halfCheck = false;
} }
function onCollapse (event, treeId, treeNode) { function onCollapse (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
} }
return setting; return setting;
@ -335,22 +349,33 @@ BI.TreeView = BI.inherit(BI.Pane, {
var ns = BI.Tree.arrayFormat(nodes); var ns = BI.Tree.arrayFormat(nodes);
BI.each(ns, function (i, n) { BI.each(ns, function (i, n) {
n.isParent = n.isParent || n.parent; n.isParent = n.isParent || n.parent;
n.value = BI.isUndefined(n.value) ? n.text : n.value; // n.value = BI.isUndefined(n.value) ? n.text : n.value;
n.text = BI.isUndefined(n.text) ? n.value : n.text; // n.text = BI.isUndefined(n.text) ? n.value : n.text;
if (n.text === null) { // if (n.text === null) {
n.text = ""; // n.text = "";
} // }
if (BI.isNull(n.title)) { if (BI.isNull(n.title)) {
n.title = n.text; n.title = n.text;
} }
// 处理标红 var text = BI.createWidget(BI.extend({
if (BI.isNotNull(n.text)) { type: "bi.text",
if (BI.isKey(o.paras.keyword)) { cls: "tree-node-text",
n.text = BI.$("<div>").__textKeywordMarked__(BI.Text.formatText(n.text + ""), o.paras.keyword, n.py).html(); css: {
} else { display: "inline"
n.text = BI.htmlEncode(BI.Text.formatText(n.text + "")); },
} root: true
} }, n));
var fragment = BI.Widget._renderEngine.createElement("<div>");
fragment.append(text.element[0]);
n.text = fragment.html();
// // 处理标红
// if (BI.isNotNull(n.text)) {
// if (BI.isKey(o.paras.keyword)) {
// n.text = BI.$("<div>").__textKeywordMarked__(BI.Text.formatText(n.text + ""), o.paras.keyword, n.py).html();
// } else {
// n.text = BI.htmlEncode(BI.Text.formatText(n.text + ""));
// }
// }
}); });
return nodes; return nodes;
}, },

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

@ -59,6 +59,9 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
}; };
function onClick (event, treeId, treeNode) { function onClick (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
var zTree = BI.$.fn.zTree.getZTreeObj(treeId); var zTree = BI.$.fn.zTree.getZTreeObj(treeId);
// 当前点击节点的状态是半选,且为true_part, 则将其改为false_part,使得点击半选后切换到的是全选 // 当前点击节点的状态是半选,且为true_part, 则将其改为false_part,使得点击半选后切换到的是全选
var checked = treeNode.checked; var checked = treeNode.checked;
@ -70,6 +73,9 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
} }
function beforeCheck (treeId, treeNode) { function beforeCheck (treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
// 下面主动修改了node的halfCheck属性, 节点属性的判断依赖halfCheck,改之前就获取一下 // 下面主动修改了node的halfCheck属性, 节点属性的判断依赖halfCheck,改之前就获取一下
var status = treeNode.getCheckStatus(); var status = treeNode.getCheckStatus();
treeNode.halfCheck = false; treeNode.halfCheck = false;
@ -98,18 +104,30 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
} }
function beforeExpand (treeId, treeNode) { function beforeExpand (treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
self._beforeExpandNode(treeId, treeNode); self._beforeExpandNode(treeId, treeNode);
} }
function onCheck (event, treeId, treeNode) { function onCheck (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
self._selectTreeNode(treeId, treeNode); self._selectTreeNode(treeId, treeNode);
} }
function onExpand (event, treeId, treeNode) { function onExpand (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
treeNode.halfCheck = false; treeNode.halfCheck = false;
} }
function onCollapse (event, treeId, treeNode) { function onCollapse (event, treeId, treeNode) {
if (treeNode.disabled) {
return false;
}
treeNode.halfCheck = false; treeNode.halfCheck = false;
} }

4
src/less/base/single/input/checkbox.less

@ -27,7 +27,7 @@
border-color: @color-bi-border-hover-active-checkbox; border-color: @color-bi-border-hover-active-checkbox;
} }
} }
&.active, &:active { &.active {
& .checkbox-content, &.checkbox-content{ & .checkbox-content, &.checkbox-content{
border-color: @color-bi-border-hover-active-checkbox; border-color: @color-bi-border-hover-active-checkbox;
background-color: @color-bi-background-active-checkbox; background-color: @color-bi-background-active-checkbox;
@ -65,7 +65,7 @@
border-color: @color-bi-border-hover-active-checkbox-theme-dark; border-color: @color-bi-border-hover-active-checkbox-theme-dark;
} }
} }
&.active, &:active { &.active {
& .checkbox-content, &.checkbox-content { & .checkbox-content, &.checkbox-content {
border-color: @color-bi-border-hover-active-checkbox-theme-dark; border-color: @color-bi-border-hover-active-checkbox-theme-dark;
background-color: @color-bi-background-active-checkbox-theme-dark; background-color: @color-bi-background-active-checkbox-theme-dark;

4
src/less/base/single/input/radio.less

@ -13,7 +13,7 @@
border-color: @color-bi-border-hover-active-radio; border-color: @color-bi-border-hover-active-radio;
} }
} }
&:active, &.active { &.active {
& .radio-content, &.radio-content { & .radio-content, &.radio-content {
border-color: @color-bi-border-hover-active-radio; border-color: @color-bi-border-hover-active-radio;
background-color: @color-bi-background-active-radio; background-color: @color-bi-background-active-radio;
@ -59,7 +59,7 @@
border-color: @color-bi-border-hover-active-radio-theme-dark; border-color: @color-bi-border-hover-active-radio-theme-dark;
} }
} }
&.active, &:active { &.active {
& .radio-content, &.radio-content { & .radio-content, &.radio-content {
border-color:@color-bi-border-hover-active-radio-theme-dark; border-color:@color-bi-border-hover-active-radio-theme-dark;
&:after { &:after {

4
src/less/base/tree/ztree.less

@ -76,6 +76,8 @@
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
.tree-node-text {
&:not(.disabled) {
&:hover { &:hover {
.background-color(@color-bi-background-highlight, 10%); .background-color(@color-bi-background-highlight, 10%);
} }
@ -84,6 +86,8 @@
.background-color(@color-bi-background-highlight, 15%); .background-color(@color-bi-background-highlight, 15%);
} }
} }
}
}
.ztree.solid li a { .ztree.solid li a {
height: 31px; height: 31px;

Loading…
Cancel
Save