main

分支 (2)

标签 (6)

管理

管理

main

gh-pages

v1.7.6

v1.7.5

v1.7.1

v1.7.0

1.0

v1.0

lay_cascader
/
layui_from.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/layui@2.9.10/dist/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="./cascader/cascader.css"/>
    <script src="https://unpkg.com/layui@2.9.10/dist/layui.js"></script>
    <title>LayCascader级联From演示</title>
</head>
<body>
<form class="layui-form">
    <div class="layui-form-item" style="width: 900px;">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 900px;">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select name="status" multiple lay-search lay-verify="required" class="layui-input" required>
                <option value>请选择设备状态</option>
                <option value="S0A">无效</option>
                <option value="S0X">有效</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="width: 900px;">
        <label class="layui-form-label">所在地区</label>
        <div class="layui-input-block">
            <input id="area" name="area" required lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item" style="width: 900px;">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select name="status" lay-verify="required" class="layui-input" required>
                <option value>请选择设备状态</option>
                <option value="S0A">无效</option>
                <option value="S0X">有效</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="options1">使用Options1数据</button>
            <button class="layui-btn" id="options2">使用Options2数据</button>
            <button class="layui-btn" id="destroy">销毁级联</button>
            <button class="layui-btn" id="init">初始化级联</button>
            <button class="layui-btn" id="switch">使用级联多选</button>
            <button class="layui-btn" lay-submit lay-filter="*">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
  layui.config({
    base: '/' // 请根据实际调整位置
  }).extend({
    layCascader: 'cascader/cascader' // 请根据实际调整位置
  });

  layui.use(['form', 'layCascader','jquery'], function () {
    var form = layui.form;
    var $ = layui.jquery;
    form.on('submit(*)', function (data) {
      console.log(data);
      return false;
    });

    var layCascader = layui.layCascader;
    var options = [{
      id: 'gd',
      title: '广东',
      children: [{
        id: 'gz',
        title: '广州'
      }, {
        id: 'fs',
        title: '佛山'
      }, {
        id: 'sz',
        title: '深圳'
      }]
    }, {
      id: 'gx',
      title: '广西',
      children: [{
        id: 'gl',
        title: '桂林'
      }, {
        id: 'nn',
        title: '南宁'
      }]
    }];
    var options2 = [{
      id: 'fj',
      title: '福建',
      children: [{
        id: 'qz',
        title: '泉州'
      }, {
        id: 'xm',
        title: '厦门'
      }, {
        id: 'zz',
        title: '漳州'
      }]
    }, {
      id: 'hn',
      title: '河南',
      children: [{
        id: 'zhengzhou',
        title: '郑州'
      }, {
        id: 'nn',
        title: '南宁'
      }]
    }];
    var layCascader1 = layCascader({
      props:{
        checkStrictly: true,
        label: 'title',
        value: 'id',
        city_id: 'city_id'
      },
      value: 'gz',
      elem: '#area',
      showAllLevels: true,
      filterable: true,
      placeholder: '请选择设备归属机构',
      clearable: true,
      options: options,
      extendClass: true
    });
    layCascader1.openEvent(function() {
      console.log('打开级联窗口')
    });
    layCascader1.destroyEvent(function() {
      console.log('销毁级联窗口')
    });

    $('#options1').click(function () {
        layCascader1.setOptions(options);
    });
    $('#options2').click(function () {
        layCascader1.setOptions(options2);
    });
    $('#destroy').click(function () {
      layCascader1.destroy();
    });
    $('#init').click(function () {
      layCascader1 = layCascader(layCascader1.getConfig());
    });
    $('#switch').click(function () {
      var config = layCascader1.getConfig();
      config.props.multiple = !config.props.multiple;
      layCascader1.setConfig(config);
      $('#switch').text(config.props.multiple ? '使用级联单选' : '使用级联多选');
    });
  });
</script>
</body>
</html>