2018-06-27

layui是一套很不错的框架，可以快速写好一套后台管理模板，但是使用着难免会碰到问题，以下整理的一些心得。涉及到单选，多选，下拉，复选，分页问题

文件项目地址

效果图.png

layui讲解单选框多选框下拉框选择1选择2选择3重置

分页加载问题直接查看jslayui讲解单选框多选框下拉框选择1选择2选择3重置分页加载问题直接查看js$('.reset').click(function(event){// 单选重置开始$("input[name='layui-radio']:checked").prop({checked:false}); $("input[name='layui-radio']:first-child").prop({checked:true}); layui.form.render('radio','layui-reset-radio');// 单选重置结束// 多选重置开始$("input[name='layui-checkbox']:checked").prop({checked:false}); $("input[name='layui-checkbox']:first-child").prop({checked:true}); layui.form.render('checkbox','layui-reset-checkbox');// 多选重置结束// 下拉重置开始$('.selcted').val('选择1'); layui.form.render('select','layui-reset-selcted');// 下拉重置开始});// 监控单选改变layui.form.on("radio(layui-radio)",function(data){console.log(data); });// 监控多选改变layui.form.on('checkbox(layui-checkbox)',function(data){console.log(data); });// 监控下拉改变layui.form.on('select(layui-selected)',function(data){console.log(data); });/**

        * [initPage 初始化分页]

        * @return {[type]} [description]

        */functioninitPage(){            layui.laypage.render(                {elem:'page',count: $('.layui-table').attr('data-totalRow') ,curr: params.currentPage,limit:params.pageSize,layout: ['count','prev','page','next','limit','skip'] ,jump:function(obj,first){if(params.pageSize == obj.limit){                            params.currentPage = obj.curr;                        }else{                            params.currentPage =1;                            params.pageSize = obj.limit;                        }                        obj.count = $('.layui-table').attr('data-totalRow');if(!first){// 判断是否初次加载initList();                        }                    }                });        }

$('.reset').click(function(event){// 单选重置开始$("input[name='layui-radio']:checked").prop({checked:false});            $("input[name='layui-radio']:first-child").prop({checked:true});            layui.form.render('radio','layui-reset-radio');// 单选重置结束// 多选重置开始$("input[name='layui-checkbox']:checked").prop({checked:false});            $("input[name='layui-checkbox']:first-child").prop({checked:true});            layui.form.render('checkbox','layui-reset-checkbox');// 多选重置结束// 下拉重置开始$('.selcted').val('选择1');            layui.form.render('select','layui-reset-selcted');// 下拉重置开始});// 监控单选改变layui.form.on("radio(layui-radio)",function(data){console.log(data);        });// 监控多选改变layui.form.on('checkbox(layui-checkbox)',function(data){console.log(data);        });// 监控下拉改变layui.form.on('select(layui-selected)',function(data){console.log(data);        });/**

        * [initPage 初始化分页]

        * @return {[type]} [description]

        */functioninitPage(){            layui.laypage.render(                {elem:'page',count: $('.layui-table').attr('data-totalRow') ,curr: params.currentPage,limit:params.pageSize,layout: ['count','prev','page','next','limit','skip'] ,jump:function(obj,first){if(params.pageSize == obj.limit){                            params.currentPage = obj.curr;                        }else{                            params.currentPage =1;                            params.pageSize = obj.limit;                        }                        obj.count = $('.layui-table').attr('data-totalRow');if(!first){// 判断是否初次加载initList();                        }                    }                });        }