Bootstrap Table表格中存放下拉框，读取数据填充到下拉框 |
您所在的位置：网站首页 › bootstrap动态表格改变标题内容 › Bootstrap Table表格中存放下拉框，读取数据填充到下拉框 |
Bootstrap Table表格中存放下拉框，读取数据填充到下拉框
|
初学Bootstarp，个人感觉一个功能非常强大的前端框架，由于学习的路途也不是一番风顺的，难免会遇到问题，将遇到的问题整理，可以时常看看，加深记忆。 最近做表格需要在表格中加入标签，将数据填充到下拉框，无奈搞了好几个小时也没有成功，最后经过请教身边的大佬，得以解决。 代码如下: HTML页面代码 查询条件 区域 企业名称 时间 -;-; 查询 导出其中是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 = "请选择"; if(value == "0"){ headOption = headOption + "无"; }else{ headOption = headOption + "无"; } $.each(data,function(i,obj){ if(value == obj.registerId){ headOption = headOption + ""+obj.registerNumber+""; }else{ headOption = headOption + ""+obj.registerNumber+""; } }); option = ''+ headOption + '' +'添加'; } }) return option; } }] }因为table表格是循环出来的，所以标签中的ID不能重复，所以我拼接了id="selNumber"'+index+' 将每一行的下标作为下拉框每条数据匹配的标识。 奉上效果图:
|
【本文地址】
今日新闻 |
推荐新闻 |