精华内容
下载资源
问答
  • layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了。 如图, 下拉框...

    在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了。

    如图,

    下拉框已经弹出,只是没有正常显示 

    解决方法非常简单,只需在table渲染方法中添加如下代码即可,

    done: function (res, curr, count) {
                    $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                }

    table渲染代码

    table.render({ //其它参数在此省略
      height: 'full-50',
      done: function (res, curr, count) {
         $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');
      }
    }); 

    因为layui的样式冲突导致表格显示在下拉框的上方,所以你需要(为select标签)设置样式使得select标签显示在上层。

    附:

    thead中的填写

    tbody的tr内容,是一个完整的下拉框

    展开全文
  • 表格中下拉框

    2019-01-18 10:49:26
    下面我们自动加载表格数据里加入下拉框的部分,下面我们来看一个例子,如在表格中我们自动加载数据的时候下拉框也自动加载进去 其实在表格中下拉框也是非常简单的。控制器写出查询状态的下拉框数据代码,...

    开发工具与关键技术:SQL、C#/MVC
    作者:王福驰
    撰写时间:2019年1月18日

    下面我们在自动加载表格数据里加入下拉框的部分,下面我们来看一个例子,如在表格中我们在自动加载数据的时候下拉框也自动加载进去

    在这里插入图片描述 其实在表格中做下拉框也是非常简单的。在控制器中写出查询状态的下拉框数据代码,和其他的查询下拉框的方法一样。

    //下拉框方法
      public ActionResult SelectTellerStatus()
            {
                var list = myModel.SYS_TellerStatus.Select(m => new { id = m.TellerStatusID, name = m.TellerStatus }).ToList();
                return Json(list, JsonRequestBehavior.AllowGet);
            }
    

    在HTML中的《th》添加w_render如下代码

    <thead>
                    <tr>
     
                        <th w_index="TitleID" w_check="true"></th>
                        <th w_index="OperatorNunber">操作员号</th>
                        <th w_index="TellerNumber">柜员号</th>
                        <th w_index="TellerName">柜员名</th>
                        <th w_index="TellerStatus" w_render="createSelect">柜员状态</th>
                        <th w_render="SetState">在线状态</th><!--SetState-->
                        <th w_index="OnlineStatus" w_hidden="true">在线状态</th>
                    </tr>
                </thead>
    

    在HTML首先声明一个变量,然后控制器传过来的数据等于变量,bsgrid 表格下拉框数据,我们在再声明一个变量,通过变例来追加,

    var DATA;
            $(function () {
                $.post("/JurisdictionManagement/GYQXYW/SelectTellerStatus", function (data) {
                    
                    DATA = data;
                });
                    //1.1初始化题目信息表格
                    tbTitlesInfor = $.fn.bsgrid.init('tbTitlesInfor', {
                        url: "/JurisdictionManagement/GYQXYW/JGWH",
                        autoLoad: true,
                        stripeRows: true,//隔行变色
                        rowHoverColor: true,//划过行变色
                        rowSelectedColor: true,//是否显示选中行背景色
                        pageSize: 8,//
                        pageSizeSelect: false,//是否选择分页页数下拉框
                        pagingLittleToolbar: true,//精简的图标按钮分页工具条
                        pagingToolbarAlign: "left",//分页工具条的显示位置
                        event: {
                            customRowEvents: {
                                click: function (record, rowIndex, trObj, options) {
                                    Check("#tbTitlesInfor tr", rowIndex + 1);
                                }
                            }
                        }
                    });
                });
     //bsgrid 表格下拉框数据
            function createSelect(record) {
                var STR;
                $.each(DATA, function (i) {
                    if (record.TellerStatusID == DATA[i].id) {
                        STR += "<option value=" + DATA[i].id + " selected>" + DATA[i].name + "</option>";
                    } else {
                        STR += "<option value=" + DATA[i].id + ">" + DATA[i].name + "</option>";
                    }
                });
                str = "<select style='width:21%;'>" + STR + "</select>";
                return str;
            }
    

    最后就是我们要的页面了。

    展开全文
  • 然后赋值在表格对应商品列中的订单下拉框中,因为我是扫码枪扫码获取数据,每次扫码都会新加一条数据进入表格,所以扫入的数据不同,所对应的订单号也不同,第一次扫码查到订单号并且查到...
  • 最近做表格需要在表格中加入<select>标签,将数据填充到下拉框,无奈搞了好几个小时也没有成功,最后经过请教身边的大佬,得以解决。 代码如下: HTML页面代码 <!-- 查询条件 --&g...

           初学Bootstarp,个人感觉一个功能非常强大的前端框架,由于学习的路途也不是一番风顺的,难免会遇到问题,将遇到的问题整理,可以时常看看,加深记忆。

           最近做表格需要在表格中加入<select>标签,将数据填充到下拉框,无奈搞了好几个小时也没有成功,最后经过请教身边的大佬,得以解决。

    代码如下:

    HTML页面代码

    <!-- 查询条件 -->	
    <div class="col-sm-12">
        <div class="panel panel-default" style="margin-top: 10px">
            <div class="panel-heading">
                <h3 class="panel-title">查询条件</h3>
            </div>
            <div class="panel-body">
                <form id="formSearch" class="form-inline">
                    <div class="form-group">
                        <label for="countySearch" class="control-label mglf5" style="font-size:15px;">区域</label>
                        <select class="form-control mglf3" id="countySearch" style="width:160px;"></select>
                    </div>
                    <div class="form-group">
                        <label for="pollSourceSearch" class="control-label mglf5" style="font-size:15px;">企业名称</label>
                        <select class="form-control mglf3" id="pollSourceSearch" style="width:160px;"></select>
                    </div>
                    <div class="form-group">
                        <div class="input-append date form_datetime" data-date-format="yyyy-mm-dd">
                            <label for="erbStartTime" class="control-label mglf5" style="font-size:15px;">时间</label>
                            <input id="erbStartTime" readonly size="16" type="text" value="" class="form-control mglf3"/>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-append date form_datetime" data-date-format="yyyy-mm-dd">
                            <label for="erbEndTime" class="control-label mglf5">-&nbsp;-&nbsp;</label>
                            <input id="erbEndTime" readonly size="16" type="text" value="" class="form-control mglf3"/>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default mglf5" id="search">
                    	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                    </button>
                    <button id="btn_export" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出
                    </button>
                </form>
            </div>
    	</div>
    	<input type="hidden" id="moveToControlId">
    	<table id="tb_evokeReceBoxList" style="table-layout:fixed"></table>
    </div>

    其中<table id="tb_evokeReceBoxList" style="table-layout:fixed"></table>是Bootatrp Table的表格数据展示及分页;

    JS代码

    function showFeedBack() {
        $("#tableList").bootstrapTable({
            url : '', //请求后台的url(*)
            method : 'post', //请求方式(*)
    	toolbar : '#toolbar', //工具按钮用哪个容器
    	striped : true, //是否显示行间隔色
    	contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
    	cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    	dataType : "json",
    	pagination : true, //是否显示分页(*)
    	sortable : true, //是否启用排序
    	sortOrder : "asc", //排序方式
    	queryParams : queryContentParams, //传递参数(*)
    	sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*)
    	pageNumber : 1, //初始化加载第一页,默认第一页
    	pageSize : 10, //每页的记录行数(*)
    	pageList : [10, 25, 50, 100], //可供选择的每页的行数(*)
    	search : false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务器
    	strictSearch : true,
    	showColumns : false, //是否显示所有的列
    	showRefresh : false, //是否显示刷新按钮
    	minimumCountColumns : 2, //最少允许的列数
    	clickToSelect : true, //是够启用点击选中行
    	uniqueId : "problemId", //每一行的唯一标识,一般为主键列
    	showToggle : false, //是否显示详细视图和列表视图的切换按钮
    	cardView : false, //是否显示详细视图
    	detailView : false, //是否显示父子表
            columns: [{
                checkbox: true,
                width : 35
            },{
                field: 'registerNumber',
                align: 'center',
                title: '立案号',
                width : 160,
                formatter: function (value, row, index) {// selNumber'+ row.registerId + '
                	var option;
                	//立案号下拉框
                	$.ajax({
                	    url: '后台Controller请求',
                        type: "post",
                        data : {},
                        async : false,
                        success:function(data){
                        	var headOption = "<option value =''>请选择</option>";
                        	if(value == "0"){
                        		headOption = headOption + "<option value ='0' selected>无</option>";
                        	}else{
                        		headOption = headOption + "<option value ='0'>无</option>";
                        	}
                            $.each(data,function(i,obj){
                        		if(value == obj.registerId){
                        			headOption = headOption + "<option value='"+obj.registerId+"' selected>"+obj.registerNumber+"</option>";
                        		}else{
                        			headOption = headOption + "<option value='"+obj.registerId+"'>"+obj.registerNumber+"</option>";
                        		}
                	        });
                    	option = '<select class="form-control" id="selNumber"'+index+' name="registerName" style="height:33px;">'+
                            headOption + '</select>' +'<button class="btn btn-default" onclick="addNumber()">添加</button>';
                        }
                    })
                    return option;
                }
             }]
        }

           因为table表格是循环出来的,所以<select>标签中的ID不能重复,所以我拼接了id="selNumber"'+index+' 将每一行的下标作为下拉框每条数据匹配的标识。

    奉上效果图:

     

    展开全文
  • 请求后台拿到对表格进行数据填充的时候发现select无法展示默认的数据,看到网上的好多办法,虽然也都能实现默认效果,但是不是我想要的方法,于是又再返回官网看文档,原来option有一个属性是selected,加上这个...

    layuiTable表格里的select下拉框设置默认选中的值

    表格里面嵌套下拉框无法显示默认值

    最近在做一款后台管理系统的时候,表格里面需要嵌套select下拉,在请求后台拿到对表格进行数据填充的时候发现select无法展示默认的数据,看到网上的好多办法,虽然也都能实现默认效果,但是不是我想要的方法,于是又再返回官网看文档,原来option有一个属性是selected,加上这个属性后,select就会默认显示你要展示的值。下面贴上代码:

    代码展示

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
    var cols = [[{
    							type: 'checkbox',
    							align:'center',
    							width:60,
    						},{
    							field: 'deviceID',
    							title: '电梯编号',
    							width:200,
    							align:'center',
    						},{
    							field: 'productionID',
    							title: '生产编号',
    							width:200,
    							align:'center',
    						},{
    							field: 'location',
    							title: '位置',
    							width:350,
    							align:'center'
    						},{
    							field: 'taskNature',
    							title: '作业性质',
    							width:170,
    							align:'center',
    							event: 'setTaskNature', 
    							templet: function (d) {
    								 var selectHTML = '<select name="taskNature" lay-filter="stateWork" id="taskNature" lay-verify="required" value="' + d.taskNature + '" data-value="' + d.taskNature + '" >' +
            										  '<option value="" selected>请选择作业性质</option>';
            								   if(d.taskNature === "1"){
                   							  		selectHTML = selectHTML + '<option value="1" selected>月度</option>';
                   							  	}else{
                   							  		selectHTML = selectHTML + '<option value="1">月度</option>';
                   							  	}
            								   
            								   if(d.taskNature === "2"){
                   							  		selectHTML = selectHTML + '<option value="2" selected>季度</option>';
                   							  	}else{
                   							  		selectHTML = selectHTML + '<option value="2">季度</option>';
                   							  	}
            								   
                       						   if(d.taskNature === "3"){
                       							   selectHTML = selectHTML + '<option value="3" selected>半年度</option>';
                       						   }else{
                   							  		selectHTML = selectHTML + '<option value="3">半年度</option>';
                   							   }
                                               
                                               if(d.taskNature === "4"){
                       							   selectHTML = selectHTML + '<option value="4" selected>年度</option>';
                       						   }else{
                   							  		selectHTML = selectHTML + '<option value="4">年度</option>';
                   							   }
                                               
                                  selectHTML = selectHTML + '</select></div>';
                                  return selectHTML
            					}
    						},{
    							field:'planEndTime',
    							title:'计划作业结束时间',
    							width:200,
    							align:'center',
    							event:'setplanEndTime',
    							templet:"#endWork"
    						},{
    							field:'remark',
    							title:'备注',
    							width:300,
    							align:'center',
    							event:'setRemark',
    							templet:note
    						}]];
    
    这样就是可以成功展示默认值了,实现效果:
    ![实现效果](https://img-blog.csdnimg.cn/20200908141046195.bmp?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd6aGVuXw==,size_16,color_FFFFFF,t_70#pic_center)
    
    
    展开全文
  • layui 中表格单元格插入下拉框

    万次阅读 热门讨论 2018-10-22 14:55:32
    可以使用自定义模板返回select节点然后done回调form.render(‘select’);然后还有一个需要注意的是默认td 超出是不显示的,所以你会发现form渲染之后select出来了,但是点击下拉的菜单会看不到,需要处理一下。 ...
  • 作者:龙文浩 开发工具与关键技术: MVC/C# ...需求要在表格中修改数据,这几个涉及到外表的字段,就需要通过下拉框的选择项显示在 表格上: 我使用的是bsgrid表格绑定的数据,遵照它的规则使用w_rende...
  • 1. html显示bootsraptable配置 # 引入主要的js文件 &lt;link rel="stylesheet" href="{% static "lib/bootstrap-select/css/bootstrap-select.min.css" %}"/&gt; &lt;...
  • avue-crud表格如何实现新增表单下拉框与子表格中下拉框的级联? 想要实现图片红圈框的两个下拉框的级联
  • 首先~~tscolumns添加render属性,如下: columns: STColumn[] = [ { title: '编号', index: 'id' }, { title: '邮箱', index: 'email' }, { title: '电话', index: 'email',render:'custom'}, { ...
  • layui表格内部制作下拉框

    千次阅读 2019-09-28 16:11:48
    以下css会导致你的table左右滑动条不管用,都显示在前台,但是不这么做就会导致下拉框无法向上弹出 <style type="text/css"> /* 防止下拉框的下拉列表被隐藏---必须设置--- */ td[data-field='DEVICE_...
  • { title: "提成", key: "configure", align: "center", render: (h, params) => { let that = this; let centsType = params.row.centsType; ...
  • LayUI的xm-select插件,数据表格添加多选下拉框,获取下拉框的值 let valueObj = document.getElementById('XM-' + item.id); //通过下拉框的id获取标签 let subObj = valueObj.getElementsByClassName('label-...
  • 关于Layui数据表格下拉框显示问题 如图所示 ![11](https://img-blog.csdnimg.cn/img_convert/b9722b8a43f33c0973b8a1249a065ff6.png#pic_center) 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要数据...
  • layui表格下拉框无法显示

    千次阅读 2019-07-08 08:09:12
    layui表格下拉框无法显示 开发工具与关键技术:java 作者:彭浩达 撰写时间:2019年 7月 4日 $(function () { layui.use([‘layer’, ‘table’], function () { layuiTable = layui.table; layer = layui.layer, ...
  • layui表格单元格插入下拉框

    千次阅读 2021-02-04 16:38:01
    可以使用自定义模板返回select节点然后done回调form.render(‘select’);然后还有一个需要注意的是默认td 超出是不显示的,所以你会发现form渲染之后select出来了,但是点击下拉的菜单会看不到,需要处理一下。 ...
  • 承接上一篇QTableView实现表格显示:https://blog.csdn.net/zsq1294110449/article/details/110198036 类似于EXECL的双击可以出现下拉框,以下代码是表格实现双击出现下拉框的功能,实现效果如下图: ...
  • @{ ViewBag.Title = “MySelfWeb”; //Layout = “~/Views/Shared/_Layout.cshtml”; Layout = null; Layout = “~/Views/Shared/_LayoutMain.cshtml”; } Myself <style type="text/css">... }
  • 表格数据使用深拷贝的方式也没有触发更新效果,同事建议我使用this.$forceUpdate()方法来 加上以后的确管用了,但是查了一下文档,说这个方法比较暴力,不建议使用 然后我又翻了一下文档,发现select组件里面有...
  • layui表格中实时获取下拉框数据 1.首先需要定义一个table。 <div id="id_table"> <table id="xxx" lay-filter=""></table> </div> 2.渲染数据 layui.use(['form', 'laydate', 'table',...
  • 向layui数据表格单元格设置下拉框

    千次阅读 2019-07-28 19:53:58
    目前layui数据表格,只支持单元格edit编辑类型,尚未支持单元格下拉款类型,但是我们可以使用单元格templet自定义模板,layui-cols-表头参数一览表解释说明:自定义列模板遵循laytpl语法,这是一个非常实用的功能,...
  • el-table表格输入与下拉框

    千次阅读 2020-09-08 18:15:43
    如需要索引 :fetch-suggestions="((queryString,cb)=>{querySearch(queryString,cb,scope.$index)})" <el-table-column prop="goodsName " label="品名" width="170px"> <template slot-scope=...
  • Layui插件表格下拉框

    万次阅读 2019-07-06 22:01:00
    开发工具与关键技术: Vs 、Layui插件表格下拉框 ...首先呢,layui表格里面添加下拉框layui表格中就会出现默认的下拉框样式,而这种样式插件原生自带,进而出现了两个下拉框。 1、我们要做的是去除...
  • 先看效果 ,QTableView里加入下拉框 封装类 from PyQt5.QtWidgets import * import PyQt5.sip as sip # 自定义委托 实现绘制下拉框 class ItemDelegate(QItemDelegate): def __init__(self, items, parent=...
  • 基于X-admin2.2的后台管理系统登录实现Spring Boot+JPA微服务数据更新问题(update)Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法LayUi搜索时,如何只刷新表格内容,其他内容不变?...
  • el-dropdown刚开始可以正常显示下拉框 但是关闭弹窗后我再次点开就无法显示下拉框了,该如何解决呀? 直接复制官网的示例就是这样 ```...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,088
精华内容 7,235
关键字:

如何在表格中显示下拉框的