闲言少叙,上代码
一、列表页面
<table border="1" width="75%" cellpadding="0">
<tr>
<td>序号</td>
<td>名称</td>
<td>操作</td>
</tr>
<tr v-for="info in tagList">
<td> {{info.id}}</td>
<td> {{info.name}}</td>
<tr><td>
<button @click="toEditInfo(info.id,info.name)">编辑</button>
</td></tr>
</table>
<script>
var toEditInfo=function(id,name){
var url="info_edit.html?id="+id+"&name="+name+"&time"+new Date();
url=encodeURI(url);
console.log(url);
window.location.href=url;
}
</script>
二、编辑页面
<html>
<script>
$(function(){
// layer.alert("hello,edit page");
initForm();
// validateForm();
});
var initForm=function(){
var name=getUrlParam("name");
var dictId=getUrlParam("id");
if(name!=null && name!=undefined){
$("#name").val(name);
}
if(dictId!=null && dictId!=undefined){
$("#dictId").val(dictId);
}
}
var validateForm=function(){
$("#myform").validate({
rules: {
// 不需要使用 "" 括起来
name: "required"
// 需要使用 "" 括起来
//"user[email]": "email",
// 需要使用 "" 括起来
//"user.address.street": "required"
},
messages:{
"name":{
"required":"<font color='red'>*</font>名称不能为空",
},
"dictId":{
"required":"主键Id不能为空",
}
},
submitHandler: function() {
//验证通过后执行这里
//alert("提交事件!");
var jsonTag=form2JsonString($("#myform"));
console.log(jsonTag);
//设置请求头
let config={
headers:{
'Content-Type':'application/json' // 'multipart/form-data'
}
};
//封装入参参数
axios.post('http://localhost:8083/info/edit',jsonTag, config).then(res => {
var result=res.data.code;
console.log("result:"+result);
if(result!=null && result!=undefined && result==0){
layer.msg(res.data.msg+'<span name="count" style="color: red;">3</span>秒后跳转列表页', {
icon: 1,
success: function (layero, index) {
var countElem = layero.find('span[name="count"]');
var timer = setInterval(function () {
var countTemp = parseInt(countElem.text()) - 1;
countTemp === 0 ? clearInterval(timer):countElem.text(countTemp);
}, 1000)
}
}, function () {
//alert('跳转');
window.location.href="list.html"
});
}else{
layer.alert(res.data.msg);
}
}).catch(err => {
console.log(err);
});
}
});
}
/** 表单序列化成json字符串的方法
* form object
*/
var form2JsonString=function(formObject) {
var paramArray = $(formObject).serializeArray();
/*请求参数转json对象*/
var jsonObj={};
$(paramArray).each(function(){
jsonObj[this.name]=this.value;
});
console.log(jsonObj);
// json对象再转换成json字符串
return JSON.stringify(jsonObj);
}
</script>
</head>
<body>
<form id="myform" name="myform" >
<input type="hidden" id="dictId" name="dictId" value=""/><label></label><br/>
名称: <input type="text" id="name" name="name" value=""/><label></label><br/>
叶子节点:是<input type="radio" id="leaf" name="leaf" value="0"/>
否<input type="radio" id="leaf" name="leaf" value="1" /><label></label>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
说明:The demo in this page is for suggestion.
本页面仅供参考;如转载,烦请标明出处和链接。如盗用,则保留追究的权利。