post接口数据传递类型
一般都是通过form组件（例如input）的name属性获取组件的value属性值传给后台，但是会根据数据的类型（例如：字符串、数组、对象等）在接口处有不同的写法。
1、List areas
这是传递对象，可直接将var data = $(‘form’).serializeJson();的data进行传递，因为data就是一个对象。
$.post("@Url.Action(“XXXX”, “xxxx”)", data, function (result) {})
2、string goal
这是传递字符串，可能在data中的goal本身就是字符串，那就直接写data.goal即可，如果不是，则需要JSON.stringify(data.goal)进行转换。
（注：如果data.goal本身是字符串，再由JSON.stringify(data.goal)进行传递，则会出现斜杠，例如:"“我是值”"）
setTimeout
不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效
<script>
new Vue({
el: "#app",
data: {
load: false
},
created: function() {
var self = this;
self.load = true;
//这个时候div为false的文本都出现了，因为渲染不成功
console.log(document.getElementById("div").innerHTML)
//这个报错,因为此时还未取到div的内容
console.log(document.getElementById("div").innerHTML)
//解决方法: 加window.onload
// window.onload=function(){
// console.log(document.getElementById("div").innerHTML)
}
},
})
</script>
<body>
<div id="app">
<div v-if="load">
<div id="div">这是一个div</div>
</div>
<div v-if="false" id="div1">111</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
load: false
},
created: function() {
var self = this;
//异步
// mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
//created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
setTimeout(function() {
self.load = true;
//变成true立马执行上面的v-if，但是因为时间不够,所以下面报错 ，因此于他而言，load还是false
console.log(document.getElementById("div").innerHTML)
}, 100)
//获取innerhtml的时候,v-if还没有执行,所以可以获取
console.log(document.getElementById("123").innerHTML)
},
})
</script>
checkbox的单选和多选
<form class="layui-form" action="" v-if="model==''">
<div class="layui-form-item">
<ul>
<li><input type="checkbox" name="area" value="本人追的星" id="qg" lay-skin="primary" lay-filter="filter" title="本人追的星" /></li>
<li><input type="checkbox" name="area" value="yyqx" id="dq_1" lay-filter="filter1" title="yyqx" lay-skin="primary" /></li>
<li><input type="checkbox" name="area" value="lyf" id="dq_2" lay-filter="filter1" title="lyf" lay-skin="primary" /></li>
<li><input type="checkbox" name="area" value="pyc" id="dq_3" lay-filter="filter1" title="pyc" lay-skin="primary" /></li>
<li><input type="checkbox" name="area" value="lhr" id="dq_4" lay-filter="filter1" title="lhr" lay-skin="primary" /></li>
<li><input type="checkbox" name="area" value="kl" id="dq_5" lay-filter="filter1" title="kl" lay-skin="primary" /></li>
</ul>
</div>
</form>
<script>
var form = layui.form;
form.render();
new Vue({
el: "#app",
mounted: function () {
var self = this;
form.render();
form.on('checkbox(filter)', function (data) {
$(":checkbox:gt(0)").prop("checked", this.checked);
form.render();
});
form.on('checkbox(filter1)', function (data) {
if ($(data.elem.id).is(":checked") == false) {
$("#qg").prop("checked", false);
}
form.render();
var dq = $('input[name="area"]:checked').length;
var alldq = $(":checkbox:gt(0)").length;
if (dq == alldq) {
$(":checkbox:eq(0)").prop("checked", true);
}
form.render();
});
},
});
</script>
echarts
<div id="app" class="layui-anim layui-anim-up">
<div id="main" style="border:3px solid #009688;height:500px;width:700px;min-width:500px;margin:20px auto"></div>
</div>
<script>
function charts(data) {
var myChart = echarts.init(document.getElementById('main'));
option = {
width: '650px',
height: '410px',
title: {
text: '这是主标题',
right: '20%',
top: 10,
subtext: '这是副标题',
subtextStyle: {
color: '#000',
align: 'center',
verticalAlign: 'top',
},
textAlign: 'center',
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '0%',
data: ['legend1', 'legend2']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
},
yAxis: {
type: 'value',
name: '纵坐标',
nameLocation: 'middle',
nameGap: '20'
},
series: [
{
name: 'legend1',
type: 'line',
//这是线
smooth: true,
data: [[1,2],[2,3],[3,4],[4,5]],
},
{
symbolSize: 20,
name: 'legend2',
data: [[7,8],[8,9],[9,10]],
//这是点
type: 'scatter'
},
],
};
myChart.setOption(option);
</script>
table新增行或列
(注：layui的input的lay-verify="required"属性成功运行的条件：必须有form且class=“layui-form”；lay-submit的button必须在form里面)
<div id="app" class="layui-anim layui-anim-up">
<form class="layui-form" action="">
<table class="layui-table" v-if="flag">
<thead>
<tr>
<th colspan="5" class="tr_gzxcb" style="font-weight: bold;">表头</th>
<tr>
<tr>
<th class="th_head"></th>
<th class="th_head">th1</th>
<th class="th_head">th2</th>
<th class="th_head">th3</th>
<th class="th_head">th4</th>
</tr>
</thead>
//整行增加 addZW
<tbody v-for="index,k in list1">
<tr>
<td :rowspan="list2[k].length+1">
<form class="layui-form">
<div class="layui-form-item">
<input type="checkbox" :value="k" lay-filter="filter1" lay-skin="primary" />
</div>
</form>
</td>
<td class="text-center" :rowspan="list2[k].length+1"> <input type="text" lay-verify="required" v-model="list1[k]" name="posgrade" class="layui-input " onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"></td>
<td class="text-center"> <input type="text" lay-verify="required" name="post1" class="layui-input "></td>
<td class="text-center" :rowspan="list2[k].length+1"> <input type="number" lay-verify="required" min="0" name="averagewage" class="layui-input " onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"></td>
<td class="text-center"> <input type="text" lay-verify="required" name="existwage1"class="layui-input " onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"></td>
</tr>
//单行增加 addGW
<tr v-for="index,key in list2[k]">
<td class="text-center"> <input type="text" lay-verify="required" name="post2"class="layui-input " onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"></td>
<td class="text-center"> <input type="text" lay-verify="required" name="existwage2" class="layui-input " onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');"></td>
</tr>
</tbody>
</table>
</form>
<div class="dj">
<span class="adddj" v-on:click="addZW()">+整行增加</span>
<span class="adddj" v-on:click="addGW()">+部分行增加</span>
<span class="deletedj" v-on:click="del()"> -删除</span>
</div>
</div>
<script>
var form = layui.form;
form.render();
new Vue({
el: '#app',
data: {
list1:['','',''],
list2: [],
flag: false,
},
methods: {
addZW() {
this.list1.push('');
this.list2.push('');
$("input[type=checkbox]").prop("checked", false);
form.render()
},
addGW() {
var val = $("input[type='checkbox']:checked").val();
var cbx = $("input[type='checkbox']:checked").length;
if (val == undefined) {
layer.msg("请选择整行再添加部分行");
} else if (cbx > 1) {
layer.msg('请逐一操作');
} else {
this.list2.splice(val, 1, this.list2[val] + 1);
$("input[type=checkbox]").prop("checked", false);
}
},
del() {
var cbx = $("input[type='checkbox']:checked").length;
if (this.list1.length < 4) {
layer.msg("不能再减少了");
$("input[type=checkbox]").prop("checked", false);
return false;
} else if (cbx == 0) {
layer.msg("请选择删除选项");
} else if (cbx > 1) {
layer.msg('请逐一删除');
} else {
var val = $("input[type='checkbox']:checked").val();
this.list1.splice(val, 1);
//这个不能少，不然点击增加又点删除之后，list2长度没有减少，会出现undefined
this.list2.splice(val, 1);
$("input[type=checkbox]").prop("checked", false);
}
},
GetList: function () {
var self = this;
$.post("@Url.Action("DJGet", "SM")", function (result) {
//重点！！！定义一个数组，将其长度和整行的长度相等
for (var i = 0; i < self.list1.length; i++) {
self.list2.push('');
self.flag = true;
}
});
}
},
mounted: function () {
var self = this;
form.render();
form.on('submit(sub)', function (data) {
var data = $('form').serializeJson();
var post1 = data.post1;
var post2 = data.post2;
var existwage1 = data.existwage1;
var existwage2 = data.existwage2;
var obj = {};
obj.posgrade = data.posgrade;
obj.averagewage = data.averagewage;
var post = [];
var existwage = [];
var a = 0;
//将所填的数据变成二维数组
for (var i = 0; i < self.list2.length; i++) {
var temp = [];
var temp1 = [];
if (self.list2[i] == '') {
temp.push(post1[i]);
temp1.push(existwage1[i]);
} else {
temp.push(post1[i]);
temp1.push(existwage1[i]);
for (var j = 0; j < self.list2[i].length; j++) {
temp.push(post2[a]);
temp1.push(existwage2[a]);
a++;
}
}
post.push(temp);
existwage.push(temp1);
}
obj.post = post;
obj.existwage = existwage;
});
},
});
</script>
模板引擎
当表格经过双重循环但需要rowspan，会出现阶梯状表格，这个时候就可以用模板引擎
<div id="app" >
<form class="layui-form" action="" >
<table class="layui-table">
<tbody id="view"></tbody>
</table>
</form>
</div>
<script id="demo" type="text/html">
{{# layui.each(d.qqq, function(index, item){ }}
<tr>
//模板引擎的rowspan需要{{}}
<td rowspan="{{d.aaa[index].length+1}}">{{index+1}}</td>
</tr>
{{# layui.each(d.aaa[index], function(i, items){ }}
<tr>
<td>{{items}}</td>
<td>{{d.bbbb[index][i]}}</td>
</tr>
{{# }); }}
{{# }); }}
var form = layui.form;
//不能少
var laytpl = layui.laytpl;
new Vue({
el: '#app',
data: {
aaa: null,
qqq: null,
bbbb: null,
},
methods: {
GetList: function () {
setTimeout(function () {
var obj = {};
obj.aaa= self.aaaa;
obj.bbb= self.bbb;
obj.qqq= self.qqq;
var getTpl = document.getElementById('demo').innerHTML
, view = document.getElementById('view');
laytpl(getTpl).render(obj, function (html) {
view.innerHTML = html
});
},
});
</script>
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
