easyui点击人数自动生成一行表单时间
管理员 发布于 6年前 397
功能效果：
代码：
<form id="form" method="post" onsubmit="return submit();" style="margin:0;padding:5px 5px" data-options="novalidate:true">
<div id="bookDiv" class="easyui-panel" data-options="title:'预订信息',halign:'left',headerCls:'panel'"
style="height: 100px">
<table border="0" cellspacing="0" style="border-color: #e6efff;margin: 10px;">
<thead>
<tr>
<th width="70">用户类型</th>
<th>采购价</th>
<th>利润</th>
<th>服务费</th>
<th>销售价</th>
<th>出行人数</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="easyui-numberbox price cosprice" id="adultcosprice" name="adultcosprice" style="width:100px;" data-options="precision:2">
</td>
<td>
<input type="text" class="easyui-numberbox price" name="" style="width:100px;">
</td>
<td>
<input type="text" class="easyui-numberbox price" name="adultcharge" style="width:100px;" data-options="precision:2">
</td>
<td>
<input type="text" class="easyui-numberbox price insurprice" name="" style="width:100px;" data-options="editable:false,precision:2">
</td>
<td>
<input type="text" class="easyui-numberbox sumprice" id="adultprice" name="adultprice" style="width:100px;" data-options="editable:false,precision:2">
</td>
<td>
<input type="text" class="easyui-numberspinner number" id="ss" name="adultnumber" style="width:100px;" data-options="editable:false,min:1,value:1">
</td>
</tr>
</tbody>
</table>
</div>
<div id="passenagersDiv" class="easyui-panel" data-options="title:'出行人信息',halign:'left',
headerCls:'panel'" style="height: 90px">
<table style="border-color: #e6efff;margin: 10px;">
<thead>
<tr>
<th>类型</th>
<th>人员姓名</th>
<th>证件类型</th>
<th>证件信息</th>
<th>联系电话</th>
</tr>
</thead>
<tbody id="passengers">
<tr>
<td>
<input type="text" class="easyui-combobox" name="passenger[0][usertype]"
data-options="width:100,required:true,panelHeight:'auto',editable:false,required:true,valueField: 'key',textField: 'value'">
</td>
<td>
<input type="text" class="easyui-textbox" name="passenger[0][username]"
data-options="width:100,required:true"></td>
<td>
<input type="text" class="easyui-combobox" name="passenger[0][idtype]"
data-options="width:100,required:true,panelHeight:'auto',editable:false,required:true,valueField: 'key',textField: 'value' ">
</td>
<td>
<input type="text" class="easyui-textbox" name="passenger[0][userno]"
data-options="width:150,required:true"></td>
<td>
<input type="text" class="easyui-textbox" name="passenger[0][mobile]"
data-options="width:100,required:true,
validType:['mobile']">
</td>
</tr>
</tbody>
</table>
</div>
<input type="submit" value="Submit"></input>
</form>
<script type="text/javascript">
//点击生成tr 及里面的td input
$('#ss').numberspinner({
min: 1,
max: 10,
editable: false,
onChange:function(newValue,oldValue) {
setUser('passengers',newValue,oldValue)
}
});
//动态添加出行人信息
function setUser(tableId,newNum,oldNum)
{
oldNum = oldNum ? parseInt(oldNum) : 0;
var len = $('#passengers tr').length;
var key = parseInt(len - oldNum) + parseInt(newNum);
var num = key;
//console.log(oldNum)
//根据人数生成 newNum行
for(var i=len;i<newNum;i++)
{
//拼接表格
$("#"+tableId).append('<tr>' +
'<td><input type="text" class="easyui-textbox" name="passenger['+key+'][usertype]" data-options="panelHeight:'+"'auto'"+',editable:false,valueField: '+"'key'"+',textField: '+"'value'"+',data:[],required:true,width:100"/></td>' +
'<td><input type="text" class="easyui-textbox" name="passenger['+key+'][username]" data-options="required:true,width:100"></td>' +
'<td><input class="easyui-combobox cardtype" name="passenger['+key+'][idtype]" data-options="panelHeight:'+"'auto'"+',editable:false,valueField: '+"'key'"+',textField: '+"'value'"+',data:[],required:true,width:100" /></td>' +
'<td><input type="text" class="easyui-textbox" name="passenger['+key+'][userno]" data-options="required:true,width:150"></td>' +
'<td><input type="text" class="easyui-textbox" name="passenger['+key+'][mobile]" data-options="width:100"></td></tr>'
);
}
//渲染
$.parser.parse($('#'+tableId));
//根据人数自动减少newNum行
$('#passengers tr:gt(' + (newNum - 1)+ ')').remove();
$('#passenagersDiv').panel({height:64+26*num});
}
//保存
function submit() {
$.ajax({
type: 'POST',
url: '/welcome/test',
data: $('#form').serialize(),
dataType: "json",
beforeSend: function (xhr) {
if ($('#form').form('validate')) {
$.messager.progress();
return true;
}
$('#form').find(".validatebox-invalid:first").focus();
return false;
},
success: function (res) {
$.messager.progress('close');
if (res.status == 200) {
$("#form").parent().dialog("close");
$.messager.alert('操作提示', res.msg, 'info');
return true;
}
$.messager.alert('操作提示', res.msg, 'error');
}
});
return false;
}
</script>实现效果图：
![D8S5`AWV5T]1)4(%%UL8TKY.png](/upload/image/20180422/1524405021135326.png "1524405021135326.png")
生成提交的数据：
![IL0E_2`BVE1TOW7]1RF6D28.png](/upload/image/20180422/1524404941125902.png "1524404941125902.png")
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
该博客于2020-12-7日，后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成
是我仿的原来我的TP5框架写的博客，比较粗糙，底下是入口
侯体宗的博客
文章标签
- test 三种扣减库存方案 Hyperf2.1启动报错端口占用 上外网神器Ghelper 上外网神器集装箱 laravel中HMVC模式 Hyperf框架验证器 Hyperf自定义函数编写 Hyperf对象转成数组 PHP2021面试题集 centos7系统上挂载 Hyperf框架 秒杀系统的设计 Laravel Octane PHP数组底层实现原理 php7垃圾回收机制 Laravel中类型转换 mysql事务特征及隔离级别 Linux-awk命令 mysql编码 JWT源码实现 Laravel内核分析 Laravel中的用法 centos7+go环境+beego框架 go+beego框架开发博客 go+beego开发博客首页 go+beego自定义公共函数 beego注册_登录_查询 beego控制器创建 Beego框架安装 go语言环境安装 laravel+Elasticsearc laravel运行原理 windows7搭建Vuejs环境 Laravel分块 laravel去重(distinct() laravel集合 laravel+mysql读写分离 laravel5+复杂原生sql laravel+MissMyCat/al lnmp sessio laravel自定义数组分页 laravel中.env配置 laravel8队列发邮件 码云仓库常用操作 laravel8配置163SMTP laravel8配置全局函数 laravel/jetstream之认证 laravel/jetstream
友情链接
