如何动态添加标签及构建树
关键词：树控件、标签
一、需求
在产品管理过程中，需要给不同的产品添加上不同的标签属性，要求：
（1）打标签时，以树形形式展示已有标签。
（2）选择标签页面支持搜索。
（3）按选择的标签动态显示多个标签到单据页面。
（4）固定标签类型和自定义标签类型要求显示不同的颜色。
原型图
标签列表（基础资料）
二、思路与方案
1、用一个多选基础资料字段记录已选标签的数据。
2、弹出”页签选择页面“时，该页面的树结构功能参考分配权限页面的逻辑。根据标签基础资料数据初始化左树节点信息this.leftTreeInit()，同时根据单据上已选的标签数据，初始化标签选择页面右边树已选列表的信息initCheckNodes(leftTree,leftRoot,selectlabes)。
3、搜索控件输入数据回车时，search方法遍历树的信息，然后聚焦到搜索到的节点信息。
4、在页签选择页面点击“添加"或者"删除"时，根据左树选择的树节点，重新构建右树的节点信息。
5、确定选择标签时，在父页面更新多选基础资料数据，并动态生成标签控件。
三、实现过程
1、产品管理的单据插件
实现内容：弹出标签选择页面、标签数据回显。
package kdec.showcloud.showapp.plugin.edit;
/**
* 单据界面插件
*/
public class ProductBillPlugin extends AbstractBillPlugIn implements Plugin {
@Override
public void registerListener(EventObject e) {
this.addClickListeners("kdec_vectorap");
super.registerListener(e);
}
@Override
public void click(EventObject evt) {
super.click(evt);
if (evt.getSource() instanceof Button) {
Button bt = (Button) evt.getSource();
if (bt.getKey().equals("kdec_vectorap")) {
BillShowParameter bsp = (BillShowParameter) this.getView().getFormShowParameter();
// OperationStatus status = bsp.getStatus();
// String once_for_all = bsp.getCustomParam("once_for_all");
// if (once_for_all!=null&&once_for_all.equals("false")&&status.equals(OperationStatus.VIEW)){
// return;//控制是否可以查看状态可编辑
// }
DynamicObjectCollection selectLabes = (DynamicObjectCollection) this.getModel().getValue("kdec_fixed_label");
FormShowParameter formShowParameter = new FormShowParameter();
// 弹窗案例-动态表单 页面标识
formShowParameter.setFormId("kdec_selectlabel");
// 设置回调事件，回调插件为当前插件，标识为kdec_label
formShowParameter.setCloseCallBack(new CloseCallBack(this, "kdec_dynamiclabel"));
formShowParameter.setCustomParam("selectlabes", selectLabes);
// 设置打开类型为模态框（不设置的话指令参数缺失，没办法打开页面）
formShowParameter.getOpenStyle().setShowType(ShowType.Modal);
// 当前页面发送showform指令。注意也可以从其他页面发送指令，后续有文章介绍
this.getView().showForm(formShowParameter);
}
}
}
@Override
public void closedCallBack(ClosedCallBackEvent closedCallBackEvent) {
super.closedCallBack(closedCallBackEvent);
if("kdec_dynamiclabel".equalsIgnoreCase(closedCallBackEvent.getActionId())){
Object returnData = closedCallBackEvent.getReturnData();
if(returnData!=null){
//先清除上一次创建的控件
deleteLabels();
Object[] objects = (Object[]) ((HashMap) returnData).get("ids");
this.getModel().setValue("kdec_fixed_label",objects); //接收回传的数组
// this.getModel().setValue("kdec_largetepro_tip_tag",((HashMap) returnData).get("righttree"));
// this.getModel().updateCache();
QFilter qFilter = new QFilter("id", QCP.in,objects);
DynamicObject[] dynamicObjects = BusinessDataServiceHelper.load("kdec_fixed_label","number,name,kdec_labeltype",new QFilter[]{qFilter},"kdec_labeltype");
BillShowParameter bsp = (BillShowParameter) this.getView().getFormShowParameter();
OperationStatus status = bsp.getStatus();
if (status.equals(OperationStatus.VIEW)){
OperateOption saveOp = OperateOption.create();
// 取消原有的保存提示
saveOp.setVariableValue(OperateOptionConst.ISSHOWMESSAGE, "false");
//保存时会触发afterbinddata事件动态添加标签
OperationResult opReslut = this.getView().invokeOperation("save", saveOp);
if (opReslut.isSuccess()) {
this.getView().showSuccessNotification("标签设置成功");
}
}else{
for (DynamicObject dynamicObject:dynamicObjects){
addLabel(dynamicObject);
}
}
this.getView().updateView("kdec_flexpanelap4");
}
}
}
/**
* 删除原有标签
*/
private void deleteLabels() {
// String labelControls = this.getPageCache().get("labelControls");
// if (labelControls==null){
// return;
// }
// List<String> numbers = SerializationUtils.fromJsonString(labelControls, List.class);
DynamicObjectCollection dynamicObjectCollection = (DynamicObjectCollection) this.getModel().getValue("kdec_fixed_label");
if (dynamicObjectCollection!=null && dynamicObjectCollection.size()>0) {
for(DynamicObject dynamicObject:dynamicObjectCollection){
DynamicObject baseObj = dynamicObject.getDynamicObject("fbasedataid");
String number = baseObj.getString("number");
Container container = this.getView().getControl("kdec_flexpanelap4");
container.deleteControls(number.toLowerCase());
}
this.getView().updateView("kdec_flexpanelap4");
}
}
/**
* 动态添加标签控件
* */
private void addLabel(DynamicObject dynamicObject){
Container container = this.getView().getControl("kdec_flexpanelap4");
LabelAp label1 = new LabelAp();
String number = dynamicObject.getString("number");
label1.setId(number);
//先删除原有的标签，避免覆盖生成
// container.deleteControls(number);
label1.setKey(number);
label1.setName(new LocaleString(dynamicObject.getString("name")));
if(dynamicObject.getString("kdec_labeltype").contains("0")){
// label1.setForeColor("blue");
label1.setBackColor("blue");
}else{
// label1.setForeColor("green");
label1.setBackColor("green");
}
label1.setForeColor("white");
label1.setFontSize(14);
label1.setParentId("kdec_flexpanelap4");
Style style = new Style();
//外边距
Margin margin = new Margin();
margin.setRight("0.7em");
style.setMargin(margin);
label1.setStyle(style);
List<Map<String, Object>> items = new ArrayList<>();
items.add(label1.createControl());
container.addControls(items);
}
}2、标签选择页面的动态表单插件
实现内容：树控件数据的构建及交互。
package kdec.showcloud.showapp.plugin.form;
/**
* 动态表单插件
*/
public class SelectLabelForm extends AbstractFormPlugin implements SearchEnterListener, TreeNodeCheckListener {
public static String TREEVIEW_AP = "kdec_treeviewap"; //左树控件
public static String TREEVIEW_SELECT = "kdec_treeviewselect"; //右树控件
public static String ROOTNODE = "rootnode"; //根节点
public static String ENABLE = "enable";
public static String LEFT_ROOT = "leftRoot"; //左侧树
public static String FIXED_LABEL = "kdec_fixed_label"; //基础资料标识
@Override
public void registerListener(EventObject e) {
super.registerListener(e);
Button kdec_btn_addnode = this.getControl("kdec_btn_addnode");
kdec_btn_addnode.addClickListener(this);
Button kdec_btn_delnode = this.getControl("kdec_btn_delnode");
kdec_btn_delnode.addClickListener(this);
TreeView leftTree = this.getControl(TREEVIEW_AP);
leftTree.addTreeNodeCheckListener(this);
Button kdec_metaconfirm = this.getControl("kdec_metaconfirm");
kdec_metaconfirm.addClickListener(this);
Search searchap = this.getControl("kdec_searchap");
searchap.addEnterListener(this);
Search rightSearchap = this.getControl("kdec_searchap1");
rightSearchap.addEnterListener(this);
}
@Override
public void afterCreateNewData(EventObject e) {
FormShowParameter fsp = this.getView().getFormShowParameter();
JSONArray selectlabes = fsp.getCustomParam("selectlabes");
// 左侧树
// 根节点初始化
TreeNode leftRoot = this.leftTreeInit();
// 左侧树控件
TreeView leftTree = this.getView().getControl(TREEVIEW_AP);
// 节点信息添加到树中
leftTree.addNode(leftRoot);
// 设置根节点不可见
leftTree.setRootVisible(true);
// 右侧树
// 根节点初始化
TreeNode rightRoot = new TreeNode("", ROOTNODE, "全部");
rightRoot.setIsOpened(true);
TreeView rightTree = this.getView().getControl(TREEVIEW_SELECT);
rightTree.addNode(rightRoot);
List<Map<String, Object>> selectNodes = leftTree.getTreeState().getSelectedNodes();
// 设置根节点不可见
rightTree.setRootVisible(true);
if (selectlabes!=null){//初始化已选标签
initCheckNodes(leftTree,leftRoot,selectlabes);
}
}
//带出已选数据
private void initCheckNodes(TreeView leftTree, TreeNode leftRoot, JSONArray selectlabes) {
List<Object> ids = new ArrayList<>();
for(int index=0;index<selectlabes.size();index++) {
JSONObject jobj = (JSONObject) selectlabes.get(index);
JSONObject labels = (JSONObject) jobj.get("fbasedataid");
ids.add(labels.getString("id"));
}
List<TreeNode> preCheckNodes =checkNodes(leftRoot,ids);
//获取要初始化选择的节点
leftTree.checkNodes(preCheckNodes);
leftTree.updateNodes(preCheckNodes);
addNode(0);
}
//递归获取节点
private List<TreeNode> checkNodes(TreeNode curNode, List<Object> ids) {
List<TreeNode> treeNodes = new ArrayList<>();
String NodeId = curNode.getId();
List<TreeNode> children = curNode.getChildren();
if (ids.contains(NodeId)){
treeNodes.add(curNode);
// curNode.setIsOpened(true);
}else if (children!=null&&!children.isEmpty()){
for(TreeNode tnode:children){
treeNodes.addAll(checkNodes(tnode, ids));
}
}
return treeNodes;
}
@Override
public void click(EventObject evt) {
String key = ((Control)evt.getSource()).getKey().toLowerCase(Locale.ENGLISH);
byte var4 = -1;
switch(key.hashCode()) {
case 1143382712:
if (key.equals("kdec_btn_addnode")) {
var4 = 0;
}
break;
case -453056222:
if (key.equals("kdec_btn_delnode")) {
var4 = 1;
}
break;
case 539270291:
if(key.equals("kdec_metaconfirm")){
var4 = 2;
}
}
switch(var4) {
case 0:
this.addNode(1);
break;
case 1:
this.deleteNode();
break;
case 2:
this.submitNode();
}
}
private void submitNode(){
String rightNodeCache = this.getPageCache().get("rightRoot");
JSONObject jsonObject =JSONObject.parseObject(rightNodeCache);
List<Object> list = new ArrayList<>();
if(jsonObject !=null){
if(checkChild(jsonObject)!=null && checkChild(jsonObject).size()>0){
Object[] objects =getChildIs(checkChild(jsonObject),list);
Map<String,Object> map = new HashMap<>();
map.put("righttree",rightNodeCache);
map.put("ids",objects);
this.getView().returnDataToParent(map); //将数据回传到父页面
this.getView().close();
}
}else{
Map<String,Object> map = new HashMap<>();
map.put("righttree",null);
map.put("ids",null);
map.put("setCancell","true");
this.getView().returnDataToParent(map); //将数据回传到父页面
this.getView().close();
}
}
/**
* 判断取到的子节点的id
* */
public Object[] getChildIs(JSONArray jsonArray,List<Object> list){
for(int i=0;i<jsonArray.size();i++){
JSONObject jsonObject = jsonArray.getJSONObject(i);
if(checkChild(jsonObject)!=null && checkChild(jsonObject).size()>0){
getChildIs(checkChild(jsonObject),list);
}else{
list.add(jsonObject.getLong("id"));
}
}
return list.toArray();
}
/**
* 判断是否存在子节点
*/
private JSONArray checkChild(JSONObject jsonObject){
JSONArray jsonArray = jsonObject.getJSONArray("children");
return jsonArray;
}
/**
* 添加右树节点
*
* @param ifcheckNull*/
private void addNode(int ifcheckNull) {
TreeView rightTree = (TreeView)this.getView().getControl("kdec_treeviewselect");
TreeView leftTree = (TreeView)this.getView().getControl("kdec_treeviewap");
List<String> leftSelectIds = leftTree.getTreeState().getCheckedNodeIds();
if (leftSelectIds.isEmpty()&&ifcheckNull==1) {
this.getView().showTipNotification("请选择需要的标签。");
} else {
TreeNode selectedNode = this.genRightTreeNode();
selectedNode.setIsOpened(true);
rightTree.deleteAllNodes();
rightTree.addNode(selectedNode);
rightTree.updateNode(selectedNode);
if (leftSelectIds.size() > 0) {
List<Map<String, Object>> selectNodes = leftTree.getTreeState().getSelectedNodes();
//TODO右边展开数据
for(Map<String, Object>selectNodeInfo:selectNodes ) {
String nodeId = (String) selectNodeInfo.get("id");
String parentNodeId = (String) selectNodeInfo.get("parentid");
if (selectNodeInfo.containsKey("isParent")) {
boolean isParent = (Boolean) selectNodeInfo.get("isParent");
if (isParent) {
rightTree.showNode(nodeId);
rightTree.expand(nodeId);
} else {
rightTree.showNode(parentNodeId);
rightTree.expand(parentNodeId);
}
}
}
}
}
leftTree.uncheckNodes(leftSelectIds);
}
/**
*删除右树节点
* */
private void deleteNode() {
TreeView selectTree = (TreeView)this.getView().getControl("kdec_treeviewselect");
List<String> ids = selectTree.getTreeState().getCheckedNodeIds();
if (ids.isEmpty()) {
this.getView().showTipNotification("请选择需要移除的数据。");
} else {
ids.remove("rootnode");
如何动态添加标签及构建树
关键词：树控件、标签一、需求在产品管理过程中，需要给不同的产品添加上不同的标签属性，要求：（1）打标签时，以树形形式展示已有标签。...
点击下载文档文档为doc格式
声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
上一篇
已经是第一篇
