首页 > 其他分享 >bootstraptable单元格可输入（输入框，下拉框）

bootstraptable单元格可输入（输入框，下拉框）

时间：2023-04-21 23:56:55浏览次数：53  
标签：bootstraptable count function value 输入框 var strCount 下拉框 select

https://blog.csdn.net/weixin_45742032/article/details/105145655

bootstraptable单元格可输入

效果图

效果图一（单元格中加入下拉框，这里的数据是从数据库取的）

 

<table id="payment_detail_table"></table>

js内容

var templateTableParams = {
classes: "table table-bordered table-hover",
url: "${ctx}/payment/paymentDetails.z",
method: 'post',
contentType: "application/x-www-form-urlencoded",
dataType: "json",
cache: false, //是否使用缓存，默认为true
striped: true, //是否显示行间隔色
singleSelect: true, //单选
// clickToSelect: true, //是否启用点击选中行
showFooter: true,//合计
height:120,
queryParams: function () {
var params = {
maindjh: '${puFksqdMain.djh}'
};
return params;
},
columns: [
// {
// checkbox: true
// },
{
title: '序号', halign: "center", align: 'center', width: '50px',
formatter: function (value, row, index) {
return index + 1;
},
footerFormatter: function (value) {
return '合计';
}
},

{
field: 'hth', title: '合同号', halign: "center", width: '100px', formatter :'paramsMatter'
},

{
field: 'xshth', title: '销售合同号', width: '100px', halign: "center", formatter :'paramsMatter'

},
{
field: 'rq', title: '合同日期', width: '70px', halign: "center", formatter :'paramsMatter'
},
{
field: 'htje', title: '合同金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htje*1;
}
var strCount=""+count.toFixed(2)
if(strCount.charAt(strCount.length-1)=="0"&&strCount.charAt(strCount.length-2)=="0"){
return parseInt(strCount) ;
}
return count.toFixed(2);
}
},
{
field: 'fkje', title: '已付款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].fkje*1;
}
var strCount=""+count.toFixed(2)
if(strCount.charAt(strCount.length-1)=="0"&&strCount.charAt(strCount.length-2)=="0"){
return parseInt(strCount) ;
}
return count.toFixed(2);
}
},
{
field: 'htqkje', title: '合同欠款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].htqkje*1;
}
var strCount=""+count.toFixed(2)
if(strCount.charAt(strCount.length-1)=="0"&&strCount.charAt(strCount.length-2)=="0"){
return parseInt(strCount) ;
}
return count.toFixed(2);
}
},
{
field: 'shzje', title: '审核中金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].shzje*1;
}
var strCount=""+count.toFixed(2)
if(strCount.charAt(strCount.length-1)=="0"&&strCount.charAt(strCount.length-2)=="0"){
return parseInt(strCount) ;
}
return count.toFixed(2);
}
},
{
field: 'ksqje', title: '可申请金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].ksqje*1;
}
var strCount=""+count.toFixed(2)
if(strCount.charAt(strCount.length-1)=="0"&&strCount.charAt(strCount.length-2)=="0"){
return parseInt(strCount) ;
}
return count.toFixed(2);
}
},
{
field: 'sqfkje', title: '申请付款金额', width: '70px', halign: "center", align: 'right',
footerFormatter: function (value) {
var count = 0;
for (var i in value) {
count += value[i].sqfkje*1;
}
var strCount=""+count.toFixed(2)
if(strCount.charAt(strCount.length-1)=="0"&&strCount.charAt(strCount.length-2)=="0"){
return parseInt(strCount) ;
}
return count.toFixed(2);
}
},
{
field: 'fkzl', title: '付款种类', width: '70px', halign: "center", formatter :'paramsMatter'
}
],
cardView: (function () {
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
})(),
trimOnSearch: true,
onlyInfoPagination: false,//显示总记录数 必须打开pagination=true
pagination: false, //显示分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页记录数
pageList: [5, 10, 20], //可供选择的每页的行数
idField: 'id',
uniqueId: 'id',
smartDisplay: false,
onPostBody: function (data) {
merge_footer();
},
onl oadSuccess: function (data) {
if (data.length == 0) {
layer.confirm("查询结果为空",
{
title: "提示",
btn : ['确定']
}, function(index) {
layer.close(index);
});
}
}
};
var trueHeight = document.documentElement.clientHeight-5;
var startHeight = document.body.offsetHeight;
templateTableParams2.height = trueHeight - startHeight-135;
//向表格中加入数据
$('#payment_detail_table').bootstrapTable(templateTableParams);

xiugai();//调用设置表格样式的方法

//设置表格下拉框和编辑框时调用
function xiugai() {
//获取表格所有行
var trList = $("#payment_detail_table").children("tbody").children("tr");
for (var i = 0; i < trList.length; i++) {
//获取第1个单元格
var hth = trList.eq(i).children().eq(1);
//为第一列添加下拉框
hth.html(selecthth(hth.text(), i));

var sqfkje = trList.eq(i).children().eq(9);
//效果图二设置
sqfkje.html("<input type='text' id ='sqfkje" + i + "' οnblur='inputBlurSl(this," + i + ")' style='width:80px;height:20px' value='" + sqfkje.text() + "' />");
var fkzl = trList.eq(i).children().eq(10);
fkzl.html(selectfkzl(fkzl.text(), i));
}
}

var hths=[]; //合同号选择框数据
//获取第一个下拉框的内容
$.ajax({
type: 'POST',
data: {
gys: '${puFksqdMain.gys}'
},
dataType: 'json',
url: '${ctx}/payment/contractPamentCondition2.z',
success: function (data) {
hths=data;//第一列下拉菜单
}
});
//效果图一样式设置（合同号内嵌）
function selecthth(value, index) {
var select = "<select type='text' class='form-control' style='width:120px;' id='hth" + index + "' οnchange='changehth(value," + index + ")'>";
if (value === "" || value == null) {
select += "<option value='' selected='selected'></option>";
} else {
select += "<option value='' ></option>";
}
for(var i=0;i<hths.length;i++){
if (value === hths[i].hth) {
select += "<option value='"+hths[i].hth+"'selected='selected'>"+hths[i].hth+"</option>";
} else {
select += "<option value='"+hths[i].hth+"'>"+hths[i].hth+"</option>";
}
}
select += "</select>";
return select;
}
//第一个下拉框选择后，将数据填入单元格中
function changehth(value, index) {
$("#payment_detail_table").bootstrapTable("updateCell", {
index: index,
field: "hth",
value: value
});
//修改表中的数据后，下拉框会消失，因此需要重新设置表格的样式
xiugai();
}

//效果图二编辑完成后，需要将数据填入到单元各种
function inputBlurSl(obj, index) {
$("#payment_detail_table").bootstrapTable("updateCell", {
index: index,
field: "sqfkje",
value: $(obj).val()*1
});
//修改表中的数据后，下拉框会消失，因此需要重新设置表格的样式
xiugai();

}

//效果图三样式设置（付款种类内嵌）
function selectfkzl(value, index) {
var select = "<select type='text' class='form-control' style='width:90px;' id='fkzl" + index + "' οnchange='changefkzl(value," + index + ")'>";
if (value === "" || value === "预付款") {
select += "<option value='预付款' selected='selected'>预付款</option>";
} else {
select += "<option value='预付款' >预付款</option>";
}
if (value === "款到发货") {
select += "<option value='款到发货' selected='selected'>款到发货</option>";
} else {
select += "<option value='款到发货' >款到发货</option>";
}
if (value === "货到付款") {
select += "<option value='货到付款' selected='selected'>货到付款</option>";
} else {
select += "<option value='货到付款' >货到付款</option>";
}
if (value === "质保金") {
select += "<option value='质保金' selected='selected'>质保金</option>";
} else {
select += "<option value='质保金' >质保金</option>";
}
if (value === "历史欠款") {
select += "<option value='历史欠款' selected='selected'>历史欠款</option>";
} else {
select += "<option value='历史欠款' >历史欠款</option>";
}
select += "</select>";
return select;
}

//效果图三选择数据后需要将选择的数据填入到单元格中
function changefkzl(value, index) {
$("#payment_detail_table").bootstrapTable("updateCell", {
index: index,
field: "fkzl",
value: value
});
//修改表中的数据后，下拉框会消失，因此需要重新设置表格的样式
xiugai();

}

 

标签：bootstraptable,count,function,value,输入框,var,strCount,下拉框,select
From： https://www.cnblogs.com/chuangsi/p/17342253.html

相关文章

  • vue下拉框选择后不显示值，选其他下拉框后才显示出来
    vue下拉框选择后不显示值，选其他下拉框后才显示出来 vue也太坑了解决方法：为该el-select添加change事件中使用$set来对属性赋值，如下:changeData(val){ this.$set(this.formData,this.formData.id,val.value)}......
  • element-plus 输入框只能输入数字和小数
    只能输入数字：<el-inputoninput="value=value.replace(/[^0-9]/g,'')"placeholder="请输入">只能输入数字和两位小数（多余小数点会去掉）<el-inputoninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replac......
  • vue+ant中input输入框校验，不符合条件的输入无效
    1.只能输入数字/小数点/负号2.只能有一个负号，只能有一个小数点3.第一位不能直接输入小数点，输入负号后不能直接跟随小数点4.第一位输入为0时或-0时，只能跟随小数点，不能跟随数字例如01095.小数点后只能输入两位数字，不可输入其他，并且最后一位不能为0 6.因为是实时校验......
  • vue自定义密码输入框解决浏览器自动填充密码的问题
    问题描述浏览器对于type="password"的输入框会自动填充密码，但有时出于安全或者其他原因，我们不希望浏览器记住并自动填充密码。通过网上查到的一些解决方案，可以总结出以下几种解决方案(主要用edge浏览器进行测试)：通过autocomplete="off"/autocomplete="new-password"来关闭浏览......
  • 原生JS修改输入框value，并触发前端框架改变内部管理的响应式数据
    背景有时候，我们需要在一个网站上重复地执行某些操作，例如：输入>查询>输入>查询······这时候，我们可以写一个js自动化脚本执行这些操作，来保护我们的手指关节，以及键盘鼠标。对于大多数网站来说，使用web框架如vue进行开发，这些框架使用内部的响应式系统来管理数据，针对input元素，v......
  • input输入框只能输入数字，只能输入字母数字组合
    转自：https://www.jianshu.com/p/fc5d02cdf3d7输入大小写字母、数字、下划线：<inputtype="text"onkeyup="this.value=this.value.replace(/[^\w_]/g,'');">输入小写字母、数字、下划线：<inputtype="text"onkeyup="this.value=this.value.......
  • 输入框(input) 样式
     使用width属性来设置输入框的宽度：CSS实例input{width:100%;}尝试一下»以上实例中设置了所有<input>元素的宽度为100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：input[type=text] -选取文本输入框input[type=password] -选择密码的输入框in......
  • 针对form 表单 只有一个输入框的时候 使用回车查询会刷新页面问题
    <el-form:model="queryParams"ref="queryForm" :inline="true"v-show="showSearch"label-width="68px"@submit.native.prevent>   <el-form-itemlabel="表单名"prop="name">......
  • 自定义指令之光标定位到输入框
    下面是一个自定义指令的例子，当一个input元素被Vue插入到DOM中后，它会被自动聚焦。解决方案：在input标签里增加ref属性，然后在exportdefault中增加构子函数mounted（挂载完成），写入以下代码，表示页面渲染完成后光标定位输入框。mounted(){    this.$nextTick(()=......
  • ：hover下拉框的实现
    通过绝对定位与：hover实现的下拉框效果；一开始没什么大问题，效果也都实现了；但观察对应的项目发现其中的文字其实是超连接所以后续添加了超连接标签后就无法通过：hover进行展示了。源代码<divclass="header-bottom"><ul><ahref=""><li>首页</li>......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99