LayUI⑻：表格中动态单元格的编辑

最新推荐文章于 2024-07-22 17:54:08 发布
最新推荐文章于 2024-07-22 17:54:08 发布
阅读量3.2k 收藏 5
点赞数
分类专栏： LayUI 文章标签： 动态生成 Word文件 界面简化 用户体验 功能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn0718/article/details/124378330
版权

　　很折腾人的编程，被折磨了一个星期，问题在于我把问题想复杂了，总想尽量满足用户的需求，尽可能把多种要求都加进来，多考虑用户可能出现的变动需求。

　　合同文件的编辑，内容可以有很多的选项，可以是：

　　1、系统自动执行；

　　2、手工输入；

　　3、列表选择；

　　4、单选；

　　上面是第一次考虑并完成的内容，后面还需要加入其他的内容：

　　1、列表可以有多种，比如单选列值、单选列出所有项目并方框标识选中项目、选中出现输入窗口补全后续信息等等；

　　2、手工输入如何记忆不同用户的输入并在后续填写相关内容中出现；

　　3、系统函数如何依赖外部注入；

　　4、如何插入表格并以用户选择的方式取值；

　　5、如何插入图片；

　　......

　　目前完成的界面：

 　　主要代码，表格的值装载：

        form.on('submit(formStep2)', function (data) {
			//如果项目列表数大于0并且选择了项目则继续
			if(selectPorjectRowObj){					
					//判断有无数据记录
					$.ajax({
							url:'ZTBCommon.php',
							data:{
								  "OP":"IsExist",
								  "strWhere":"c01='"+selectPorjectRowObj['data']['c02']+"' and c13="+selectPorjectRowObj['data']['c01']+" and c15='"+selectPorjectRowObj['data']['c14']+"' ",
								  "strTable":"FileItemValue",
								  },
							type:'POST',
							datetype:'json',
							async:false,//不能异步
							success:function (data) {
									console.log(data['data']);
									if(data!='OK'){ 
											console.log('创建！');
											//没有则创建
											$.ajax({
													url:'ZTBUserZBFile.php',
													data:{
														  "OP":"createUserEditList",
														  "Year":selectPorjectRowObj['data']['c01'],
														  "Project":selectPorjectRowObj['data']['c02'],
														  "ProjectChild":selectPorjectRowObj['data']['c14']
														  },
													type:'POST',
													datetype:'json',
													async:false,//不能异步
													success:function (data) {  },
													error:function(data){ console.log('错误:'+data);}
											});						
									}
							}
					});						
					//得到招标文件编辑条款的信息
					console.log(selectPorjectRowObj['data']['c01']+"|"+selectPorjectRowObj['data']['c02']+"|"+selectPorjectRowObj['data']['c14']);
					table.render({
								elem: '#projectEditInfo',
								url: 'ZTBUserZBFile.php',
								method:'POST',
								where:{
									"OP":"userEditList",
									"Year":selectPorjectRowObj['data']['c01'],
									"Project":selectPorjectRowObj['data']['c02'],
									"ProjectChild":selectPorjectRowObj['data']['c14']
								},
								toolbar: '#toolbarDemo',
								defaultToolbar: ['exports'],
								cols: [[
										{type: 'numbers', width: 80, title: '行号',hide:true},
										{field: 'c03', width: 70, title: '序号', align: "center"},
										{field: 'c13', width: 80, title: '年度',hide:true},
										{field: 'c01', width: 240, title: '项目名称',hide:true},
										{field: 'c15', width: 200, title: '子项目名称',hide:true},
										{field: 'c02', width: 240, title: '用户名称',hide:true},
										{field: 'c06', width: 200, title: '书签名称'},
										{field: 'c07', width: 120, title: '样式大类'},
										{field: 'c08', width: 180, title: '样式小类',hide:true},
										{field: 'c04', width: 200, title: '样式名称',hide:true},
										{field: 'c11', width: 450, title: '输入的内容', event:'userInput',templet:'#convertInputStype'},
										{field: 'c09', width: 90, title: '强制录入',templet:'#switchTpl', unresize: true},
										{field: 'c10', width: 120, title: '完成输入',templet:'#checkboxTpl', unresize: true},
										{field: 'c12', width: 100, title: '内容标记',hide:true},
										{field: 'c14', width: 90, title: '是否可编辑',templet:'#switchTp2', unresize: true},
										{field: 'c17', width: 100, title: '样式内容',hide:true},
										{field: 'c18', width: 100, title: '样式标记',hide:true},
										{field: 'c19', width: 150, title: '实际内容',hide:true}
								]],
								page: false,
								skin: 'gird',
								done: function (res, curr, count) {
										tableTotalCount=res.data.length;
										let isFirstTime=false;
										let sTemp='';
										//如果是第一次，则需要执行系统函数:循环提取表格中的行记录，执行系统函数并且赋值
										$.ajax({
												url:'ZTBCommon.php',
												data:{
													"OP":"getProjectNameFromEditTable",
													"Year":selectPorjectRowObj['data']['c01'],
													"Project":selectPorjectRowObj['data']['c02'],
													"ProjectChild":selectPorjectRowObj['data']['c14']
													  },
												type:'POST',
												datetype:'json',
												async:false,//不能异步
												success:function (data) {
														if(data['data']=='' || data['data']==null){ isFirstTime=true; }
												},
												error:function(data){
													console.log(data);
												}
										});

										if(isFirstTime){												
												for (let i=0;i<res.data.length;i++){
														$("#projectEditInfo").next().find("tbody tr[data-index='" +i +"'] td[data-field='c12'] div").html(i);//改变值
														if(res.data[i]['c07']=='系统函数'){
																$.ajax({
																		url:'ZTBCommon.php',
																		data:{
																			"OP":"ZTBSysFunction",
																			"ItemType":res.data[i]['c08'],
																			"ItemName":res.data[i]['c04'],
																			"Year":selectPorjectRowObj['data']['c01'],
																			"Project":selectPorjectRowObj['data']['c02'],
																			"ProjectChild":selectPorjectRowObj['data']['c14']																								
																			},
																		type:'POST',
																		async:true,
																		success:function (data) {
																				if(data['data']){
																						$("#projectEditInfo").next().find("tbody tr[data-index='" +i +"'] td[data-field='c11'] div").html(data['data']);//改变值
																						$("#projectEditInfo").next().find("tbody tr[data-index='" +i +"'] td[data-field='c11'] div").css('color','blue');//改变值
																						table.cache.projectEditInfo[i].c11=data['data'];
																						$("#projectEditInfo").next().find("tbody tr[data-index='" +i +"'] td[data-field='c19'] div").html(data['data']);//改变值
																						$("#projectEditInfo").next().find("tbody tr[data-index='" +i +"'] td[data-field='c19'] div").css('color','blue');//改变值
																				}																					
																		}																			
																});
														}
												}
										}
										$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
								}						
					});
					//写信息
					document.getElementById("lbl_1").innerText=selectPorjectRowObj['data']['c01'];
					document.getElementById("lbl_2").innerText=selectPorjectRowObj['data']['c02'];
					document.getElementById("lbl_3").innerText=selectPorjectRowObj['data']['c14'];
					step.next('#stepForm');				
			}			
            return false;
        });

　　模板语法：

<script type="text/html" id="convertInputStype">
    {{# 
		var selectList='';
		var strPSP='';
		var optionList='';
		switch(d.c07){
			case '手工输入':
				strPSP="<div class='layui-input-inline'><input type='text' id='Dcinput"+d.c03+"'  value='"+d.c19+"' class='layui-input' lay-filter='DCinput' onkeypress='keyboardInput(event)'></div>";
				return strPSP;
				break;
			case '列表':
				selectList=d.c17.split('|');
				strPSP="<div class='layui-input-inline' style='width: 300px;'><select lay-filter='DCselect' id='DCselect'+d.c03>";
				for (var i=0 ; i<selectList.length ; i++ ) {
					if(d.c19==selectList[i]){
						strPSP = strPSP + "<option value='" + selectList[i] + "' layui-this selected>" + selectList[i] + "</option>" ; 
					}else{
						strPSP = strPSP + "<option value='" + selectList[i] + "'>" + selectList[i] + "</option>" ; 
					}
				}
				strPSP=strPSP+"</select></div>";
				return strPSP;
				break;
			case '二选一':
				optionList=d.c18.split('|'); 
				if(d.c19==optionList[0]){
					strPSP = "<div class='layui-input-inline'><input type='radio' name='Dc"+d.c03+"' id='DcA"+d.c03+"' value='"+optionList[0]+"' title='"+optionList[0]+"' lay-filter='Dcradio' checked='checked'>　　<input type='radio' name='Dc"+d.c03+"' id='DcB"+d.c03+"' value='"+optionList[1]+"' title='"+optionList[1]+"'></div>"; 
				}else{
					strPSP = "<div class='layui-input-inline'><input type='radio' name='Dc"+d.c03+"' id='DcA"+d.c03+"' value='"+optionList[0]+"' title='"+optionList[0]+"' lay-filter='Dcradio'>　　<input type='radio' name='Dc"+d.c03+"' id='DcB"+d.c03+"' value='"+optionList[1]+"' title='"+optionList[1]+"'  checked='checked'></div>";
				}
				return strPSP;
				break;
			default:
				return d.c11;
				break;
		}
	}}	
</script>

　　程序虽然完成了绝大多数的功能，但是越写越感到鸡肋，因为程序就是动态生成一个Word文件，感觉没有必要这么来完成了，不想写了。

　　唉，白费了这么一阵子的劲。

dawn
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
layui编辑表格单元格
m0_67879025的博客
06-19 6319
layui.table中的单元格编辑
Layui表格编辑
weixin_44547914的博客
07-08 2282
Layui表格编辑 开发工具与关键技术：C# MVC 作者：李宥良 撰写时间：2019年7月7日 数据表格编辑主要使用场景：新增或编辑同时需要提交多条记录(原有模式只支持单条记录提交)，通过编辑数据表格，保存获取所有表格数据提交。 用来渲染表格，但其实layui表格还有很多功对于layui表格的用法，我们通常都只是能，只是我们不常用，所以有很多人都不知道Layui表格的其他用法，比如说l...
layui table单元格事件修改值的方法
12-13
事件中的 this相当于document.getElementById(“id”) 替代方法就是将原本 document.getElementById("id").InnerHTML = "填充代码"; 替换成 $("#id").html("填充代码"); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
LayUi之数据表格的增删改查（内含完整源代码）
m0_74315688的博客
07-14 6240
关于使用layui进行增删改查的一整套流程清晰明了的编写出来啦！！感兴趣的话就点进来看看呢！！！
layui table表格动态增加、合并单元格
最新发布
chenchen_csdn的博客
07-22 407
现需要一个两列多行的页面布局，实现对单选按钮监听和在左侧保持合并单元格的同时新增、删除、清空tr，并将填写的内容取值json。
Layui数据表格之单元格编辑方式
10-16
今天小编就为大家分享一篇Layui数据表格之单元格编辑方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后修改成功后表格数据自动更新
热门推荐
Hui_Hong_TaiLang的博客
10-31 7万+
layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后表单数据自动刷新 （1）主界面 本系统没有采用分页数据请求，直接取出后台全部数据 （2）点击编辑按钮，编辑功能界面展示 （3）代码实现 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&
layui table直接编辑
闪耀星星的窝
07-13 2780
layui 编辑表格
layui表格动态添加|layui表格可编辑
08-24
layui表格动态添加|layui表格可编辑动态添加
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
本篇将详细介绍如何在Layui的数据表格中给指定单元格添加事件。 首先，创建一个Layui数据表格需要使用`table.render()`方法。在给出的代码中，我们可以看到一个表格被初始化，其中包含了多个列，每列都有自己的字段...
解决layui-table单元格编辑只能text问题
10-18
1. **自定义编辑器**：layui-table允许我们自定义单元格的编辑器。可以通过监听`cellEdit`事件，在触发编辑时插入相应的HTML代码，比如插入一个日期选择器。可以使用layui内置的laydate组件，或者引入第三方的时间...
layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
01-06
此外，你可能还会注意到压缩包中的其他链接，如“layui admin table表格中根据后台数据动态渲染switch开关”和“layui中的switch开关”。switch开关是layui中另一种常用的表单元素，用于呈现开/关的状态。它通常用于...
layui表格编辑
xucan100的博客
02-13 378
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compati...
Layui 表格编辑
weixin_30919919的博客
04-14 515
html代码 <td class="My_edit"></td> Jquery代码 //-----[Layui表格编辑()] function Layui_edit(){　　　//点击时 选中文本 $(".My_edit").live("click",function(){ $(this).toggle(fu...
layui表格内使用edit属性修改行内容
m0_69439101的博客
04-20 4835
回调函数返回一个object参数。
解决layui-table单元格编辑只能text问题,layui-table单元格编辑时间控件、自定义表单控件
m0_37924754的博客
05-18 1万+
解决layui-table单元格编辑只能text问题，单元格编辑自定义表单类型定义表格col点击监听处理 定义表格col {"field":"key","title":"自定义表单","event":"cellClick"} 点击监听 //监听行工具条 table.on('tool(table)', function(obj){ switch(obj.event){ ...
Layui数据表格之单元格编辑
weixin_44543189的博客
08-10 1万+
开发工具与关键技术：VS、layui数据表格之单元格编辑 作者：陆桂超 撰写时间：2019年8月6日 layui是我们常用的一个插件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式 ，其中有很多模快，而每个模板又包括很多模板，下面我要讲解的是数据表格中的单元格编辑。 1、在使用layui之前首先确保已经引入了layui的css和js脚本文件。 2、...
layui 动态添加编辑表格单元格
08-02
在layui中，动态添加和编辑表格单元格可以通过两种方式实现。 第一种方式是使用layui的表格渲染方法render()。首先，我们可以创建一个table标签，并设置id，如下所示： ``` <table id="demo" lay-filter="test"></table> ``` 然后，通过调用layui的table.render()方法，传入一个配置对象来渲染表格，如下所示： ``` table.render({ elem: '#demo', data: data, cols: [[ {field: 'name', title: '姓名', edit: 'text'}, {field: 'age', title: '年龄', edit: 'text'}, {field: 'score', title: '分数', edit: 'text'}, ]], }); ``` 在cols对象中，我们设置了三个单元格，每个单元格都可以编辑。通过设置edit属性为'text'，我们将单元格设置为可编辑文本框。接下来，我们需要通过调用table.reload()方法来动态添加单元格数据，如下所示： ``` table.reload('demo', { data: newData, }); ``` 其中，'demo'是需要重新加载的表格id，newData是新的数据。通过这种方式，我们可以动态添加和编辑表格中的单元格。 第二种方式是使用layui的form模块。我们可以创建一个table标签和一个form标签，并设置id，如下所示： ``` <table id="demo" lay-filter="test"></table> <form class="layui-form" lay-filter="dataForm"></form> ``` 然后，我们可以通过调用form.render()方法，传入一个配置对象来渲染表单，如下所示： ``` form.render(null, 'dataForm'); ``` 在表格中添加数据按钮的点击事件中，我们可以通过调用form.val()方法来动态向表单中添加数据，如下所示： ``` form.val('dataForm', { name: '张三', age: 18, score: 90, }); ``` 其中，'dataForm'是表单的lay-filter属性值，name、age、score是表单中的字段名，'张三'、18、90是字段对应的值。通过这种方式，我们可以动态添加和编辑表格中的单元格。 以上就是在layui中动态添加和编辑表格单元格的两种方式，可以根据具体需求选择适合的方式进行操作。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值