LayUI switch表单提交与返回，根据返回修改switch的状态

最新推荐文章于 2021-07-20 17:42:24 发布

拿来主义者

最新推荐文章于 2021-07-20 17:42:24 发布

阅读量1.9k

点赞数

分类专栏： servlet js layui

本文链接：https://blog.youkuaiyun.com/dongxuetucheng/article/details/103819554

版权

servlet 同时被 3 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

layui

1 篇文章

订阅专栏

本人小白，目的是记录笔记，二来给初学者提供参考。大神有好方法不吝赐教，诚心学习。

最近做一个广告开关的控制，如下图,修改成功，则开关状态切换，否则提示错误，开关状态不予切换。

上代码：adSwitch是table中的一个返回参数字段

<body>

...........

// 既然用到表单、弹出层、元素、表格那么就先加载这些东东
       layui.use(['form','laypage', 'layer', 'table','element', 'slider'], function(){
       var form = layui.form
       ,laypage = layui.laypage //分页
       ,layer = layui.layer //弹层
       ,table = layui.table //表格
       ,element = layui.element //元素操作
       ,slider = layui.slider //滑块

       //向世界问个好
       layer.msg('Hello Admin');

       //监听指定开关
       form.on('switch(adSwitch)', function(data){

// post提交携带三个参数，value切换状态、cmd、type这两个自定义的
           var parm = {value:data.elem.checked,cmd:'updateSwitch',type:'adSwitch'}
           var mLoad = layer.load(2, {time: 10*1000});// 显示进度
       $.post("../api", parm, function (result) {
if (result.code == 1) {
layer.tips((data.elem.checked ? '开启广告' : '关闭广告'), data.othis)
}else {
layer.tips('处理失败!'+data.elem.checked, data.othis);
data.elem.checked = !data.elem.checked;
}
form.render();// 必须重新渲染，这个很重要
layer.close(mLoad); // 关闭进度
});
       });
...

省略一些代码

...

       //https://www.layui.com/doc/modules/table.html
       //执行一个 table 实例
       table.render({
   elem: '#demo'
   ,height: 'full-0'
        ,url: '../ControlManager?cmd=adswitch' //数据接口
        ,title: '用户表'
        ,page: true //开启分页
        ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        ,totalRow: false //开启合计行
        ,cols: [[ //表头
   {type: 'checkbox', fixed: 'left'}
   ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'appname', title: '应用名', sort: true,toolbar: '#appname', align:'center'}
        ,{field: 'qd', title: '渠道', sort: true,toolbar: '#qd', align:'center'}
        ,{field: 'version', title: '版本' , sort: true,toolbar: '#version', align:'center'}
   ,{field: 'adSwitch', title: '总开关',toolbar: '#adSwitch', align:'center'}
...

...
   ,{fixed: 'right', title: '操作',width: 125, align:'center', toolbar: '#editor'}
   ]]
       });
   });
</script>

</body>

//HttpServlet 中的doPost
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
getRequest(request);

// 根据参数修改数据库

// 返回操作结果
   }

   private HashMap<String,String> getRequest(HttpServletRequest request){
       HashMap<String,String> map = new HashMap<String, String>();
       Enumeration e = request.getParameterNames();
       while(e.hasMoreElements()){
           String s = (String)(e.nextElement());
           map.put(s, request.getParameter(s));
           Listener.Log.debug(s+":"+map.get(s));
       }
       return map;
   }