一对一的主子表 添加页面
<!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>