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)'监听事件。
