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

Posted 2023-04-22 chuangsi

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();
,
onLoadSuccess: 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();

 

vue+elementUi+table实现单元格可输入功能StringsliceTimeFullYearMonthDateHoursMinutesSeconds

目录

• 前言
• 1、html
• 2、JavaScript

---

前言

使用elementUi的插槽功能，给新增的数据添加自定义属性来实现文本与输入框之间的交互。编辑的时候会有一点特殊需要处理，注意vue的数据监听原理。

---

1、html

<div>
	<el-button type="primary" plain @click.stop="add">新增</el-button>
	
	<el-table :data="tableData" style="width: 100%; margin-top: 17px" border>
		<el-table-column type="selection" width="55"> </el-table-column>
		<el-table-column prop="id" label="id"> </el-table-column>
		<el-table-column label="姓名">
			<template slot-scope=" row ">
				<el-input v-if="row.$isEdit" v-model="row.name" placeholder="请输入名字"></el-input>
				<span v-else> row.name </span>
			</template>
		</el-table-column>
		<el-table-column label="地址">
			<template slot-scope=" row ">
				<el-input v-if="row.$isEdit" v-model="row.address" placeholder="请输入地址"></el-input>
				<span v-else> row.address </span>
			</template>
		</el-table-column>
		<el-table-column prop="date" label="日期"> </el-table-column>
		<el-table-column prop="date" label="操作">
			<template slot-scope=" row, $index ">
				<el-button type="danger" plain size="mini" @click="deleteData(row, $index)">删除</el-button>
				
				<el-button v-if="row.$isEdit" type="primary" plain size="mini" @click.stop="confirmSubmit(row)">确认</el-button>

				<el-button v-else type="primary" plain size="mini" @click.stop="edit($index)">编辑</el-button>
			</template>
		</el-table-column>
	</el-table>
</div>

---

2、JavaScript

export default 
	data() 
		return 
			tableData: [
				
					id: "1",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1518 弄",
					date: "2016-05-02",
				,
				
					id: "2",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1517 弄",
					date: "2016-05-04",
				,
				
					id: "3",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1519 弄",
					date: "2016-05-01",
				,
				
					id: "4",
					name: "王小虎",
					address: "上海市普陀区金沙江路 1516 弄",
					date: "2016-05-03",
				,
			],
		;
	,
	
	methods: 
		edit(i) 
			// 方案一
			// 当数据嵌套的时候可以使用
			// 需要需要注意
			// 必须保证每一条数据在一开始的时候就存在对应字段
			// 可以在数据请求回来后先添加对应字段再渲染
			// 否则vue监听不到新加入的字段
			// 也就不能实现页面交互效果
			// row.$isEdit = true;
			
			// 方案二
			// 如果数据有嵌套
			// 不推荐使用
			this.$set(this.tableData[i], "$isEdit", true);
		,
		// 确认提交
		// 发送给后端
		// 此demo没有后端
		confirmSubmit(row) 
			if (!row.name || !row.address) return this.$message.error("不能为空");
			
			let times = new Date(),
				formatObj = 
					y: times.getFullYear(),
					m: times.getMonth() + 1,
					d: times.getDate(),
					h: times.getHours(),
					i: times.getMinutes(),
					s: times.getSeconds(),
					a: times.getDay(),
				;
			
			for (const key in formatObj) 
				if (Object.hasOwnProperty.call(formatObj, key)) 
					let val = formatObj[key];
					if (val < 10 && key !== "a") val = "0" + val;
					if (key === "a") val = ["日", "一", "二", "三", "四", "五", "六"][val];
					formatObj[key] = val.toString();
				
			
			
			let  y, m, d, h, i, s, a  = formatObj;
			
			row.id = row.id ? row.id : String(times.getTime());
			row.address = row.address;
			row.date = row.date ? row.date : `$y-$m-$d $h:$i:$s 星期$a`;
			row.$isEdit = !row.$isEdit;
		,
		// 删除数据
		// 分前端和请求接口删除
		deleteData(row, i) 
			if (row.$isEdit) 
				this.tableData.splice(i, 1);
			 else 
				console.log("向后端发请求");
			
		,
		// 新增输入框数据字段
		add() 
			this.tableData.unshift(
				id: "",
				name: "",
				address: "",
				date: "",
				$isEdit: true,
			);
		,
	,
;