ibase4j实现下拉多选框

最新推荐文章于 2024-04-20 09:44:54 发布

狼狂人

最新推荐文章于 2024-04-20 09:44:54 发布

阅读量237

点赞数

分类专栏： layui 文章标签： layui实现下拉多选框多选框 checkBox 下拉多选框 layui

本文链接：https://blog.csdn.net/qq_22175485/article/details/86062370

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ibase4j实现下拉多选

实现的功能如图所示：
在这里插入图片描述

需要下载：formSelects-v4.js和formSelects-v4.css的文件，下载地址：https://download.csdn.net/download/qq_22175485/10902880

引入formSelects-v4.js和formSelects-v4.css：注意：文件目录的路径
xx.html重要代码片段：

  <link rel="stylesheet" href="css/layui.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/formSelects-v4.css" />
<script src="layui.js"></script>
<script src="./js/jsencrypt.min.js"></script>
<script>
  //config的设置是全局的
  layui.config({
    base: 'js/' //假设这是你存放拓展模块的根目录
  }).extend({ //设定模块别名
    common: 'common', // 一些封装函数
    ajax: 'ajax', // 封装的ajax
    formSelects: 'formSelects-v4'
  });

  layui.use(['form', 'table', 'jquery', 'common', 'ajax', 'laytpl', 'fixed', 'menu', 'formSelects'], function () {
    var form = layui.form
      , table = layui.table
      , $ = layui.jquery
      , common = layui.common
      , ajax = layui.ajax
      , laytpl = layui.laytpl
      , menu = layui.menu
      , isLyjl = false
      , formSelects = layui.formSelects
      /*监听select选择*/
    layui.formSelects.on('select7_1', function(id, vals, val, isAdd, isDisabled){
    	//id:           点击select的id
        //vals:         当前select已选中的值
        //val:          当前select点击的值
        //isAdd:        当前操作选中or取消
        //isDisabled:   当前选项是否是disabled
    }, true);

	/*下拉列表封装*/
    var select = {
      getList: function (role_id) { // 获取下拉列表
    	  ajax.post('/xx/xxx/roleList', {}, true, function (req) {
          		var roleIds = [];
          		//role_id的格式：1,2,3
          		if(role_id != null){
        	  		roleIds = role_id.split(',');
          		}
          		//req返回格式：{data:[{name:"",value:""},{name:"",value:""}],httpCode:200,msg:"请求成功"}
          		//其中name和value值属性名不能改变
        		formSelects.data('select7_1', 'local', {arr : req.data});
          		formSelects.value('select7_1', roleIds,true);
          		form.render('select');
       		});
      }
     };

ajax.post('/xx/xxxx/queryById', { id:  1}, true, function (req) {
            if (req.httpCode == 200) {
            	select.getList(req.data.role_id);
            }else{
            }
        });

 });
 </script>
 <body class="layui-layout-body">
  <div class="layui-layout layui-layout-admin">

    <div class="layui-body wrap">
      <!-- 内容主体区域 -->
      <div class="content">
        <div class="contentNav"
			<form class="layui-form checkMenu" action="" id="formId">
				<div class="layui-form-item">
				    <label class="layui-form-label">用户角色</label>
				    <div class="layui-input-inline">
				        <select name="roleId" id="role_id" xm-select="select7_1" xm-select-search="" lay-filter="role_id" lay-verType="tips" lay-verify="required">
				          
				        </select>
				    </div>
				</div>
				    
    		</form>
        </div>
      </div>
      <!-- 内容主体区域结束 -->
    </div>
  </div>
</body>