easyui点击人数自动生成一行表单时间
前端  /  管理员 发布于 4年前   443
功能效果:
代码:
<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>
实现效果图:
生成提交的数据:
博主 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..GGGGGGGGG 在
layui框架常用输入框介绍中评论 写的很好解决问题..路过的靓仔 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..激光豆芽 在
为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..激光豆芽 在
阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号