当前位置: 首页 > 编程笔记 >

Android实现多级树形选择列表

解阳泽
2023-03-14
本文向大家介绍Android实现多级树形选择列表,包括了Android实现多级树形选择列表的使用技巧和注意事项,需要的朋友参考一下

项目中有多个地方要用到多级列表的菜单,最开始我用的是ExpandableListView,但问题是ExpandableListView只支持两级列表,于是我就用ExpandableListView嵌套ExpandableListView,但非常麻烦,而且关键的是具体分几级是不确定的,也就是可能一级,可能多级,这要是五六级嵌套ListView,于是我就去学习鸿洋大神之前写的一篇关于实现Android多级树形列表的文章,实现很巧妙,使用一个ListView就可以实现多级列表效果,我做了部分修改,功能顺利实现。

1.定义节点实体类:

package com.xiaoyehai.multileveltreelist.treelist;

import java.util.ArrayList;
import java.util.List;

/**
 * 节点实体类
 * Created by xiaoyehai on 2018/7/11 0011.
 */

public class Node<T> {
 /**
 * 当前节点id
 */
 private String id;

 /**
 * 父节点id
 */
 private String pid;

 /**
 * 节点数据实体类
 */
 private T data;

 /**
 * 设置开启 关闭的图片
 */
 public int iconExpand = -1, iconNoExpand = -1;

 /**
 * 节点名称
 */
 private String name;

 /**
 * 当前的级别
 */
 private int level;

 /**
 * 是否展开
 */
 private boolean isExpand = false;

 private int icon = -1;

 /**
 * 下一级的子Node
 */
 private List<Node> children = new ArrayList<>();

 /**
 * 父Node
 */
 private Node parent;

 /**
 * 是否被checked选中
 */
 private boolean isChecked;

 public Node() {
 }

 public Node(String id, String pid, String name) {
 this.id = id;
 this.pid = pid;
 this.name = name;
 }

 public Node(String id, String pid, T data, String name) {
 this.id = id;
 this.pid = pid;
 this.data = data;
 this.name = name;
 }

 /**
 * 是否为根节点
 *
 * @return
 */
 public boolean isRootNode() {
 return parent == null;
 }

 /**
 * 判断父节点是否展开
 *
 * @return
 */
 public boolean isParentExpand() {
 if (parent == null)
  return false;
 return parent.isExpand();
 }

 /**
 * 是否是叶子节点
 *
 * @return
 */
 public boolean isLeaf() {
 return children.size() == 0;
 }

 /**
 * 获取当前的级别level
 */
 public int getLevel() {
 return parent == null ? 0 : parent.getLevel() + 1;
 }

 /**
 * 设置展开
 *
 * @param isExpand
 */
 public void setExpand(boolean isExpand) {
 this.isExpand = isExpand;
 if (!isExpand) {
  for (Node node : children) {
  node.setExpand(isExpand);
  }
 }
 }


 public String getId() {
 return id;
 }

 public void setId(String id) {
 this.id = id;
 }

 public String getPid() {
 return pid;
 }

 public void setPid(String pid) {
 this.pid = pid;
 }

 public T getData() {
 return data;
 }

 public void setData(T data) {
 this.data = data;
 }

 public int getIconExpand() {
 return iconExpand;
 }

 public void setIconExpand(int iconExpand) {
 this.iconExpand = iconExpand;
 }

 public int getIconNoExpand() {
 return iconNoExpand;
 }

 public void setIconNoExpand(int iconNoExpand) {
 this.iconNoExpand = iconNoExpand;
 }

 public String getName() {
 return name;
 }

 public void setName(String name) {
 this.name = name;
 }


 public void setLevel(int level) {
 this.level = level;
 }

 public boolean isExpand() {
 return isExpand;
 }

 public int getIcon() {
 return icon;
 }

 public void setIcon(int icon) {
 this.icon = icon;
 }

 public List<Node> getChildren() {
 return children;
 }

 public void setChildren(List<Node> children) {
 this.children = children;
 }

 public Node getParent() {
 return parent;
 }

 public void setParent(Node parent) {
 this.parent = parent;
 }

 public boolean isChecked() {
 return isChecked;
 }

 public void setChecked(boolean checked) {
 isChecked = checked;
 }
}

2.定义每个节点数据的实体类

因为项目中多个地方用到树形菜单,而且数据都不一样,每个节点数据都比较复杂,所以我单独封装出一个类,要是数据和简单,这步可以不用,直接用Node类。

例如:

/**
 * 每个节点的具体数据
 * Created by xiaoyehai on 2018/7/11 0011.
 */

public class NodeData {

 private String name;

 public NodeData() {
 }

 public NodeData(String name) {
 this.name = name;
 }

 public String getName() {
 return name;
 }

 public void setName(String name) {
 this.name = name;
 }
}

3.TreeHelper

package com.xiaoyehai.multileveltreelist.treelist;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by xiaoyehai on 2018/7/11 0011.
 */

public class TreeHelper {
 /**
 * 传入node 返回排序后的Node
 * 拿到用户传入的数据,转化为List<Node>以及设置Node间关系,然后根节点,从根往下遍历进行排序;
 *
 * @param datas
 * @param defaultExpandLevel 默认显示
 * @return
 * @throws IllegalArgumentException
 * @throws IllegalAccessException
 */
 public static List<Node> getSortedNodes(List<Node> datas, int defaultExpandLevel) {
 List<Node> result = new ArrayList<Node>();
 // 设置Node间父子关系
 List<Node> nodes = convetData2Node(datas);
 // 拿到根节点
 List<Node> rootNodes = getRootNodes(nodes);
 // 排序以及设置Node间关系
 for (Node node : rootNodes) {
  addNode(result, node, defaultExpandLevel, 1);
 }
 return result;
 }

 /**
 * 过滤出所有可见的Node
 * 过滤Node的代码很简单,遍历所有的Node,只要是根节点或者父节点是展开状态就添加返回
 *
 * @param nodes
 * @return
 */
 public static List<Node> filterVisibleNode(List<Node> nodes) {
 List<Node> result = new ArrayList<Node>();

 for (Node node : nodes) {
  // 如果为跟节点,或者上层目录为展开状态
  if (node.isRootNode() || node.isParentExpand()) {
  setNodeIcon(node);
  result.add(node);
  }
 }
 return result;
 }

 /**
 * 将我们的数据转化为树的节点
 * 设置Node间,父子关系;让每两个节点都比较一次,即可设置其中的关系
 */
 private static List<Node> convetData2Node(List<Node> nodes) {

 for (int i = 0; i < nodes.size(); i++) {
  Node n = nodes.get(i);
  for (int j = i + 1; j < nodes.size(); j++) {
  Node m = nodes.get(j);
  if (m.getPid() instanceof String) {
   if (m.getPid().equals(n.getId())) { //n时m的父节点
   n.getChildren().add(m);
   m.setParent(n);
   } else if (m.getId().equals(n.getPid())) { //m时n的父节点
   m.getChildren().add(n);
   n.setParent(m);
   }
  } else {
   if (m.getPid() == n.getId()) {
   n.getChildren().add(m);
   m.setParent(n);
   } else if (m.getId() == n.getPid()) {
   m.getChildren().add(n);
   n.setParent(m);
   }
  }
  }
 }
 return nodes;
 }

 /**
 * 获得根节点
 *
 * @param nodes
 * @return
 */
 private static List<Node> getRootNodes(List<Node> nodes) {
 List<Node> root = new ArrayList<Node>();
 for (Node node : nodes) {
  if (node.isRootNode())
  root.add(node);
 }
 return root;
 }

 /**
 * 把一个节点上的所有的内容都挂上去
 * 通过递归的方式,把一个节点上的所有的子节点等都按顺序放入
 */
 private static <T> void addNode(List<Node> nodes, Node<T> node, int defaultExpandLeval, int currentLevel) {
 nodes.add(node);
 if (defaultExpandLeval >= currentLevel) {
  node.setExpand(true);
 }

 if (node.isLeaf())
  return;
 for (int i = 0; i < node.getChildren().size(); i++) {
  addNode(nodes, node.getChildren().get(i), defaultExpandLeval, currentLevel + 1);
 }
 }

 /**
 * 设置节点的图标
 *
 * @param node
 */
 private static void setNodeIcon(Node node) {
 if (node.getChildren().size() > 0 && node.isExpand()) {
  node.setIcon(node.iconExpand);
 } else if (node.getChildren().size() > 0 && !node.isExpand()) {
  node.setIcon(node.iconNoExpand);
 } else {
  node.setIcon(-1);
 }
 }
}

4.TreeListViewAdapter

对于ListView的适配器,需要继承自TreeListViewAdapter,如

package com.xiaoyehai.multileveltreelist.treelist;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by xiaoyehai on 2018/7/11 0011.
 */

public abstract class TreeListViewAdapter extends BaseAdapter {

 protected Context mContext;

 /**
 * 默认不展开
 */
 private int defaultExpandLevel = 0;

 /**
 * 展开与关闭的图片
 */
 private int iconExpand = -1, iconNoExpand = -1;

 /**
 * 存储所有的Node
 */
 protected List<Node> mAllNodes = new ArrayList<>();

 protected LayoutInflater mInflater;

 /**
 * 存储所有可见的Node
 */
 protected List<Node> mNodes = new ArrayList<>();

 /**
 * 点击的回调接口
 */
 private OnTreeNodeClickListener onTreeNodeClickListener;

 public void setOnTreeNodeClickListener(OnTreeNodeClickListener onTreeNodeClickListener) {
 this.onTreeNodeClickListener = onTreeNodeClickListener;
 }

 public TreeListViewAdapter(ListView listView, Context context, List<Node> datas, int defaultExpandLevel, int iconExpand, int iconNoExpand) {
 this.mContext = context;
 this.defaultExpandLevel = defaultExpandLevel;
 this.iconExpand = iconExpand;
 this.iconNoExpand = iconNoExpand;

 for (Node node : datas) {
  node.getChildren().clear();
  node.setIconExpand(iconExpand);
  node.setIconNoExpand(iconNoExpand);
 }

 /**
  * 对所有的Node进行排序
  */
 mAllNodes = TreeHelper.getSortedNodes(datas, defaultExpandLevel);

 /**
  * 过滤出可见的Node
  */
 mNodes = TreeHelper.filterVisibleNode(mAllNodes);

 mInflater = LayoutInflater.from(context);

 /**
  * 设置节点点击时,可以展开以及关闭;并且将ItemClick事件继续往外公布
  */
 listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

  expandOrCollapse(position);

  if (onTreeNodeClickListener != null) {
   onTreeNodeClickListener.onClick(mNodes.get(position), position);
  }
  }

 });
 }

 /**
 * @param listView
 * @param context
 * @param datas
 * @param defaultExpandLevel 默认展开几级树
 */
 public TreeListViewAdapter(ListView listView, Context context, List<Node> datas, int defaultExpandLevel) {
 this(listView, context, datas, defaultExpandLevel, -1, -1);
 }

 /**
 * 相应ListView的点击事件 展开或关闭某节点
 *
 * @param position
 */
 public void expandOrCollapse(int position) {
 Node n = mNodes.get(position);

 if (n != null) {// 排除传入参数错误异常
  if (!n.isLeaf()) {
  n.setExpand(!n.isExpand());
  //获取所有可见的Node
  mNodes = TreeHelper.filterVisibleNode(mAllNodes);
  notifyDataSetChanged();// 刷新视图
  }
 }
 }

 @Override
 public int getCount() {
 return mNodes.size();
 }

 @Override
 public Object getItem(int position) {
 return mNodes.get(position);
 }

 @Override
 public long getItemId(int position) {
 return position;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 Node node = mNodes.get(position);
 convertView = getConvertView(node, position, convertView, parent);
 // 设置内边距
 convertView.setPadding(node.getLevel() * 50, 12, 12, 12);
 return convertView;
 }

 /**
 * 获取排序后所有节点
 *
 * @return
 */
 public List<Node> getAllNodes() {
 if (mAllNodes == null)
  mAllNodes = new ArrayList<Node>();
 return mAllNodes;
 }

 /**
 * 获取所有选中节点
 *
 * @return
 */
 public List<Node> getSelectedNode() {
 List<Node> checks = new ArrayList<Node>();
 for (int i = 0; i < mAllNodes.size(); i++) {
  Node n = mAllNodes.get(i);
  if (n.isChecked()) {
  checks.add(n);
  }
 }
 return checks;
 }


 /**
 * 设置多选
 *
 * @param node
 * @param checked
 */
 protected void setChecked(final Node node, boolean checked) {
 node.setChecked(checked);
 setChildChecked(node, checked);
 if (node.getParent() != null)
  setNodeParentChecked(node.getParent(), checked);
 notifyDataSetChanged();
 }

 /**
 * 设置是否选中
 *
 * @param node
 * @param checked
 */
 public <T> void setChildChecked(Node<T> node, boolean checked) {
 if (!node.isLeaf()) {
  node.setChecked(checked);
  for (Node childrenNode : node.getChildren()) {
  setChildChecked(childrenNode, checked);
  }
 } else {
  node.setChecked(checked);
 }
 }

 private void setNodeParentChecked(Node node, boolean checked) {
 if (checked) {
  node.setChecked(checked);
  if (node.getParent() != null)
  setNodeParentChecked(node.getParent(), checked);
 } else {
  List<Node> childrens = node.getChildren();
  boolean isChecked = false;
  for (Node children : childrens) {
  if (children.isChecked()) {
   isChecked = true;
  }
  }
  //如果所有自节点都没有被选中 父节点也不选中
  if (!isChecked) {
  node.setChecked(checked);
  }
  if (node.getParent() != null)
  setNodeParentChecked(node.getParent(), checked);
 }
 }

 /**
 * 清除掉之前数据并刷新 重新添加
 *
 * @param mlists
 * @param defaultExpandLevel 默认展开几级列表
 */
 public void addDataAll(List<Node> mlists, int defaultExpandLevel) {
 mAllNodes.clear();
 addData(-1, mlists, defaultExpandLevel);
 }

 /**
 * 在指定位置添加数据并刷新 可指定刷新后显示层级
 *
 * @param index
 * @param mlists
 * @param defaultExpandLevel 默认展开几级列表
 */
 public void addData(int index, List<Node> mlists, int defaultExpandLevel) {
 this.defaultExpandLevel = defaultExpandLevel;
 notifyData(index, mlists);
 }

 /**
 * 在指定位置添加数据并刷新
 *
 * @param index
 * @param mlists
 */
 public void addData(int index, List<Node> mlists) {
 notifyData(index, mlists);
 }

 /**
 * 添加数据并刷新
 *
 * @param mlists
 */
 public void addData(List<Node> mlists) {
 addData(mlists, defaultExpandLevel);
 }

 /**
 * 添加数据并刷新 可指定刷新后显示层级
 *
 * @param mlists
 * @param defaultExpandLevel
 */
 public void addData(List<Node> mlists, int defaultExpandLevel) {
 this.defaultExpandLevel = defaultExpandLevel;
 notifyData(-1, mlists);
 }

 /**
 * 添加数据并刷新
 *
 * @param node
 */
 public void addData(Node node) {
 addData(node, defaultExpandLevel);
 }

 /**
 * 添加数据并刷新 可指定刷新后显示层级
 *
 * @param node
 * @param defaultExpandLevel
 */
 public void addData(Node node, int defaultExpandLevel) {
 List<Node> nodes = new ArrayList<>();
 nodes.add(node);
 this.defaultExpandLevel = defaultExpandLevel;
 notifyData(-1, nodes);
 }

 /**
 * 刷新数据
 *
 * @param index
 * @param mListNodes
 */
 public void notifyData(int index, List<Node> mListNodes) {
 for (int i = 0; i < mListNodes.size(); i++) {
  Node node = mListNodes.get(i);
  node.getChildren().clear();
  node.iconExpand = iconExpand;
  node.iconNoExpand = iconNoExpand;
 }
 for (int i = 0; i < mAllNodes.size(); i++) {
  Node node = mAllNodes.get(i);
  node.getChildren().clear();
  //node.isNewAdd = false;
 }
 if (index != -1) {
  mAllNodes.addAll(index, mListNodes);
 } else {
  mAllNodes.addAll(mListNodes);
 }
 /**
  * 对所有的Node进行排序
  */
 mAllNodes = TreeHelper.getSortedNodes(mAllNodes, defaultExpandLevel);
 /**
  * 过滤出可见的Node
  */
 mNodes = TreeHelper.filterVisibleNode(mAllNodes);
 //刷新数据
 notifyDataSetChanged();
 }


 public abstract View getConvertView(Node node, int position, View convertView, ViewGroup parent);
}

5.接口回调:

选中状态改变的回调:

package com.xiaoyehai.multileveltreelist.treelist;

/**
 * Created by xiaoyehai on 2018/7/12 0012.
 */

public interface OnTreeNodeCheckedChangeListener {

 void onCheckChange(Node node, int position, boolean isChecked);
}

条目点击的回调:

package com.xiaoyehai.multileveltreelist.treelist;

/**
 * Created by xiaoyehai on 2018-07-12.
 */
public interface OnTreeNodeClickListener {
 void onClick(Node node, int position);
}

6.使用:

布局文件:

<ListView
 android:id="@+id/listview"
 android:layout_width="match_parent"
 android:layout_height="match_parent"></ListView>

Activity:

public class ListViewActivity extends AppCompatActivity {

 private ListView mListView;

 private List<Node> dataList = new ArrayList<>();
 private ListViewAdapter mAdapter;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_list_view);

 mListView = (ListView) findViewById(R.id.listview);

 initData();

 //第一个参数 ListView
 //第二个参数 上下文
 //第三个参数 数据集
 //第四个参数 默认展开层级数 0为不展开
 //第五个参数 展开的图标
 //第六个参数 闭合的图标
 mAdapter = new ListViewAdapter(mListView, this, dataList,
  0, R.drawable.zoomout_yzs, R.drawable.zoomin_yzs);

 mListView.setAdapter(mAdapter);

 //获取所有节点
 final List<Node> allNodes = mAdapter.getAllNodes();
 for (Node allNode : allNodes) {
  //Log.e("xyh", "onCreate: " + allNode.getName());
 }

 //选中状态监听
 mAdapter.setCheckedChangeListener(new OnTreeNodeCheckedChangeListener() {
  @Override
  public void onCheckChange(Node node, int position, boolean isChecked) {
  //获取所有选中节点
  List<Node> selectedNode = mAdapter.getSelectedNode();
  for (Node n : selectedNode) {
   Log.e("xyh", "onCheckChange: " + n.getName());
  }
  }
 });
 }

 /**
 * 模拟数据,实际开发中对返回的json数据进行封装
 */
 private void initData() {
 //根节点
 Node<NodeData> node = new Node<>("0", "-1", "根节点1");
 dataList.add(node);
 dataList.add(new Node<>("1", "-1", "根节点2"));
 dataList.add(new Node<>("2", "-1", "根节点3"));

 //根节点1的二级节点
 dataList.add(new Node<>("3", "0", "二级节点"));
 dataList.add(new Node<>("4", "0", "二级节点"));
 dataList.add(new Node<>("5", "0", "二级节点"));

 //根节点2的二级节点
 dataList.add(new Node<>("6", "1", "二级节点"));
 dataList.add(new Node<>("7", "1", "二级节点"));
 dataList.add(new Node<>("8", "1", "二级节点"));

 //根节点3的二级节点
 dataList.add(new Node<>("9", "2", "二级节点"));
 dataList.add(new Node<>("10", "2", "二级节点"));
 dataList.add(new Node<>("11", "2", "二级节点"));

 //三级节点
 dataList.add(new Node<>("12", "3", "三级节点"));
 dataList.add(new Node<>("13", "3", "三级节点"));
 dataList.add(new Node<>("14", "3", "三级节点"));

 dataList.add(new Node<>("15", "4", "三级节点"));
 dataList.add(new Node<>("16", "4", "三级节点"));
 dataList.add(new Node<>("17", "4", "三级节点"));

 dataList.add(new Node<>("18", "5", "三级节点"));
 dataList.add(new Node<>("19", "5", "三级节点"));
 dataList.add(new Node<>("20", "5", "三级节点"));

 //四级节点
 dataList.add(new Node<>("21", "12", "四级节点"));

 //...
 //可以有无线多层级
 }
}

adapter:

package com.xiaoyehai.multileveltreelist.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.xiaoyehai.multileveltreelist.R;
import com.xiaoyehai.multileveltreelist.treelist.OnTreeNodeCheckedChangeListener;
import com.xiaoyehai.multileveltreelist.treelist.TreeListViewAdapter;
import com.xiaoyehai.multileveltreelist.treelist.Node;

import java.util.List;

/**
 * Created by xiaoyehai on 2018/7/12 0012.
 */

public class ListViewAdapter extends TreeListViewAdapter {

 private OnTreeNodeCheckedChangeListener checkedChangeListener;

 public void setCheckedChangeListener(OnTreeNodeCheckedChangeListener checkedChangeListener) {
 this.checkedChangeListener = checkedChangeListener;
 }

 public ListViewAdapter(ListView listView, Context context, List<Node> datas, int defaultExpandLevel, int iconExpand, int iconNoExpand) {
 super(listView, context, datas, defaultExpandLevel, iconExpand, iconNoExpand);
 }

 @Override
 public View getConvertView(final Node node, final int position, View convertView, ViewGroup parent) {
 final ViewHolder holder;
 if (convertView == null) {
  convertView = View.inflate(mContext, R.layout.item, null);
  holder = new ViewHolder(convertView);
  convertView.setTag(holder);
 } else {
  holder = (ViewHolder) convertView.getTag();
 }

 holder.tvName.setText(node.getName());

 if (node.getIcon() == -1) {
  holder.ivExpand.setVisibility(View.INVISIBLE);
 } else {
  holder.ivExpand.setVisibility(View.VISIBLE);
  holder.ivExpand.setImageResource(node.getIcon());
 }


 holder.checkBox.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  setChecked(node, holder.checkBox.isChecked());

  if (checkedChangeListener != null) {
   checkedChangeListener.onCheckChange(node, position,holder.checkBox.isChecked());
  }
  }
 });

 if (node.isChecked()) {
  holder.checkBox.setChecked(true);
 } else {
  holder.checkBox.setChecked(false);
 }

 return convertView;
 }

 static class ViewHolder {
 private CheckBox checkBox;
 private TextView tvName;
 private ImageView ivExpand;

 public ViewHolder(View convertView) {
  checkBox = convertView.findViewById(R.id.cb);
  tvName = convertView.findViewById(R.id.tv_name);
  ivExpand = convertView.findViewById(R.id.iv_expand);
 }
 }
}

也可以用RecycleView实现,在我的项目里面都有。

[项目地址]:MultilevelTreeList

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android 绘制多级树形选择列表实例代码,包括了Android 绘制多级树形选择列表实例代码的使用技巧和注意事项,需要的朋友参考一下 一、概述 前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等。另外需要加上展开与回收部门详情、关闭部分已开展的布局、勾选等功能。 效果图如下:   二、思路分

  • 利用UITableView 显示多级树形目录。可以用于文件查看系统。 借助以下两个属性实现多级树形目录 @property(nonatomic) NSInteger indentationLevel; // adjust content indent. default is 0 @property(nonatomic) CGFloat indentationWidth; // width for

  • 我需要在中选择多个图像,并在中添加共享和删除按钮。 My类别: 但是当我试图打开Gridview时,它给我一个错误。 我的Logcat细节 02-10 21:10:46.965 21658-21658/com。Android示例E/AndroidRuntime﹕ 致命异常:主进程:com。Android例如,PID:21658java。ClassCastException:android。小装置。

  • 本文向大家介绍js实现无限级树形导航列表效果代码,包括了js实现无限级树形导航列表效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现无限级树形导航列表效果代码。分享给大家供大家参考。具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • 本文向大家介绍Android组件实现列表选择框功能,包括了Android组件实现列表选择框功能的使用技巧和注意事项,需要的朋友参考一下 android提供的列表选择框(Spinner)相当于web端用户注册时的选择下拉框,比如注册候选择省份城市等。如下图便是一个列表选择框 下拉列表的列表选择项能够通过xml文件的android:entries属性指定,或是在java代码中导入,属性android:

  • 本文向大家介绍vue实现的树形结构加多选框示例,包括了vue实现的树形结构加多选框示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考,具体如下: 前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如