移动端级联组件mCascader

洛阳醉长安行 - 2021-08-24 00:02:04

---

移动端开发中可能会涉及到树状数据的选择，由于mui中没有比较好的组件可以使用，所以我基于mui和jq开发了一款可以在移动端操作级联的气泡组件。
源码地址：https://github.com/booms21/mC...

mCascader

mCascader 是一款mui风格的移动端h5气泡级联框，支持可选择任意层级、默认值、分隔符

使用方法：

首先引入mui和jq库，mCascader.css（cascader的样式）

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css"
      rel="stylesheet"
    />
    <link href="css/mCascader.css" rel="stylesheet" />
     <script src="js/mCascader.js"></script>

直接调用mCascader方法，并传入配置项：

 mCascader({
     input:'#demo', //对应input的id
     data:data, //mCascader 的数据
     value:[''],//mCascader的默认值,默认值节点的id字符串
     separator:'/', //input中的分隔符
     onClick:function(node){ //当选择完成时的回调函数，node为当前点击的点击的节点
       console.log(node)
     }
   });

input：

对应文本框的选择器，字符串类型

data：

mCascader的数据。Array类型，树结构，data中的节点必须要有以下属性：

 data = [{
   id:'',  // 必须,唯一的id值，String类型
   name:'', //必须,对应mCascader节点的显示文本 ，String类型
   children:[...] //子节点 ，Array类型
    },...]

获取mCascader当前的id值(2种)：

1.mCascader.currtId

2.$('#demo').data('id')或$(mCascader.options.input).data('id')

返回上一层级：

mCascader.back()

清空mCascader数据及重置界面：

mCascader.clear()

例子：mcascader的DOM不写死到js中，保留了原本组件的结构，方便你自定义组件的样式

    <div id="mcascaderPopover" >
      <div >
        <button
          type="button"
          id="goback"
          
          onclick="mCascader.goBack()"
        >
          <span ></span></button
        >请选择一个节点
      </div>
      <div id="mcascader">
        <p id="noData" >无数据</p>
        <ul ></ul>
      </div>
    </div>

    <div >
      <div ><a href="#mcascaderPopover"></a>节点：</div>

      <input type="text" id="demo"  placeholder="请选择" readonly />
    </div>
  <script src="js/mCascader.js"></script>
  <script>
    var json = [
      {
        name: "节点1",
        id: "1",
        children: [
          { name: "节点11", id: "1-1", children: [] },
          {
            name: "节点12",
            id: "1-2",
            children: [
              { name: "节点122221", id: "1-2-1", children: [] },
              { name: "节点12222222", id: "1-2-2", children: [] },
            ],
          },
          { name: "节点123", id: "1-3", children: [] },
          { name: "节点244", id: "1-4", children: [] },
        ],
      },
      {
        name: "节点2",
        id: "2",
        children: [
          { name: "节点24411111", id: "2-4", children: [] },
          { name: "节点55555", id: "2-7", children: [] },
        ],
      },
    ]; //存储过滤的值
    mCascader({
      input: "#demo", //对应input的id
      data: json, //mCascader 的数据
      value: ["1-2-2"],//mCascader的默认值
      separator: "/", //input中的分隔符
      onClick: function (node) {
        //当选择完成时的回调函数
        console.log(node);
      },
    });
  </script>

欢迎你参与贡献！?

Tags 标签

移动端html5mui

扩展阅读