允许客户添加一些新字段

mfkpie8 · mfkpie8

<h1 class="postTitle" style="margin-bottom: 10px; padding-left: 5px; font-size: 15.6px; border: 0px; float: left; width: 723.475px; clear: both; line-height: 1.5; color: rgb(0, 0, 0); font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; background-color: rgb(255, 255, 255);"><a id="cb_post_title_url" class="postTitle2 vertical-middle" href="https://www.cnblogs.com/Web-Architecture/p/6478371.html" style="outline: none; color: rgb(33, 117, 155); text-decoration-line: none; transition: all 0.4s linear 0s;">基于添加自定义字段的总结</a></h1><div class="clear" style="clear: both; color: rgb(0, 0, 0); font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);"></div><div class="postBody" style="color: rgb(0, 0, 0); line-height: 1.7; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; background-color: rgb(255, 255, 255);"><div id="cnblogs_post_body" class="blogpost-body" style="margin-bottom: 20px; word-break: break-word;">以下为添加自定义字段，设置动态添加表格行，删除表格行的实例。主要功能如下：<ul style="margin-left: 30px;"><li style="margin-bottom: 1em; margin-left: 0px; list-style-position: initial; list-style-image: initial;">添加行</li><li style="margin-bottom: 1em; margin-left: 0px; list-style-position: initial; list-style-image: initial;">删除行</li><li style="margin-bottom: 1em; margin-left: 0px; list-style-position: initial; list-style-image: initial;">选择当前字段名称</li><li style="margin-bottom: 1em; margin-left: 0px; list-style-position: initial; list-style-image: initial;">设置当前字段名称可编辑状态</li></ul>图示为实现的演示图：<img src="https://images2015.cnblogs.com/blog/799972/201702/799972-20170228122317532-382270099.png" alt="" style="border: 0px; max-width: 700px; height: auto;"> html: <div class="cnblogs_code" style="margin-top: 5px; margin-bottom: 5px; padding: 5px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><a title="复制代码" style="outline: none; color: rgb(0, 0, 0); text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 700px; height: auto;"></a></div><pre style="overflow: auto; font-family: "Courier New" !important;"> <table class="table table-hidden">
<thead>
<tr>
<th colspan="3"><a id="addRow" class="btn btn-info">添加一行</a></th>
</tr>
<tr>
<th>字段名称</th>
<th>字段值</th>
<th>操作</th>
</tr>
</thead>
<tbody id="optionContainer">
</tbody>
</table></pre><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><a title="复制代码" style="outline: none; color: rgb(0, 0, 0); text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 700px; height: auto;"></a></div></div>js:<div class="cnblogs_code" style="margin-top: 5px; margin-bottom: 5px; padding: 5px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><a title="复制代码" style="outline: none; color: rgb(0, 0, 0); text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 700px; height: auto;"></a></div><pre style="overflow: auto; font-family: "Courier New" !important;"> function File1(e){
// console.log(e)
var name = e.id;
// alert(name)
var value=name.substring(6,7)
// alert(value)
if (e.value == '0') {
$("#"+name).css('display', 'none');
$("#"+name).siblings('input').attr('type', 'text');
$("#"+name).siblings('input').attr('name', 'key_text_'+value);
}else {
alert(e.value)
}
}
function Field2(e){
var name = e.id;
$("#"+name).siblings('select').css('display', 'block');
$("#"+name).attr('type', 'hidden');
}
var rowCount = 0;
$("#addRow").click(function () {
//Field1(rowCount);
rowCount++;
var newRow = '<tr >' +
'<td><select id="select' + rowCount + '" class="form-control FieldSelect">' +
'<option value="1">QQ</option>' +
'<option value="2">电话</option>' +
'<option value="3">地址</option>' +
'<option value="0">编辑</option></select>' +
'<input id="input' + rowCount + '" type="hidden" name="key'+rowCount+'" class="form-control Fieldtxt" value="QQ" size="10" ondblclick="javascript:return Field2(this)"/> ' +
'<td> <input class="form-control" placeholder="输入字段值" name="content'+rowCount+'" type="text"> </td> ' +
'<td> 删除 </td> ' +
'</tr>';
$('#optionContainer').append(newRow);
});</pre><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><a title="复制代码" style="outline: none; color: rgb(0, 0, 0); text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 700px; height: auto;"></a></div></div>以上实例在独立的文件中尚可实现，在开发过程中难免会遇到问题。把代码放进了项目中会显示 <pre style="overflow: auto;">Field()方法未定义的情况
就考虑了一种方案，在选择实现调用函数，并不写在动态标签中。
以下为解决方案：</pre><div class="cnblogs_code" style="margin-top: 5px; margin-bottom: 5px; padding: 5px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><a title="复制代码" style="outline: none; color: rgb(0, 0, 0); text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 700px; height: auto;"></a></div><pre style="overflow: auto; font-family: "Courier New" !important;">var rowCount = 0;
$("#addRow").click(function () {
//Field1(rowCount);
rowCount++;
var newRow = '<tr >' +
'<td>' +
'<select id="select' + rowCount + '" name="key_select_'+rowCount+'" class="form-control FieldSelect">' +
'<option value="1">QQ</option>' +
'<option value="2">电话</option>' +
'<option value="3">地址</option>' +
'<option value="0">编辑</option>' +
'</select>' +
'<input id="input' + rowCount + '" type="hidden" name="key'+rowCount+'" class="form-control Fieldtxt" value="QQ" size="10" disabled="disabled"/> ' +
'<td> <input class="form-control" placeholder="输入字段值" name="content'+rowCount+'" type="text"> </td> ' +
'<td> 删除 </td> ' +
'</tr>';
$('#optionContainer').append(newRow);
$('#select' + rowCount).change(function () {
File1(this)
});
$('#input' + rowCount).dblclick(function () {
Field2(this)
})
});
var File1=function(e){
//console.log(e);
//获取id
var name = e.id;
//获取id在第几行
var value=name.substring(6,7);
//alert(value);
//判断值是否为编辑
if (e.value == '0') {
$("#"+name).attr("disabled","disabled");
$("#"+name).css('display', 'none');
$("#"+name).siblings('input').attr('type', 'text');
//input 赋值name字段为key_text_**
$("#"+name).siblings('input').removeAttr('disabled');
$("#"+name).siblings('input').attr('name', 'key_text_'+value);
}else {
//select选中的值
$("#"+name).attr('name','key_select_'+value)
}
};
var Field2=function(e){
var name = e.id;
$("#"+name).siblings('select').removeAttr('disabled');
$("#"+name).siblings('select').css('display', 'block');
$("#"+name).attr('disabled', 'disabled');
$("#"+name).attr('type', 'hidden');
};</pre><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><a title="复制代码" style="outline: none; color: rgb(0, 0, 0); text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 700px; height: auto;"></a></div></div> 以上为实现效果，当设置字段名称为输入框时，可双击返回选择下拉框来选择实现主要功能。</div></div>

复制代码

Simon.hu · Simon.hu

大佬
这是啥意思？这么多代码是干啥的？

小崽子 · 小崽子

有这么一个思路可以试一试：
比如我们平时阿里巴巴上架产品的时候会打开产品编辑详情页，把这个打开的产品编辑详情页看作主表，然后设置一个子表，子表搞两个或两个以上的字段，比如自定义属性标题，自定义属性值，然后主表子表做关联，然后再在最终展示页展示主表内容和子表内容，子表内容以图文列表的方式展示出来，把图文列表放到一行合并居中的行里面，把这一行的行高设置为自适应高度就能达到想要的效果。

小崽子 · 小崽子

olookok 发表于 2020-12-8 19:00
如果活字格中表格的列可以动态展示就牛逼了。希望能早日实现。还有锁定行，锁定列，锁定单元 ...

一般锁定行肯定是要满足某些条件就锁定，那再编辑和删除按钮上面可以做if条件判断，满足条件了就不给编辑或者不给删除了。可以这样尝试着去做。

Joe.xu · Joe.xu

小崽子发表于 2022-3-31 16:00
一般锁定行肯定是要满足某些条件就锁定，那再编辑和删除按钮上面可以做if条件判断，满足条件了就不给编辑 ...

感谢大佬的经验分享

		自动登录	找回密码
密码			立即注册

[已处理] 允许客户添加一些新字段

微信认证勋章

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

圣诞拼拼乐