一对一的主子表 添加页面
<!DOCTYPE html> <html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <div class="wrapper wrapper-content "> <div class="row"> <div class="col-sm-8"> <div class="ibox"> <form id="inputForm" method="post" class="form-horizontal"> <div class="box-body"> <div class="form-unit">基本信息</div> <div class="row"> <input type="hidden" id="mclass" name="mclass"/> <div class="col-xs-6"> <div class="form-group"> <label class="col-sm-3 control-label">ID:</label> <div class="col-sm-8"> <input id="id" name="id" class="form-control" type="text" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">名称:</label> <div class="col-sm-8"> <input id="xname" name="xname" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">年龄:</label> <div class="col-sm-8"> <input id="age" name="age" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="control-label col-sm-4" title=""> <span class="required hide">*</span> 用户选择:<i class="fa icon-question hide"></i></label> <div class="col-sm-8"> <div class="input-group treeselect" id="testUserDiv" data-url="/system/sysDept/treeViewLayer"> <input id="deptId" name="deptId" class="hidden" > <input id="deptName" name="deptName" class="form-control" type="text" style="cursor: pointer;" onclick="openDept()" readonly="readonly" placeholder="所属部门"> </div> </div> </div> </div> </div> </div> </form> <button type="button" class="btn btn-success dropdown-toggle" onclick="addtable()"> <span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span>增加 </button> <table id="exampleTable"> </table> <div class="columns pull-right"> <button class="btn btn-success" onclick="submittable()">提交</button> </div> </div> </div> </div> </div> <div th:include="include :: footer"></div> <script type="text/javascript"> var tid=1; var openDept = function(){ layer.open({ type:2, title:"选择部门", area : [ '300px', '450px' ], content:"/system/sysDept/treeView" }) } function loadDept( deptId,deptName){ $("#deptId").val(deptId); $("#deptName").val(deptName); } function submittable() { var data = $('#exampleTable').bootstrapTable('getData'); $('#mclass').val(JSON.stringify(data)); $.ajax({ url : "/mytest/addmassnewtable", type : "post", data : $('#inputForm').serialize(), success : function(r) { if (r.code == 0) { layer.msg(r.msg); } else { layer.msg(r.msg); } parent.reLoad(); reLoad(); } }); } //删除指定行 function removeRow(tid){ $('#exampleTable').bootstrapTable('remove', { field : 'tid', values:[parseInt(tid)] }); } $(function() { $.fn.editable.defaults.mode ='inline'; load(); $('#exampleTable').bootstrapTable('hideColumn', 'tid'); }); //增加行数 function addtable() { var data={tid:tid,testInput:'',testSort:'',testTextarea:'',testSelect:'1',testDate:""} $('#exampleTable').bootstrapTable('append',data); tid++; } //更改值后更新数据 function reloadRowData(obj, row, key, index){ alert(obj.val()) row[key] = obj.val(); $('#exampleTable').bootstrapTable('updateRow', { index: index, row:row }); } //对文本字段的处理 function ftext(value,row,index,key){ if(typeof(value) == "undefined") { value = ""; } return "<input type=\"text\" class=\"form-control\" value=\"" + value + "\" onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")' />"; } //对日期字段的处理 function fdate(value,row,index,key) { if(typeof(value) == "undefined") { value = ""; } var s="<div class='input-group date'>"+ "<input type=\"text\" class=\"form-control\" value=\"" + value + "\" onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")' onfocus='wd()'/>"+ "<span class=\"input-group-addon\">"+ "<span class=\"glyphicon glyphicon-calendar\"></span></span></div>" return s; } //日期插件 function wd(){ WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false}); } function load() { $('#exampleTable').bootstrapTable( { method : 'get', // 服务器数据的请求方式 get or post url : "", // /服务器数据的加载地址 striped : true, // 设置为true会有隔行变色效果 dataType : "json", // 服务器返回的数据类型 singleSelect : false, // 设置为true将禁止多选 //保存的使用 onEditableSave: function(value,row,index) { $('#exampleTable').bootstrapTable('updateRow', { index: index, row:row }); }, columns: [ { field : 'tid', // 列字段名 title : '#', // 列标题 }, { field: 'testInput', title: '文本', align: 'center', pk:'1', sortable:true, formatter:ftext }, { field: 'testSort', title: '排序', align: 'center', formatter:ftext }, { field: 'testSelect', title: '单选', align: 'center', editable: { type: 'select', showbuttons: false, source: [ {value: 1, text: '男'}, {value: 2, text: '女'}, ], formatter: function (value,row,index) { var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"}; return result; } } } , { field: 'testDate', title: '时间', align: 'center', formatter:fdate }, { title : '操作', field : 'id', align : 'center', formatter : function(value, row, index) { var d = '<a class="btn btn-warning btn-sm" href="#" title="删除" mce_href="#" onclick="removeRow(\''+ row.tid+'\')"><i class="fa fa-remove"></i></a> '; return d; } } ] }); } </script> </body> </html>