layui表格加⼊表单元素,取⾏数据值传到后台问题
最近 django + layui 写⽹站时候想实现在表格⾥加⼊开关和按钮功能,遇到往后台传值问题,参考⼏个⽂章都没成功解决,经研究 layui 的功能语法,找到了解决办法。
1. 想实现表格中加⼊按钮和开关
有⼀个需求,想在动态数据表格中加⼊表单元素,如开关和单选按钮
要求:点击按钮,获取前端数据,将结果发送给后台进⾏值的修改,刷新页⾯显⽰修改后的结果:
先说答案,参考这个来写:
2. 官⽅⽰例代码分析
官⽅⽂档中提到
//页⾯代码
<script type="text/html" id="checkboxTpl">
<!-- 这⾥的 checked 的状态只是演⽰ -->
<input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
</script>
特别关注:上⾯的 lay-filter=“lockDemo”
//{{d.id}} 是为了让表格数据按⾏显⽰在页⾯上(是那个开关的值,true or fal)
//{{d.id}},d是⼀⾏数据,id是表格列名,在 der定义, ,{field:‘id’, title:‘ID’, width:100, unresize: true, sort: true} //django 中 的{{ }}符合有特殊含义,需要特殊代码屏蔽,否则页⾯不识别⾏数据
//表格
elem: '#test'
党的介绍
,url:'/demo/table/ur/'青春舞动
,
cellMinWidth: 80
,cols: [[
{type:'numbers'}
,{type: 'checkbox'}
,{field:'id', title:'ID', width:100, unresize: true, sort: true}
,{field:'urname', title:'⽤户名', templet: '#urnameTpl'}
,{field:'city', title:'城市'}
,{field:'wealth', title: '财富', minWidth:120, sort: true}
,{field:'x', title:'性别', width:85, templet: '#switchTpl', unresize: true}
,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
]]
,
page: true
});
//监听锁定操作
<('checkbox(lockDemo)', function(obj){
layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, his);
});
特别关注:上⾯的 lockDemo , 这个蚕参数是 lay-filter的值,在layui 中想调⽤ lay-filter的值,写法为
<('checkbox(lockDemo)'{
//do somesthing
}
3. 效果分析
以上特别关注提到的 代码
<('checkbox(lockDemo)'{
//do somesthing
}
可以有效在表格中显⽰开关效果,形如:
但是这种是⽆法将开关修改之后的结果发送回服务器的,因为很难⽤ layui 本⾝的功能来取值整⾏数据。
如果想修改这个开关的值,必定要获取ID 值和这个开关的值,并将ID 值和这个开关的值发送给后台,才能实现修改。
4. 解决⽅案
为了实现获取ID 值和这个开关的值,并将ID 值和这个开关的值发送给后台,计划采⽤ 监听⼯具条(⾏编辑和删除按钮)的写法:
(1)分析该代码如何实现
如果想获取⾏数据,只能通过 来获取,⼆通过 是⽆法获取⾏数据的!
提到:
toolbar - 绑定⼯具条模板:
通常你需要在表格的每⼀⾏加上 查看、编辑、删除 这样类似的操作按钮,⽽ tool 参数就是为此⽽⽣,你因此可以⾮常便捷地实现各种操作功能。
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这⾥的toolbar值是模板元素的选择器
]]
});
以上的toolbar: '#barDemo'选项是实现的关键,值#barDemo 为下⾯的id="barDemo"
药品广告
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
以上的 lay-event="detail" 是下⾯ 判断的关键,值detail ⽤于判断点击按钮的事件类型,如下⾯的 if(layEvent=== 'detail'){ //查看:
//监听⼯具条
<('tool(table-layer-Filter)', function(obj){ //注:tool 是⼯具条事件名,table-layer-Filter是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前⾏数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
if(layEvent=== 'detail'){ //查看 }
el if(layEvent === 'del'){ //删除 }
el if(layEvent === 'edit'){ //编辑 }
# 想获取⾏数据,只能通过 下的 obj.data
# 注意这句话: var layEvent = obj.event //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
总结⼀下的流程:
猪肘子图片点击查看按钮时:
1. 定位是在表格⾥,定位table.rander ;
2. 定位 table.rander ⼯具条模板ID: toolbar: '#barDemo';
3. <script>中定位到了 查看按钮对应的事件ID:lay-event="detail";
4. 在 中 判断事件ID 即可。
特别注意: 识别 表单(按钮)的 lay-filter
< 识别 表格 的 lay-filter
小学语文名师obj.event 识别 lay-event
(2)参考以上流程实现⾃⼰的代码
我创建的代码中
特别注意 要使⽤{% verbatim %}和{% endverbatim %}将按钮包含,否则将不解析{{ }}。
前端 html 写三⽬运算符,必须使⽤{{ }}进⾏包含,问号前⾯的是判断真假( true 或者 fal),后端的返回值如果是布尔值就可以直接写,不是布尔值,可以⽤if 判断。
无线网名称
后端返回的是 on 或者 off,所以 AAAA的 值是 on 或者 off。三⽬运算符可以⽤ if d.AAAA ==="on" 来⽣成 true 或者 fal。
{% verbatim %}
<script type="text/html" id="switchCCCC">
<input type="checkbox" name="switchAAAA" id="switchAAAAId" value="{{d.AAAA}}" title="打开" lay-event="switchAAAAEvent" lay-filter="switchAAAAFilter " {{ d.AAAA== "on" ? 'checked' : '' }}>
</script>
<script type="text/html" id="switchDDDD">
<input type="checkbox" name="switchBBBB" id="switchBBId" value="{{d.BBBB}}" lay-skin="switch" lay-text="开启|锁定过" lay-event="switchBBBBEvent" l ay-filter="switchBBBBFilter" {{ d.BBBB== "on" ? 'checked' : '' }}>
</script>
{% endverbatim %}
cols: [[
{field:'AAAA', title:'AAAA', width:120, templet: '#switchCCCC', event:'switchAAAAEvent'}
,{field:'BBBB', title:'BBBB', width:120, templet: '#switchDDDD', event:'switchBBBBEvent'}
]]
});
注意我上⾯写了templet: '#switchDDDD' 和 event:'switchBBBBEvent'两个选项,理论上在上⾯的代码中设置 lay-event="switchBBBBEvent"就可以实现,但是我这没实现成功,事件关系也么仔细研究,遂参考官⽅⽂档写了这个参数,确定可⽤。⽂档如下:
定义了 event 之后,下⾯就开始取值和传参了:
if(obj.event === "switchAAAAEvent" ){
$.post('/url/path/',{
ID: obj.data.ID
,AAAA: obj.data.AAAA
},function(data){
//根据后台返回的参数,来进⾏判断
if(data == "success"){
社会嗑layer.cloAll() //关闭所有弹出层
window.load(); //刷新⽗页⾯
}
});
if(obj.event === "switchBBBBEvent" ){
美国社区大学学费$.post('/url/path/',{
ID: obj.data.ID
,BBBB: obj.data.BBBB
},function(data){
//根据后台返回的参数,来进⾏判断
if(data == "success"){
layer.cloAll() //关闭所有弹出层
window.load(); //刷新⽗页⾯
}
});
另外,如果此时同时定义了 :
特别注意: 识别 按钮的 lay-filter, 识别 表格 的 lay-filter,obj.event 识别 lay-event
<('checkbox(switchAAAAFilter)', function (data) {
console.log("")
if (data.elem.checked) {
layer.tips('测试按钮开关-开', his, {
tips: 2
}
} el {
layer.tips('测试按钮开关-关', his, {
tips: 2
}
}
});
如果 的 obj.event 定义了取值和 ajax 传值,同时 也定义了按钮开关⾃⾝的提醒,则会有个先后顺序:
系统默认先运⾏ 的 obj.event ,再运⾏ 。
我在测试是尝试使⽤ 创建了⼀个临时变量,想取值之后再将结果传给 进⾏ajax数据发送,结果 先运⾏,发送结果为空,遂放弃。
(3)不可以出现两个⾃定义⼯具模板
如果系统内存在 查看删除⾏⼯具栏,现在⼜加上 开关⼯具栏,需要将判断结果写在⼀起
不可以分开为两个('tool(table-layer-Filter)'监听事件。