最近 django + layui 写网站时候想实现在表格里加入开关和按钮功能，遇到往后台传值问题，参考几个文章都没成功解决，经研究 layui 的功能语法，找到了解决办法。

有一个需求，想在动态数据表格中加入表单元素，如开关和单选按钮 要求：点击按钮，获取前端数据，将结果发送给后台进行值的修改，刷新页面显示修改后的结果： 先说答案，参考这个来写：

官方文档中提到 www.layui.com/demo/table/…

特别关注：上面的 lay-filter="lockDemo" //{{d.id}} 是为了让表格数据按行显示在页面上（是那个开关的值，true or false） //{{d.id}}，d是一行数据，id是表格列名，在 table.render定义， ,{field:'id', title:'ID', width:100, unresize: true, sort: true} //django 中 的{{ }}符合有特殊含义，需要特殊代码屏蔽，否则页面不识别行数据

特别关注：上面的 lockDemo , 这个蚕参数是 lay-filter的值，在layui 中想调用 lay-filter的值，写法为

以上特别关注提到的 代码

可以有效在表格中显示开关效果，形如： 但是这种是无法将开关修改之后的结果发送回服务器的，因为很难用 layui 本身的功能来取值整行数据。

如果想修改这个开关的值，必定要获取 ID 值和这个开关的值，并将 ID 值和这个开关的值发送给后台，才能实现修改。

为了实现获取 ID 值和这个开关的值，并将 ID 值和这个开关的值发送给后台，计划采用 监听工具条 （行编辑和删除按钮）的写法：

如果想获取行数据，只能通过 table.on 来获取，二通过form.on 是无法获取行数据的！

www.layui.com/doc/modules… 提到：

toolbar - 绑定工具条模板：

通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。

以上的toolbar: '#barDemo'选项是实现的关键，值#barDemo 为下面的 id="barDemo"

以上的 lay-event="detail" 是下面 table.on 判断的关键，值detail 用于判断点击按钮的事件类型，如下面的 if(layEvent=== 'detail'){ //查看：

总结一下的流程：

点击查看按钮时：

特别注意：form.on 识别 表单（按钮）的 lay-filter table.on 识别 表格 的 lay-filter obj.event 识别 lay-event

我创建的代码中 特别注意 要使用{% verbatim %}和{% endverbatim %}将按钮包含，否则将不解析{{ }}。

前端 html 写三目运算符，必须使用{{ }}进行包含，问号前面的是判断真假（ true 或者 false），后端的返回值如果是布尔值就可以直接写，不是布尔值，可以用if 判断。 后端返回的是 on 或者 off，所以 AAAA 的 值是 on 或者 off。三目运算符可以用 if d.AAAA ==="on" 来生成 true 或者 false。

注意我上面写了templet: '#switchDDDD' 和 event:'switchBBBBEvent'两个选项，理论上在上面的代码中设置 lay-event="switchBBBBEvent"就可以实现，但是我这没实现成功，事件关系也么仔细研究，遂参考官方文档写了这个参数，确定可用。文档如下：

www.layui.com/doc/modules…

定义了 event 之后，下面就开始取值和传参了：

另外，如果此时同时定义了 form.on：

特别注意：form.on 识别 按钮的 lay-filter，table.on 识别 表格 的 lay-filter，obj.event 识别 lay-event

如果table.on 的 obj.event 定义了取值和 ajax 传值，同时 form.on 也定义了按钮开关自身的提醒，则会有个先后顺序： 系统默认先运行 table.on 的 obj.event ，再运行 form.on。 我在测试是尝试使用 form.on 创建了一个临时变量，想取值之后再将结果传给 table.on 进行ajax数据发送，结果 table.on 先运行，发送结果为空，遂放弃。

如果系统内存在 查看删除行工具栏，现在又加上 开关工具栏，需要将判断结果写在一起 不可以分开为两个table.on('tool(table-layer-Filter)'监听事件。

系统默认会使用最后一个同名的将上面的覆盖，但这仅限自定义的模板行攻击栏， 系统中的头工具栏有自己单独的模板，不受影响，可并列存在，如：

特别注意 要使用{% verbatim %}和{% endverbatim %}将按钮包含，否则将不解析{{ }}。

前端 html 写三目运算符，必须使用{{ }}进行包含，问号前面的是判断真假，后端的返回值如果是布尔值就可以直接写，不是布尔值，可以用if 判断。 后端返回的是 true 或者 false，所以 asset_isInQingteng 的 值是 true 或者 false。三目运算符可以直接写。

表格里的写这个 {fixed:'right', field: 'asset_isInQingteng', title:'操作', width:180, align:'center', toolbar: '#optionToolbar',totalRow: true}：

使用 optionToolbar 进行关联，将图标和查看、编辑、删除合在一起，此处也可以是其他的，比如前面的选择按钮等。

示例：